jQuery Picture – Responsive Images with JavaScript

There’s a lot of talk about responsive web design and how your web pages can be made to adapt to varying browser sizes including mobile browsers. A key component of responsive web design is ensuring that your images are in turn scaled accordingly.

There are a couple of jQuery plugins available to help you implement responsive images to your layout. One of the most recent ones is jQuery Picture, which is extremely lightweight with a file size of just 2kb.

The plugin is  easy to use and currently works with the <figure> tags or with the newly proposed <picture> and <source> tags. It allows you to specify several images for the varying container size when the browser is resized via the data-media attributes. Here’s a sample source code of jQuery Picture with the <picture> attribute: