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 img element. It uses the srcset attribute and different @media-queries to fetch the correct image for the device-screen.

Author: Andreas Klein | @ixisio

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