# HTML Responsive Images with picture and source Source: https://devdocs10.com/articles/html/html-picture By Murat Bo · Published 2026-09-28 · DevDocs10 (https://devdocs10.com) 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 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. ```html Team collaborating around a laptop ``` 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. ```html Designer reviewing product mockups ``` 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. ```html Close-up of a ceramic coffee cup ``` 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. ```html Conference stage with speakers and audience ``` 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. ```html Runner tying shoes before a race ``` 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. ```html ``` **Fix:** Always include a fallback `img` with a real `src` and useful `alt` text. ```html Team brainstorming at a desk ``` 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. ```html Mountain lake ``` **Fix:** Put all `source` elements before the `img`. ```html Mountain lake ``` 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. ```html Office workspace ``` **Fix:** If the crop does not need to change, use one `img` with `srcset` and `sizes`. ```html 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. ```html People talking at a community meetup ``` 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. ```html City skyline at sunset ``` 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. ```html Portrait of a chef smiling ``` 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. ```html

Spring Collection

Fresh styles for work and weekends.

Model wearing a light jacket in an outdoor setting
``` 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:** ```html Notebook, pen, and coffee on a desk ``` 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. ## Browser Support | Feature | Status | Chrome | Edge | Firefox | Safari | Safari iOS | | --- | --- | --- | --- | --- | --- | --- | | `` | Widely available since Sep 2018 | 38+ | 13+ | 38+ | 9.1+ | 9.3+ | Data: web-features 3.43.0 (MDN Baseline).