• Posts
  • RSS
  • ◂◂RSS
  • Contact

  • High DPI images with srcset

    June 9th, 2014
    tech  [html]
    Chrome now supports srcset, which lets you write things like:
      <img src="image-1x.jpg"
              srcset="image-1x.jpg 1x,
                      image-2x.jpg 2x">
    
    That is, you can now send high PI ("retina") images only to browsers that support them. Previously there weren't really good options for this, and you needed to do something dynamic based on the user-agent string, send the high PI image to all devices, do something in javascript, or worse. Now the browser can figure this out.

    I've tweaked my blog software to put in a srcset when it sees an image with src foo.jpg and foo-2x.jpg is present on disk. [1] If your browser supports srcset and you have a screen with extra dots per inch, you should see "2x" overlaid on the image below and it should look extra sharp. Otherwise you should see "1x".

    Really this is something PageSpeed should be able to do automatically...


    [1] Actually, it's a little more complicated, because I've used a few conventions over the years for naming files. It actually looks for foo-2x.EXT if it sees any of foo.EXT, foo-sm.EXT, foo-small.EXT, or foo-tn.EXT. This is a case where a little more consistency would have helped, though it could have been worse.

    Comment via: google plus, facebook

    Recent posts on blogs I like:

    What should we do about network-effect monopolies?

    Many large companies today are software monopolies that give their product away for free to get monopoly status, then do horrible things. Can we do anything about this?

    via benkuhn.net July 5, 2020

    More on the Deutschlandtakt

    The Deutschlandtakt plans are out now. They cover investment through 2040, but even beforehand, there’s a plan for something like a national integrated timetable by 2030, with trains connecting the major cities every 30 minutes rather than hourly. But the…

    via Pedestrian Observations July 1, 2020

    How do cars fare in crash tests they're not specifically optimized for?

    Any time you have a benchmark that gets taken seriously, some people will start gaming the benchmark. Some famous examples in computing are the CPU benchmark specfp and video game benchmarks. With specfp, Sun managed to increase its score on 179.art (a su…

    via Posts on Dan Luu June 30, 2020

    more     (via openring)


  • Posts
  • RSS
  • ◂◂RSS
  • Contact