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

Recent posts on blogs I like:

What are the results of more parental supervision and less outdoor play?

Ups and downs for mental health and injury rates The post What are the results of more parental supervision and less outdoor play? appeared first on Otherwise.

via Otherwise November 24, 2023

My startup advice

I sat down for a conversation with Alex Long. He took notes and sent them to me, and it seemed worth lightly-editing the notes and posting. I’ve left it quite raw, more like a tweet thread than a proper blog post.

via Home October 23, 2023

A Big Problem With The Going To Bed Book

One day my dad was reading this book called the "Going to Bed Book" to my sister Nora. The book is basically about a bunch of animals who are getting ready for bed on a boat. They go down the stairs, take a bath, hang their towels on the wall, find…

via Lily Wise's Blog Posts September 18, 2023

more     (via openring)