People, I’m sorry. I know we do not need another post about responsive images, but I got inspired to try another responsive images approach after reading the article “Responsive Images: How they Almost Worked and What We Need” by Mat Marquis on A List Apart. My approach is to use the proposed <picture> tag and implement it using server side components.
So Mat explains that one “solution” for the responsive images problem is to solve it in markup by using the <picture> tag in the same way as the <video> tag is implemented. Problem is, no browsers supports the <picture> tag (yet).
<picture> <source src="1024.jpg" media="min-width: 800px" /> <source src="640.jpg" media="min-width: 640px" /> <source src="480.jpg" media="min-width: 480px" /> <source src="320.jpg" /> <!-- Fallback content: --> <img src="http://amobil.se/wp-content/uploads/2012/02/320.jpg" /> </picture>
Try and resize the browser window and reload the site to see the effect. If you are on a mobile device, you need to switch orientation and reload.
So it’s sort of a “serverside polyfill”… It’s not doing anything fancy on the client side so the image will not change when you resize the window. On the other hand, it just results in one static <img> tag that is sent to the browser and optimized for the screen size that you have.
PS: If you want to see other responsive images hacks, and some that are similar to this one, there are plenty up at the Cloud Four blog: Responsive Images