adaptImages.js - A Simple Stop-Gap JavaScript Solution To Responsive Images

adaptImages.js provides a simple function adaptImages, which you can use to support responsive images on your web pages today.  This is a stop-gap approach until we have a specification and a good polyfill for picture/pic element that the W3C Responsive Images Community Group is working on.

Pros And Cons

Responsive images aren't currently supported by web browsers, although many smart people are working towards that.

All available approaches, today, for adapting your pages to show the right size and resolution of images are hacks that compromise on one thing for another. It is important to understand what these compromises are before you pick a particular approach for your next project.

Pros

• Works well when all images on your page follow the same criteria for selecting the version of an image to show. For example, if a page's width is greater than 640px, show the large version of all images on the page.
• Is very fast since it only has to test the context once, unlike approaches that must support a different criteria for each image and each source.
• Works completely client side, unlike earlier similar approaches, which require server side code.
• Is quite flexible and lets you decide how to choose between versions of images to show. You could use page width, device resolution, matchMedia, observed network speed or any other mechanism to make your choice.
• Is quite compact, the minified version is ~470 bytes

Cons

• Doesn't give you fine grained control on how each image is selected. Approaches that support srcset and media queries for each source are much better if you need that control.
• The markup is a semantic mess.
• The markup isn't future proof. In the future when a standard is implemented for responsive images, you will need to either continue to use adaptImages script or update all old content to support the new picture markup.

Requirements: None
Demo: http://mrinalwadhwa.github.com/adaptImages/
License: MIT License

Daily Posts, Be Updated, Subscribe:

Want Free Web Resources? Enter Your Email And We'll Send It To You - Daily! (265+ Subscribers)

Yup, it's that straight forward! Enter your email address below and we'll send you the latest web resources to your inbox, everyday. We don't do spam. Ever.

Your Email Address

Trending Posts On Functionn This Week

Share:

Other Interesting Resources: