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

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.