HTML Responsive Images with picture and source

Responsive images let you serve the most appropriate image for a user’s screen size, device pixel density, and browser support. The picture and source elements give you control over which image file the browser chooses, while still keeping a normal img element as the fallback and accessible content.

Quick answer: Use picture when you need the browser to choose between different image crops, formats, or breakpoints. Put one or more source elements before a fallback img, and let the browser pick the first matching source.

Difficulty: Beginner

You'll understand this better if you know: basic HTML elements, how the img element works, and the idea that browsers can choose between multiple files.

1. What Is HTML Responsive Images with picture and source?

Responsive images are HTML patterns that help the browser load the right image for the current situation. The picture element is a container for one or more source elements and a required fallback img element.

picture defines a selection group for images.
source provides candidate image files and matching rules.
img displays the chosen image and provides fallback content.
The browser evaluates sources in order and uses the first one that matches.
The final img still matters for accessibility and fallback support.

This pattern is used when one image file is not enough. For example, you may need a wide crop on desktop, a tighter crop on mobile, or a modern file format such as WebP or AVIF when the browser supports it.

2. Why HTML Responsive Images with picture and source Matters

Images are often the largest assets on a page. If you send one oversized image to every device, mobile users may download more data than they need, and small screens may receive awkward crops that hide important content.

Responsive images help solve three common problems:

Bandwidth waste: smaller screens can receive smaller files.
Art direction: different crops can be used for different layouts.
Format support: modern browsers can get modern formats while older browsers fall back safely.

Use picture when the image itself needs to change, not just its rendered size. If only the display size changes, the simpler img element with srcset and sizes may be enough.

3. Basic Syntax or Core Idea

The basic structure is a picture element containing one or more source elements, followed by a fallback img.

Minimal pattern

Each source can include a media condition, a type hint, or both. The browser checks them in order and chooses the first match.

<picture>
  <source media="(min-width: 800px)" srcset="images/hero-wide.jpg">
  <source media="(min-width: 480px)" srcset="images/hero-medium.jpg">
  <img src="images/hero-small.jpg" alt="Team collaborating around a laptop">
</picture>

In this example, the browser checks each source in order. If none match, it uses the img element.

What each part does

picture is the wrapper that enables source selection.
source offers alternate image candidates.
media defines when a source should apply.
type lets the browser skip unsupported formats early.
img is required and should always include meaningful alt text.

4. Step-by-Step Examples

Example 1: Different crops for mobile and desktop

This is the most common reason to use picture: the image composition changes at different viewport widths.

<picture>
  <source media="(min-width: 900px)" srcset="images/hero-landscape.jpg">
  <source media="(min-width: 500px)" srcset="images/hero-square.jpg">
  <img src="images/hero-portrait.jpg" alt="Designer reviewing product mockups">
</picture>

On large screens, the wide crop fits a desktop layout. On smaller screens, the square or portrait crop keeps the subject visible without awkward trimming.

Example 2: Serving a modern format with fallback

Browsers that support modern formats can use them, while older browsers safely fall back to a JPEG or PNG.

<picture>
  <source type="image/avif" srcset="images/photo.avif">
  <source type="image/webp" srcset="images/photo.webp">
  <img src="images/photo.jpg" alt="Close-up of a ceramic coffee cup">
</picture>

The browser uses the first supported file type. This is a practical way to improve file size without breaking older browsers.

Example 3: Using media queries to adapt to layout

You can use media to match your layout breakpoints. This helps the image content fit the surrounding design.

<picture>
  <source media="(min-width: 64rem)" srcset="images/banner-large.jpg">
  <img src="images/banner-small.jpg" alt="Conference stage with speakers and audience">
</picture>

This pattern is useful when the image area expands significantly on larger screens and needs a different crop or focal point.

Example 4: Combining format switching and layout switching

You can combine type and media to cover both browser support and screen size.

