• 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:

    Governance in Rich Liberal American Cities

    Matt Yglesias has a blog post called Make Blue America Great Again, about governance in rich liberal states like New York and California. He talks about various good government issues, and he pays a lot of attention specifically to TransitMatters and our …

    via Pedestrian Observations November 19, 2020

    Collections: Why Military History?

    This week, I want to talk about the discipline of military history: what it is, why it is important and how I see my own place within it. This is going to be a bit of an unusual collections post as it is less about the past itself and more about how we st…

    via A Collection of Unmitigated Pedantry November 13, 2020

    Misalignment and misuse: whose values are manifest?

    Crossposted from world spirit sock puppet. AI related disasters are often categorized as involving misaligned AI, or misuse, or accident. Where: misuse means the bad outcomes were wanted by the people involved, misalignment means the bad outcomes were wan…

    via Meteuphoric November 13, 2020

    more     (via openring)


  • Posts
  • RSS
  • ◂◂RSS
  • Contact