Skip to content

Chrome 34 and Responsive Images

April 22, 2014

With the release of Chrome 34, Google now supports the srcset attribute of the IMG tag. This is one necessary part of responsive images, but is nowhere near all the functionality you would need. After playing around with it, I’ve found some unexpected behavior. I’m not sure if it’s a bug or a feature, but I reported it anyway, just in case.

The general idea is to use the standard IMG tag, but instruct the browser to load an alternate image if the device has a DPR (window.devicePixelRatio) > 1, and if the srcset attribute lists a URL for a matching PDD (pixel density descriptor). Here’s an example where I want the browser to load a gray 155×114 image if srcset is not supported, a blue 155×114 image if srcset is supported but the DPR is 1, and a red 310×228 image at 155×114 size if srcset is supported and the DPR is 2. Even though I’m not explicitly specifying the dimensions of the image, all three variants are displayed at a width of 155 and a height of 114.

<img alt="Sample One" src="http://dummyimage.com/155x114/eee/000.gif&text=155+x+114"
srcset="http://dummyimage.com/155x114/009/fff.gif&text=155+x+114 1x,
http://dummyimage.com/310x228/f00/000.gif&text=310+x+228 2x">

So far, so good. So what happens if I add a green 620×456 image with a PDD of 4? I would expect any device with a DPR of 4 to display the green image and a device with a DPR of 2 to continue to display the red image.

<img alt="Sample Two" src="http://dummyimage.com/155x114/eee/000.gif&text=155+x+114"
srcset="http://dummyimage.com/155x114/009/fff.gif&text=155+x+114 1x,
http://dummyimage.com/310x228/f00/000.gif&text=310+x+228 2x,
http://dummyimage.com/620x456/0f0/fff.gif&text=620+x+456 4x">

I don’t have a device with a 4 DPR screen, but my retina device with a 2 DPR continues to display the red image.

So what should happen if there isn’t an exact match between a device’s DPR and the tag’s PDD? If I’m reading the specification correctly, I would expect a 2 DPR device to fall back to the 1 PDD src and display the blue image.

<img alt="Sample Three" src="http://dummyimage.com/155x114/eee/000.gif&text=155+x+114"
srcset="http://dummyimage.com/155x114/009/fff.gif&text=155+x+114 1x,
http://dummyimage.com/620x456/0f0/fff.gif&text=620+x+456 4x">

However, that is not the result I got. Instead, Chrome displays the 4 PDD green image at the 155×114 size.

After a series of tests, I can only conclude that the browser is using a DPR > 1 as a trigger to use any srcset URL for a PDD !== 1, and displaying it scaled down proportionately to the PDD value. I’m not sure if this is a bug, or if this was the intent of the specification, but it is certainly not what I expected.

UPDATE: Chrome developers responded to my bug report and kindly pointed out two bits of information. One, the specification calls for loading the next higher PDD image if an exact match isn’t available. Two, the image that is displayed will be scaled according to the specified PDD value. This accurately describes the behavior I was seeing, so it is definitely not a bug.

About these ads
One Comment leave one →
  1. April 25, 2014 8:49 pm

    Check out “Picturefill” – a polyfill for the picture element :) http://scottjehl.github.io/picturefill/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 508 other followers

%d bloggers like this: