Images réactives

Needs translation

Overview

Project lead: Pat Heard (@patheard)

Benefits

  • User is shown an image tailored to their screen resolution and device.
  • Supports all media queries and combinations of media queries (fine grained control over the display of images to the user).
  • Conforms to WCAG 2.0 AA.
  • Progressive enhancement approach.

Recommended usage

Prominent images used in the content area of the page.

Implementation

  1. Add the wet-boew-responsiveimg class to any element on the page.
  2. Specify the image source(s), alt tag and media queries with data attributes:

Data Attributes

Attribute Purpose
data-picture Identifies the <div> as a responsive image.
data-alt Alternate text that will be used for the image's alt attribute.
data-src Path to the image.
data-media CSS media query that determines when the image source is used.
If not specified, this is the default image to display for browsers that don't support CSS media queries.

Examples

Browser Width

Uses a min-width media query to display different image sizes based on the user's browser width:

  • First <div [data-src]> is the default image. This is displayed if the browser doesn't support media queries or none of the media queries match.
  • Next four <div [data-src] [data-media]> elements are the image sources for different min-widths.
  • <img> in the <noscript> tag is served to non-JavaScript browsers.
<div data-picture data-alt="Image alt text" class="wet-boew-responsiveimg">
	<div data-src="large.jpg"></div>

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

	<noscript><img src="large.jpg" alt="Image alt text"></noscript>
</div>

Device Resolution

Uses two media queries to display high-resolution versions of an image to devices that will support it (i.e. Retina displays):

<div data-picture data-alt="Image alt text" class="wet-boew-responsiveimg">
	<div data-src="low-resolution.jpg"></div>
	<div data-src="high-resolution.jpg" data-media="(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)"></div>

	<noscript><img src="low-resolution.jpg" alt="Image alt text"></noscript>
</div>

Working Example

Development

The code for responsive images is located in several places within the source folder of WET:

Known Issues

The plugin only works with browsers that support CSS media queries. Browsers that don't support media queries display the image from the <div [data-src]> element with no data-media attribute set.

Version History