Sunday, August 31, 2014

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


Curent state (september 2014)

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.