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

Hedonic asymmetries

Creating really good outcomes for humanity seems hard. We get bored. If we don’t get bored, we still don’t like the idea of joy without variety. And joyful experiences only seems good if they are real and meaningful (in some sense we can’t easily pin down…

via The sideways view January 26, 2020

Live the questions now

Here’s some advice that my Godmother, Lynne Caldwell, gave me a few years ago. I found it again the other day and it struck me that at least I understand its wisdom now. She really did get my problem. It feels like he’s speaking directly to me. It’s from …

via Holly Elmore January 23, 2020

International Links: a Revision

In 2011, I wrote a post arguing that international links underperform. I gave examples, using many links nearly all of which have rotted in the 8.5 years since, showing that the ridership on various air and rail city pairs was lower if they were in two di…

via Pedestrian Observations January 22, 2020

more     (via openring)

More Posts:


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