The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Use <picture> when an image needs a different crop or format for different conditions; use <img srcset> with sizes when the composition stays the same and the browser should choose an appropriate resolution. In either case, keep an <img> with useful alternative text and dimensions as the semantic image and fallback.
Choose between <picture> and <img srcset>
The choice depends on what changes between image candidates:
As an Amazon Associate I earn from qualifying purchases.
- Different composition or crop: use
<picture>with media-conditioned<source>elements. This is art direction. - Same composition, different pixel dimensions: put width candidates in
srcseton an<img>, and usesizesto describe the image’s rendered slot. - Different file formats: use
<picture>to offer format alternatives, with the ordinary image in the<img>as fallback.
MDN describes <picture> as containing zero or more <source> elements and one <img> to offer alternatives for different display or device scenarios: MDN’s picture element reference.
Use srcset and sizes for resolution switching
When the image itself does not change, provide multiple widths. The browser uses the width candidates and the expected rendered slot in sizes to select an appropriate source.
#1 Best Overall
<img
src="landscape-800.jpg"
srcset="landscape-480.jpg 480w,
landscape-800.jpg 800w,
landscape-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw,
800px"
width="1200"
height="800"
alt="A kayaker crossing a lake at sunrise">The 800px value and 600px breakpoint are illustrative. Replace them with the slot sizes and breakpoints your actual CSS layout uses. With w descriptors, sizes describes the expected rendered width, not the physical width of an image file. Use media-conditioned slot widths followed by an unconditional final size.
When density descriptors are simpler
For an image rendered at fixed dimensions where the candidates differ only by display density, srcset can use density descriptors such as 2x. Do not mix w and x descriptors in one candidate list. Density candidates do not use sizes as a selection control.
Use picture for art direction
When a narrow layout needs a different crop or composition—not merely a smaller copy of the same image—put the specific media condition in a <source> and retain the default image in the final <img>.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<picture>
<source
media="(max-width: 600px)"
srcset="portrait-crop.jpg">
<img
src="wide-landscape.jpg"
width="1200"
height="800"
alt="A kayaker crossing a lake at sunrise">
</picture>Put the more specific intended conditions before broader alternatives. The browser examines sources and uses the first suitable one; if none is usable, it displays the <img> source. Write the alt text for the image’s meaning and purpose, not to explain how the source changes at a breakpoint.
Offer modern formats with a fallback
When the image content and crop are the same but you have encoded alternatives, offer them in preference order and put a broadly usable fallback in <img>.
<picture>
<source srcset="scene.avif" type="image/avif">
<source srcset="scene.webp" type="image/webp">
<img src="scene.jpg" width="1200" height="800" alt="A kayaker crossing a lake at sunrise">
</picture>A browser skips a source when it does not support its declared type, then considers later sources and ultimately the <img> fallback. Ensure that each file is actually encoded in the format declared and that the server returns the correct MIME type. Browser and deployment support can vary; the fallback is part of the pattern, not an assumption that every environment supports every format.
Rank #3
Keep the image accessible and prevent layout shifts
- Keep the
<img>inside<picture>; it is required and carries the alternative text and dimensions. - Give informative images concise, meaningful
alttext. If an image is purely decorative, use an emptyaltvalue rather than describing visual details that add no information. - Set intrinsic
widthandheighton the<img>where appropriate so the browser can reserve space while the image loads. - Use a source’s
mediacondition for a genuine composition change. If only resolution changes,srcsetandsizeson the image express that job directly.
Check candidate sizing against the real layout
- Inspect the CSS layout at its actual breakpoints and determine how wide the image slot is at each one.
- Write
sizesto describe those rendered slot widths, including a final unconditional size. For example, if an image fills the viewport only on small screens but occupies half the content column on wider screens, do not claim it fills the full viewport at every width. - Check the intrinsic dimensions and actual encoding of each candidate, then test the media conditions at the layout breakpoints where they are intended to apply.
- Verify that the image loads as expected, the fallback works, and its alternative text is appropriate.
A misleading sizes value can cause the browser to select a larger file than the layout needs. Appropriate candidate selection can reduce unnecessary image transfer, but the actual effect depends on the assets, layout, network, and browser; no fixed speed or file-size improvement applies universally.
Troubleshoot common responsive-image mistakes
The browser downloads a larger image than expected
Check whether sizes describes the actual rendered slot rather than the viewport or the source file’s dimensions. Update its media conditions to match the CSS layout.
The mobile crop never appears
Confirm that the <source> has the intended media condition, that it precedes the fallback <img>, and that its file is available. Use art direction only where the composition should change.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
A format alternative is skipped
Check the declared type against the file’s actual encoding and the server’s MIME type. Keep subsequent alternatives and the <img> fallback in place.
The markup has no working fallback
Include one <img> as the final child of each <picture>. It supplies the fallback source, dimensions, and alternative text.
Free tools Windows power users keep installed
One-click scans. No signup required.
The srcset list behaves unpredictably
Use either width descriptors such as 480w or density descriptors such as 2x within a given srcset list, not both. Use sizes with width descriptors when the rendered slot varies.
Or skip the browser setup
If you need a screenshot of how a page renders rather than responsive-image markup for your site, ScreenshotNeo is a website screenshot API and MCP server. A single GET request captures a URL as an image or PDF; use this cURL example to save a WebP screenshot:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; these steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for free.
Frequently Asked Questions
Should every responsive image use a picture element?
No. Use <img srcset> for the same composition at different resolutions; reserve <picture> for art direction or format alternatives.
Does sizes set the displayed width of an image?
No. It tells the browser the expected rendered slot width for width-descriptor candidates; CSS determines the rendered layout.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