<picture>
  <source media="(min-width: 1000px)" type="image/webp" srcset="images/hero-large.webp">
  <source media="(min-width: 1000px)" srcset="images/hero-large.jpg">
  <source type="image/webp" srcset="images/hero-small.webp">
  <img src="images/hero-small.jpg" alt="Runner tying shoes before a race">
</picture>

The browser evaluates the sources from top to bottom, so order matters. Put the most specific matches first.

5. Practical Use Cases

Use picture and source when the image needs to change in a meaningful way. Common examples include:

Hero images: different crops for mobile and desktop layouts.
Editorial images: portrait, square, or landscape versions for different breakpoints.
Marketing pages: lightweight modern formats for supported browsers.
Product pages: alternate angles or zoom-friendly crops on larger screens.
Art-directed banners: images whose composition must change with the layout.

If the only difference is physical size, consider img with srcset and sizes instead. That approach is often simpler and easier to maintain.

6. Common Mistakes

Mistake 1: Forgetting the fallback img element

A picture element is incomplete without a fallback img. The img is what displays if no source matches or if the browser does not support the newer image selection behavior.

Problem: Without an img, the browser has nothing guaranteed to render, and the image has no accessible alternative text.

<picture>
  <source media="(min-width: 800px)" srcset="images/hero-wide.jpg">
</picture>

Fix: Always include a fallback img with a real src and useful alt text.

<picture>
  <source media="(min-width: 800px)" srcset="images/hero-wide.jpg">
  <img src="images/hero-small.jpg" alt="Team brainstorming at a desk">
</picture>

The corrected version works because the img provides the guaranteed fallback and accessible description.

Mistake 2: Putting the fallback img before source elements

The browser only evaluates source elements that come before the img. If you place img first, the selection rules do not work as intended.

Problem: The fallback image should be last. Otherwise the browser may ignore the alternate sources and use the default image immediately.

<picture>
  <img src="images/default.jpg" alt="Mountain lake">
  <source media="(min-width: 800px)" srcset="images/large.jpg">
</picture>

Fix: Put all source elements before the img.

<picture>
  <source media="(min-width: 800px)" srcset="images/large.jpg">
  <img src="images/default.jpg" alt="Mountain lake">
</picture>

This works because the browser checks the sources in document order and then falls back to the img element.

Mistake 3: Using picture when only image size changes

Many developers reach for picture when they really need a single image that scales across different display densities or viewport widths. In that case, srcset and sizes on img are usually a better fit.

Problem: Using picture for simple resizing adds complexity without solving the right problem. It can also make maintenance harder if every breakpoint needs its own file.

<picture>
  <source media="(min-width: 1200px)" srcset="images/photo-large.jpg">
  <source media="(min-width: 800px)" srcset="images/photo-medium.jpg">
  <img src="images/photo-small.jpg" alt="Office workspace">
</picture>

Fix: If the crop does not need to change, use one img with srcset and sizes.

<img src="images/photo-small.jpg"
     srcset="images/photo-small.jpg 600w, images/photo-medium.jpg 1200w, images/photo-large.jpg 1800w"
     sizes="(min-width: 1200px) 50vw, (min-width: 800px) 75vw, 100vw"
     alt="Office workspace">

The corrected version works because it lets the browser choose the best file size without unnecessary art direction logic.

7. Best Practices

Practice 1: Keep the alt text consistent with the chosen content

The fallback img should describe the image content that matters, not the file name or layout. This is especially important when different crops show different details.

<picture>
  <source media="(min-width: 900px)" srcset="images/meetup-wide.jpg">
  <img src="images/meetup-mobile.jpg" alt="People talking at a community meetup">
</picture>

This matters because screen readers rely on the img text, even when the browser chooses a different source visually.

Practice 2: Order sources from most specific to least specific

Browsers choose the first source that matches. Put the narrowest conditions or best-supported formats first so the logic stays predictable.

