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

Pieces of time

My friend used to have two ‘days’ each day, with a nap between—in the afternoon, he would get up and plan his day with optimism, whatever happened a few hours before washed away. Another friend recently suggested to me thinking … Continue reading →

via Meteuphoric November 11, 2019

Mauerfall

The Berlin Wall fell 30 years ago. I feel weird about where I’m writing this post from. I was expecting to be writing this from Berlin, after visiting the commemorations. But I’m visiting Boston (and New York) right now and the connotation of talking abou…

via Pedestrian Observations November 10, 2019

Wild animal welfare in Hans Christian Andersen

Continuing the theme of wild animal suffering in children’s lit… Hans Christian Andersen’s stories involve a lot of suffering of both human and animal varieties. “The Ugly Duckling” takes a brief detour from describing the duckling’s repeated social humil…

via The whole sky November 7, 2019

more     (via openring)

More Posts:


  ::  Posts  ::  RSS  ::  ◂◂RSS  ::  Contact