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:
[html]
<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>
[/html]

And the JavaScript init function:

[javascript]

$(function(){
$(‘figure.responsive’).picture();
});

[/javascript]

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

2 Comments

  1. 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.

    Reply
  2. sigmund

    I tried to use this plugin bit I get a problem when I try to set a breakpoint to 1000px or larger. It works until 999 but then it stops. How can I solve the problem?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

More News & Articles

The Essential Guide to Getting Started on Freelance Writing

The Essential Guide to Getting Started on Freelance Writing

Explore the lucrative and fulfilling world of freelance writing with our essential guide. Learn about specialties like blogging, social media, article, and technical writing. Build a portfolio, find work, set up your business, and discover the potential earnings. Embrace the freedom of working from home and follow tips for success in your dream career.

Securing Your Website: A DevOps Security Checklist

Securing Your Website: A DevOps Security Checklist

Learn how to secure your website with a comprehensive DevOps checklist. Dive into SSL/TLS encryption, password practices, and more. Discover the power of Content Security Policy and safeguard your online presence effectively.

EMAIL NEWSLETTER