High DPI images with srcset

June 9th, 2014
tech
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, substack

Recent posts on blogs I like:

Retrospective on life tracking and effectiveness systems

I’ve been doing life tracking for around 10 years, and this post is looking back at some things I learned from the data (since my previous retrospective in 2017). I also review various productivity / effectiveness systems I have tried and which ones have …

via Victoria Krakovna July 4, 2025

Linkpost for June

Effective altruism, policy, social justice, reality's surprising amount of detail, short stories

via Thing of Things July 2, 2025

Elixir's Last Dance

On May 18th, the contra dance band Elixir had their last gig ever. The dance was packed: there were three hundred people. It was the only dance BIDA has ever done where they sold tickets. People flew from across the country just to hear Elixir play one la…

via Lily Wise's Blog Posts June 5, 2025

more     (via openring)