Comparing Responsive Image Proposals
Responsive Web Design has gained in usage and ease of use. But one, rather large, missing piece is responsive images.
I should preface this post as such: I very well may have a lack of understanding or even misunderstanding regarding HTML spec proposals. Also, If you're not aware of Responsive Web Design, this post won't be very interesting.
As it stands there are two (popular) proposals for responsive images:
<img src="email@example.com" alt="" set="firstname.lastname@example.org 600w 200h 1x, email@example.com 600w 200h 2x, face-icon.png 200w 200h">
<picture alt=""> <source src="mobile.jpg" /> <source src="large.jpg" media="min-width: 600px" /> <source src="large_1.5x-res.jpg" media="min-width: 600px, min-device-pixel-ratio: 1.5" /> <img src="mobile.jpg" /> </picture>
With many voicing their preference for the latter. Mainly because:
- It's easier to read
- It's familiar (see the
And, I agree. But, Simon Pieters brings up some points on the complexity of implementation. In brief, the
srcset attribute is easier to implement in the spec, and would avoid some pitfalls that the
So, besides smaller semantic grievances, the main argument for each proposal is:
<picture>is easier to read and write as a developer
This is no easy decision. And, in getting a little more familiar with the community discussions regarding new HTML specs, I have gained much respect for those involved.
In the end, I still feel the
<picture> element fits better along the existing HTML spec and elements. If
srcset were to be implemented it would really be crossing a new boundary in terms of power given to an attribute—which I don't currently support.