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
