Responsive Images with <picture> and srcset

Serving different image sizes for different screen resolutions is key for fast websites. The srcset attribute lets the browser pick the best image from a list based on screen size or pixel density. This technique ensures users on mobile devices get smaller, faster-loading images, while users on high-resolution desktops get a crisp, detailed picture.

Example 1: srcset with Width Descriptors

<img srcset="photo-480w.jpg 480w,
             photo-800w.jpg 800w"
     src="photo-800w.jpg"
     alt="A responsive photo.">

Explanation The srcset attribute lists available image files and their actual widths (using the w descriptor). The browser uses this information to download the most efficient image for the current viewport.

Example 2: srcset and sizes Attributes

<img srcset="img-small.jpg 500w,
             img-medium.jpg 1000w,
             img-large.jpg 1500w"
     sizes="(max-width: 700px) 100vw, 50vw"
     src="img-medium.jpg"
     alt="A responsive image using sizes.">

Explanation The sizes attribute tells the browser the image's display width at different screen sizes. This helps it select the right image from srcset even before the CSS is loaded.

Example 3: srcset with Pixel Density

<img srcset="logo-1x.png 1x,
             logo-2x.png 2x"
     src="logo-1x.png"
     alt="A high-DPI logo.">

Explanation The x descriptor denotes the device's pixel ratio. This method ensures that devices with high-DPI screens receive a higher-resolution image (logo-2x.png) for maximum sharpness.

Example 4: Supporting Modern Image Formats

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="An image with a modern format.">
</picture>

Explanation The <picture> element allows you to specify different image sources. The browser will use the first <source> it supports, like the efficient WebP format, and ignore the rest.

Example 5: Combining Formats, Sizes, and srcset

<picture>
  <source type="image/webp"
          srcset="small.webp 400w, large.webp 800w"
          sizes="(max-width: 600px) 100vw, 50vw">
  <source type="image/jpeg"
          srcset="small.jpg 400w, large.jpg 800w"
          sizes="(max-width: 600px) 100vw, 50vw">
  <img src="large.jpg" alt="A fully responsive image.">
</picture>

Explanation This powerful combination uses <picture> for different formats (WebP, JPEG) and srcset/sizes within each to handle various resolutions. This provides the most optimized image for any situation.

Art Direction with the <picture> Element

Art direction involves showing a completely different or cropped image based on the screen size. The <picture> element uses media queries to swap images, ensuring the main subject is always clear and well-composed, whether on a wide desktop monitor or a narrow phone screen.

Example 1: Simple Art Direction

<picture>
  <source media="(min-width: 768px)" srcset="landscape-image.jpg">
  <img src="portrait-image.jpg" alt="A photo cropped for mobile and desktop.">
</picture>

Explanation The media attribute on the <source> tag contains a media query. If the viewport is 768px or wider, the browser loads landscape-image.jpg; otherwise, it uses the default <img> source.

Example 2: Multi-Breakpoint Art Direction

<picture>
   <source media="(min-width: 1024px)" srcset="wide-view.jpg">
   <source media="(min-width: 480px)" srcset="medium-view.jpg">
   <img src="close-up-view.jpg" alt="An art-directed image with multiple crops.">
</picture>

Explanation You can use multiple <source> elements to define several breakpoints. The browser picks the first source that matches its media query, allowing for tailored images across a range of devices.

Example 3: Art Direction with Resolution Switching

<picture>
  <source media="(min-width: 800px)"
          srcset="desktop-crop-1x.jpg 1x, desktop-crop-2x.jpg 2x">
  <img srcset="mobile-crop-1x.jpg 1x, mobile-crop-2x.jpg 2x"
       src="mobile-crop-1x.jpg" alt="Art direction with resolution options.">
</picture>

Explanation This technique combines art direction (media) with resolution switching (srcset). The browser first chooses the correct crop based on screen width, then selects the appropriate resolution for that crop.

Example 4: Changing Image Aspect Ratio

<picture>
  <source media="(min-width: 900px)" srcset="pano-16x9.jpg">
  <img src="square-1x1.jpg" alt="Images with different aspect ratios.">
</picture>

Explanation Art direction is ideal for changing an image's aspect ratio to fit different layout contexts. This ensures the image doesn't get awkwardly cropped or scaled by CSS.

Example 5: Art Direction for Dark Mode

<picture>
   <source media="(prefers-color-scheme: dark)" srcset="logo-white.svg">
   <img src="logo-black.svg" alt="A logo that adapts to the color scheme.">
</picture>

Explanation The prefers-color-scheme media query allows you to adapt your images to the user's OS-level theme. This is perfect for logos or graphics that need to contrast with the background.