Responsive Images JS
Simple jQuery powered function to enable responsive images
Tested with jQuery 2.x, however I don't see why it shouldn't work on earlier versions. Feel free to test and let me know.
Couldn't be any easy to use (sizes from largest to smallest)
<img data-sizes="xl, l, m, s, xs" data-srcset=" http://placehold.it/500x400&text=xl, http://placehold.it/400x300&text=l, http://placehold.it/300x200&text=m, http://placehold.it/200x150&text=s, http://placehold.it/150x100&text=xs " /> <img data-sizes="l, m" data-srcset=" http://placehold.it/400x300&text=l, http://placehold.it/300x200&text=m " />
- data-sizes: allows predefined sizes or actual css media queries.
- data-srcset: comma separated urls that are to be used in the same order as data-sizes
Current predefined sizes:
xs:"only screen and (max-width : 480px)", s:"only screen and (min-width : 481px)", m:"only screen and (min-width : 768px)", l:"only screen and (min-width : 1280px)", xl:"only screen and (min-width : 1921px)"
Feel free to contribute to this project and send me any pull request. Perhaps performance improvements, debate defaults screen sizes or even port a version that doesn't require jQuery!