Responsive Images Community Group logo

The demos work in any modern browser.

Examples of art direction. See more demos of responsive images.

Simple Cropping

This shows the basic implementation and usage of the picture element. It uses the source element and different @media-queries to fetch the correct image for the device-screen.

Author: Anselm Hanneman | @anselmhannemann

This demo shows:

  • mobile
  • tablet
  • desktop
  • monochrome / eInk
  • fallback

Grid System

This shows the basic implementation and usage of the picture element. It uses the source element and different @media-queries to fetch the correct image for the device-screen.

Author: Andreas Klein | @ixisio

This demo shows:

  • mobile
  • tablet
  • desktop
  • monochrome / eInk
  • fallback

Art Direction

Using the picture element for “art direction.”

Author: Shane Hudson | @shanehudson

This demo shows:

  • small / large screen
  • art-direction
  • fallback

Variable width example

This example shows of variable width images with multiple responsive breakpoints.

Yoav Weiss

This demo shows:

  • mobile
  • tablet
  • desktop
  • fallback