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.

Usage

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)" 

Demo

Contribution

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!

Licence

MIT