<picture>
  <source type="image/avif" srcset="images/scene.avif">
  <source type="image/webp" srcset="images/scene.webp">
  <img src="images/scene.jpg" alt="City skyline at sunset">
</picture>

This makes the browser’s decision tree easy to reason about and reduces surprises during maintenance.

Practice 3: Use picture for art direction, not just compression

The real advantage of picture is that you can change the visual composition, not only the file format. If the subject needs different framing on small screens, that is a strong reason to use it.

<picture>
  <source media="(min-width: 700px)" srcset="images/portrait-desktop.jpg">
  <img src="images/portrait-mobile.jpg" alt="Portrait of a chef smiling">
</picture>

This works well when cropping changes the meaning or readability of the image.

8. Limitations and Edge Cases

source is not displayed by itself: it only works inside picture or media elements.
Order matters: browsers use the first matching source, so a broad match placed too early can block better candidates.
media conditions depend on the viewport: they do not inspect the actual image dimensions.
type support varies: if a browser does not recognize the format, it skips that source.
The fallback img still downloads in some cases: browser behavior depends on which source matches and what is supported.
Accessibility still depends on the img: meaningful alt text is not optional.
Not all responsive needs require picture: if only intrinsic size changes, the simpler img pattern is often better.

One common surprise is that changing the visual layout in CSS does not automatically trigger a different source. The browser chooses the image before layout finishes, based on the rules in the markup.

9. Practical Mini Project

Here is a small, complete example of a marketing hero that uses different crops for mobile and desktop while also providing modern format fallbacks.

<article>
  <header>
    <h1>Spring Collection</h1>
    <p>Fresh styles for work and weekends.</p>
  </header>

  <picture>
    <source media="(min-width: 900px)" type="image/avif" srcset="images/spring-hero-desktop.avif">
    <source media="(min-width: 900px)" type="image/webp" srcset="images/spring-hero-desktop.webp">
    <source media="(min-width: 900px)" srcset="images/spring-hero-desktop.jpg">
    <source type="image/avif" srcset="images/spring-hero-mobile.avif">
    <source type="image/webp" srcset="images/spring-hero-mobile.webp">
    <img src="images/spring-hero-mobile.jpg" alt="Model wearing a light jacket in an outdoor setting">
  </picture>
</article>

This example combines format switching and art direction in one component. Desktop users can get a wider composition, while smaller screens receive a crop that fits the layout better.

10. Key Points

picture is for selecting between multiple image sources.
source defines the candidates and their conditions.
img is required and remains the accessibility and fallback anchor.
Use media for breakpoint-based choices and type for format support.
Put sources before the fallback image, and order them from most specific to least specific.
Use picture for art direction; use img with srcset and sizes for simple responsive sizing.

11. Practice Exercise

Try building a responsive card image that meets these requirements:

Show a wide crop on screens wider than 960px.
Use a square crop on smaller screens.
Prefer WebP when the browser supports it.
Provide a meaningful fallback image and alt text.

Expected output: A single picture element with ordered source elements and one fallback img.

Hint: Put the desktop conditions first, then the format matches, and end with the fallback img.

Solution:

<picture>
  <source media="(min-width: 960px)" type="image/webp" srcset="images/card-wide.webp">
  <source media="(min-width: 960px)" srcset="images/card-wide.jpg">
  <source type="image/webp" srcset="images/card-square.webp">
  <img src="images/card-square.jpg" alt="Notebook, pen, and coffee on a desk">
</picture>

This solution works because the browser first checks the desktop media query, then chooses the best supported format, and finally falls back to the img element.

12. Final Summary

The picture element and its source children give you precise control over which image the browser loads. That makes them ideal for art direction, format switching, and layout-aware image delivery.

Remember that picture does not replace the img element. The img still provides the fallback, the accessible text alternative, and the final reliable output when no source matches.

If you are deciding between picture and img with srcset, start by asking whether the image content itself needs to change. If yes, use picture. If only the size changes, the simpler img pattern is usually enough.