Data Picture

Purpose

Allow a web page to specify different image sources to display based on media queries. The component is an event driven port of Picturefill.

Use when

• Displaying different sized images for different browser screen sizes.
• Displaying different resolution images to devices with different pixel densities.

Working example

English example

French example

How to implement

1. Add a data-pic element for each image that will have multiple sources:

   <span data-pic="data-pic" data-alt="Alt tag for the image">

2. Nested inside the data-pic element, specify the default image, different images sources and fallback image:
   1. Default image: image that will be displayed if no media queries match or the browser doesn't support media queries:

      <span data-src="img/default.jpg"></span>

   2. Different image sources: images that will be displayed if their media query matches:

      <span data-src="img/small.jpg" data-media="(min-width: 0px)"></span>
      <span data-src="img/medium.jpg" data-media="(min-width: 500px)"></span>
      <span data-src="img/large.jpg" data-media="(min-width: 960px)"></span>

   3. Fallback image: image to display if JavaScript is not supported:

      <noscript><img src="img/fallback.jpg" alt="Alt tag for the image"/></noscript>

When you're finished, you should have an element that looks like the following:

<span data-pic="data-pic" data-alt="Alt tag for the image">
	<!-- Default image -->
	<span data-src="img/default.jpg"></span>

	<!-- Images for browsers with CSS media query support -->
	<span data-src="img/small.jpg" data-media="(min-width: 0px)"></span>
	<span data-src="img/medium.jpg" data-media="(min-width: 500px)"></span>
	<span data-src="img/large.jpg" data-media="(min-width: 960px)"></span>

	<!-- Fallback content for non-JS browsers. -->
	<noscript><img src="img/fallback.jpg" alt="Alt tag for the image"/></noscript>
</span>

Configuration options

All configuration options of the plugin are controlled with data attributes:

Events

Document the public events that can be used by implementers or developers.

$( document ).on( "wb-ready.wb-pic", function( event ) {
});

$( "[data-pic]" ).on( "wb-ready.wb-pic", function( event ) {
});

$( document ).on( "wb-updated.wb-pic", "[data-pic]", function( event ) {
});

$( "[data-pic]" ).on( "wb-updated.wb-pic", function( event ) {
});

$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Data picture source code on GitHub