jQuery Picture | Unmatched Style
jQuery Picture is a small plugin designed to help manage responsive images. It solves the problems associated with responsive images that are supposed to work well for all devices.
Making an image responsive isn’t too hard, but comes with a fundamental problems. These problems make responsive images difficult to achieve without extra http requests, overlarge images for smaller devices or 100%+ images for larger devices. It’s a sticky wicket, to be sure.
jQuery Picture is a workaround for managing this problem. It is simple to use and handles switching images depending on screen resolution. I won’t go into too much detail about how to use jQuery Picture because the website has great instructions, but I’ll lay the basics on you.
Here’s the markup:
<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea"> <noscript> <img src="assets/images/large.png" alt="A Half Brained Idea"> </noscript></figure>And the JavaScript init function:
$(function(){ $('figure.responsive').picture();});Essentially, jQuery Picture watches the screen width and switches the image based upon the data attribute. In the case above (lifted directly from jquerypicture.com), the plugin switches between three images. One image (the first “assets/images/small.png”) is served when the screen is less than 440px. Another image (“assets/images/medium.png”) is served between 440px and 599px. The last image (“assets/images/large.png”), is served for screens 600px wide or larger. You can even define a fallback image (wrapped in ‘noscript’ tags) inside the figure element. Nifty.
Initializing the plugin is super-duper simple.
This is a nice solution to managing responsive images for smaller devices. Hopefully, we’ll have a good native solution, but until then, it’s nice to know that with just a little javaScript, we can make sure we’re not eating up bandwidth or getting too hacky. If you want to see the plugin do it’s magic, just open your developer tools (I like Chrome) and resize your browser to mobile sizes. Load the jQuery Picture demo page and take a look at your network downloads. You’ll see that only the small .png is loaded. Resize your browser and watch as the plugin chooses the correct image for the screen size and replaces the smaller one. Magic!
Check it out if you have a chance. I’m sure I’ll be using it for my responsive designs from here on out (or until we get some native solutions!).