Responsive images

In this post I summarize the techniques used for a responsive images. None of the existing techniques are not perfect. On the client side was released a new specification which combines together all the previous techniques.On the server side are arising new techniques and solutions of third parties.

Client side

• srcset attribute
• src-N attribute
• picture element

Server side

• Based on HTTP headers (User agent, ...) server sends the correct version of the image. (see src.sencha.io, Adaptive Images, ... )

Curent state (september 2014)

• srcset + src-N + picture = new specification based on Picture element

Example

	<picture alt="description of image">
	<!-- low-res, default -->
	<source src="small.jpg">
	<!-- med-res -->
	<source src="medium.jpg" media="(min-width: 400px)">
	<!-- high-res -->
	<source src="large.jpg" media="(min-width: 800px)">
	<!-- Fallback content -->
	<img src="small.jpg" alt="description of image">
	</picture>

view raw responsive1 hosted with ❤ by GitHub

	<picture>
	<!--[if IE 9]><video style="display: none;"><![endif]-->
	<source srcset="wedding-large.jpg" media="(min-width: 820px)" />
	<source srcset="wedding-medium.jpg" media="(min-width: 640px)" />
	<source srcset="wedding-small.jpg" />
	<!--[if IE 9]></video><![endif]-->
	<img src="wedding-small.jpg" alt="Wedding Day" />
	</picture>

view raw responsive2 hosted with ❤ by GitHub

Browser support for Picture element is weak, but you can use the polyfill. Picture Fill has recently been updated to 2.0. and you can use the actual syntax.

Grunt Responsive Images

If you are using Grunt certainly appreciate grunt-responsive-images plugin.