jQuery Picture | Responsive Web Design

jQuery Picture

jQuery picture is a neat little tool that allows you to serve responsive images depending on the width of the users viewport. While it provides a solution for responsive image files sizes it still sets the largest version as the standard src value and requires the web editor to enter additional data attributes to the <figure> element of the image.

If you’re looking for a server side solution then something like Adaptive Images may suite your needs a little better.

You have a choice of two ways to use the plugin, with <figure> tags or with the newly proposed <picture> and <source> tags. Bear in mind that the picture and source tags have only recently been proposed and are not yet valid HTML code (also note that WebKit have just launched srcset support for webkit nightly).

Initialise the plugin

To initialise it you just add .picture() to the element you want to apply it to. It only works on figure and picture tags for now:

$(function(){ $('figure.responsive').picture(); });

See the Pen jQuery Picture by Justin Avery (@justincavery) on CodePen


  • Resource Name

    jQuery Picture

  • Resource Creator

    Abban Dunne

Description

jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.

View on Github Download Resource

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.