Comments on: Responsive Images – The New Hotness

By: Martin Ridgway

Martin Ridgway — Wed, 30 Jan 2013 19:45:55 +0000

Both approaches mix content and presentation. picture does it in a comprehensible and consistent way, however. srcset is a completely new way of writing HTML and incorporating stylistic attributes.
I’d use picture for retina thus:
source media=”(min-device-pixel-ratio: 1.1)” src=”tom-2x.jpg”
ie, serve tom-2x.jpg when the device pixel ratio is 1.1 or above. More verbose, but much easier to follow.

By: Amit Malhotra

Amit Malhotra — Wed, 30 Jan 2013 18:07:31 +0000

Ah also wanted to mention this technique would be good to use when delivering images to Retina devices with different screen densities. Thats what the 1px thingy is for right?

By: Amit Malhotra

Amit Malhotra — Wed, 30 Jan 2013 17:38:53 +0000

Good point! I have always felt uneasy about the background image in CSS approach. Not to mention its a pain to right click and inspect the source of the image.
The jQuery Picture approach is certainly seems superior for now.
I have to say that the picture attribute seems to mix content and style together and srcset seems better – no?

By: Martin Ridgway

Martin Ridgway — Wed, 30 Jan 2013 17:07:17 +0000

Yes, and in fact that’s a hacky little workaround that sometimes gets used. But here’s the kicker…images in the content are exactly that: content. We shouldn’t be placing content images in CSS, in exactly the same way that we shouldn’t be placing presentational elements into the HTML. There are practical reasons beyond the simple “don’t do that because it’s wrong”, as well. For one, an image placed as a CSS background image isn’t printed by default (a user has to specify in their own print settings that they want to print backgrounds). Not a major problem, maybe, but irritating.
However the bigger problem with that approach is this: It’s difficult to get a background image to scale. We still need a way to scale images up or down between the points at which you would switch out your image to the next size (because “standard screen sizes” are a myth). Content images are the way to go here.

By: Amit Malhotra

Amit Malhotra — Wed, 30 Jan 2013 16:55:32 +0000

Nice tip! It made me think about using correct media for each form factor. It will be great when all browsers support this tag.
Could the same effect be achieved today with some CSS class and media query that sets the background source based on the form-factor?