jQuery Picture

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!).

Author

Giovanni DiFeterici

Giovanni has a BFA in Fine Art & a BS in Graphic Design. He is an accomplished illustrator & designer. He's the go to guy when it comes to developing creative solutions to complex visual problems.

  • http://abandon.ie Abban

    Thanks for the nice words Giovanni!

    I actually reworked some of the code from Picture into another little plugin for handling breakpoints in your javascript code here which you might find useful. I replaced the functionality for loading different images with a function to save a window variable and fire events when the client window is at different sizes.

    Its handy when you want to fire some js only between certain breakpoints. Say if you have 3 columns that you would like to become a tabbed box on smaller screens.