The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →A responsive image gives the browser a choice of image files so it can use one suited to the page’s layout and the display’s pixel density. For the same image at different resolutions, use img with srcset and, for width-based candidates, sizes. For a different crop or composition, or to offer alternative formats, use picture with one or more source elements and an img fallback.
What makes an image responsive?
A responsive image is not simply an image that CSS shrinks to fit the screen. Instead, the markup provides alternative image resources and information about how the image will appear in the layout. The browser chooses a candidate based on the available options, the expected rendered width, and the display’s pixel density.
This distinction matters because CSS can make an oversized image look small without changing which file was downloaded. With responsive image markup, you can offer a smaller file for a small slot and a larger one when the layout or display calls for it. You can also supply a different crop for a narrow screen or an alternate file format.
There are two separate decisions: how large a version of an image to deliver, and which image composition or format to use. Choose markup for the decision you actually need.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose the right HTML pattern
| Need | Markup | What you decide |
|---|---|---|
| Same image, different file widths | img with width-descriptor srcset and sizes |
The rendered slot width at each layout condition |
| Same image at fixed display dimensions, with density variants | img with density-descriptor srcset, such as 1x and 2x |
Which pixel-density assets to provide |
| Different crop or composition at a layout condition | picture with source media and an img fallback |
When the composition should change |
| Alternative image formats | picture with source type and an img fallback |
Which formats to offer and which image to use as the fallback |
Use img srcset alone when the content stays the same and only resolution varies. Use picture when the browser may need to choose a different image, crop, or format. A picture element does not replace the image itself: it needs an img child for the default image and its alternative text.
Serve different resolutions of the same image
Width descriptors and the sizes attribute
For responsive layouts, width descriptors are a practical way to describe a set of versions of one image. Each candidate’s w descriptor is its intrinsic pixel width, not a CSS display width. The sizes attribute tells the browser the expected width of the image’s layout slot under matching conditions.
<img
src='photo-800.jpg'
srcset='photo-480.jpg 480w, photo-800.jpg 800w, photo-1200.jpg 1200w'
sizes='(width <= 600px) 100vw, 800px'
width='800'
height='533'
alt='A hiker looking across a mountain lake'>In this example, the browser has three candidate files. The condition in sizes says that when the viewport width is at most 600 pixels, the image is expected to occupy the full viewport width (100vw). Otherwise, the expected slot width is 800 pixels. These are layout assumptions, not guarantees about the final rendered width. Change them to match your actual page.
The browser combines the expected slot width with display characteristics to select from the candidates. It controls the final choice, so do not assume it will always download the smallest candidate. The src value supplies a normal image source; provide a valid path and make sure the dimensions describe the actual asset. The width and height attributes here describe the 800-pixel source’s aspect ratio; update them if your source has different dimensions.
Recommended Free Tools
Write sizes for the real layout
A full-width banner, a two-column card, and a narrow article image have different slot widths. If your image sits in a centered content column, using 100vw at every viewport size may overstate its expected width. If a card takes half the available content area on wider screens, account for that in the relevant condition rather than telling the browser it fills the entire viewport.
List conditions in the order you intend them to match. The first matching condition is applied, so a broad condition placed before a narrower one can prevent the narrower case from being used. Check the conditions against the page’s actual layout at narrow, intermediate, and wide viewport widths.
Fixed-size images and density descriptors
If an image has a fixed display size and you have versions intended for different pixel densities, use density descriptors instead. For example, a logo rendered at 160 by 80 CSS pixels can offer a standard-density file and a 2x variant:
Rank #3
<img
src='logo.png'
srcset='logo.png 1x, logo-2x.png 2x'
width='160'
height='80'
alt='Company name'>In this form, 1x and 2x describe density variants, not intrinsic file widths. Do not mix w and x descriptors in a single srcset list. The sizes attribute is for width-descriptor selection; it does not define the selection rule for this density-descriptor list.
Change the crop or offer another format with picture
Art direction: choose a different crop
Sometimes a wide image scaled down on a phone leaves the important subject too small or awkwardly positioned. If you have made a separate crop for the narrow layout, use a source with a media condition and keep the default image in the final img element.
<picture>
<source
media='(width < 600px)'
srcset='portrait-crop.jpg'
type='image/jpeg'>
<img
src='landscape.jpg'
width='1200'
height='800'
alt='A cyclist riding along a coastal road'>
</picture>Here the narrow-screen source is a different crop, while the img provides the default. Choose the condition where the composition should change, and ensure the crops convey the same essential information. Write the alternative text for the image’s meaning in context; changing the crop does not remove the need for useful alt text.
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
Offer an alternative image format
You can also use picture to offer a format alongside a fallback. The browser can skip a source whose declared type it does not support.
<picture>
<source srcset='landscape.webp' type='image/webp'>
<img
src='landscape.jpg'
width='1200'
height='800'
alt='A cyclist riding along a coastal road'>
</picture>This gives the browser a WebP source and leaves the JPEG in the img as the default and fallback. Use real assets and appropriate dimensions in production. If you combine format options with crop-specific sources, make the source order and conditions deliberate so each browser can select an appropriate file. Use media for art direction; do not try to express the same source-selection conditions in both media and sizes.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesBuild and check a responsive-image set
- Decide what changes. If only pixel dimensions vary, prepare multiple resolutions of the same image. If the content or crop changes, prepare alternate compositions. If formats vary, prepare the formats and a fallback.
- Prepare and name the assets clearly. Confirm each URL works and that width descriptors match the actual intrinsic pixel widths of the files. For an art-directed crop, use its own appropriate dimensions rather than treating it as merely a smaller copy.
- Choose the markup. Use
img srcsetfor resolution candidates, addingsizeswith width descriptors. Usepicturewhen source conditions, composition, or format choices are needed. - Match layout assumptions. Compare each
sizescondition with the width the image’s slot actually occupies at that viewport. Make the matching order intentional. - Keep a usable default. Include a valid
srconimg. When usingpicture, keep theimglast, with meaningful alternative text and dimensions appropriate to the image. - Check the result at representative widths. Resize the page or inspect it at narrow and wide viewport sizes. Confirm the crop is appropriate, the image is not missing, and the layout assumptions used in
sizesreflect what the page actually renders.
Performance, reliability, and cost considerations
Responsive markup gives the browser choices; it does not by itself guarantee a particular byte saving or a particular downloaded file. Results depend on the assets you provide, their dimensions and file sizes, your layout, and the browser’s selection. MDN’s tutorial gives one illustrative comparison: its 800-pixel sample image is 128 KB and its 480-pixel sample is 63 KB, a 65 KB difference for those files. That is not a general performance guarantee.
Reliable setups avoid mismatches between the markup and the assets. A file labeled 800w should actually be 800 pixels wide; a missing candidate URL can leave the browser without that option. A sizes value that does not match the layout can lead the browser to choose a candidate based on an inaccurate slot estimate. Keep the fallback path valid and test the exact URLs you publish. There is no special service or purchase required to write responsive-image markup.
For visual checks of your page at different viewport conditions, a screenshot can help reveal a crop or layout problem. ScreenshotNeo is a website screenshot API and MCP server, not a replacement for writing srcset, sizes, or picture markup. Its API can capture a page screenshot; the available viewport and device options let you check the page at different display sizes. See ScreenshotNeo for details.
Or skip the browser setup
If you want a page screenshot without setting up browser automation, ScreenshotNeo accepts a URL in one GET request and can return an image or PDF. The clean-shot options accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and whether the request was billed. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents using Claude, Cursor, or another MCP client.
For a WebP screenshot of a page, use this cURL request; replace the URL with the page you want to inspect. See the ScreenshotNeo documentation for request options.
curl -G 'https://api.screenshotneo.com/v1/shot' -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpThe Free plan includes 1,000 screenshots per month with no card required; paid plans start at $5 for 3,000 screenshots. Start with the free ScreenshotNeo sign-up.
Quick Recap
Troubleshoot common responsive-image problems
- The browser uses a larger file than expected. Check whether the
sizesconditions overstate the slot width, whether the intended condition matches, and whether the larger candidate is appropriate for the display. The browser makes the final selection, so the smallest file is not guaranteed. - The browser seems to ignore a candidate. Confirm the candidate URL loads and that its
wdescriptor matches the asset’s real intrinsic width. Check that the page is using width descriptors with a matchingsizesattribute. - The wrong crop appears. Use
picturewith a deliberatemediacondition for a composition change. Check source order and the condition against the viewport where the crop should switch. - An alternate format does not appear. Confirm the file is valid and that its
typeidentifies the supplied format correctly. Keep a working image in theimgfallback. - The image is broken at some sizes. Check every referenced path, including the fallback, and inspect the page at the conditions that trigger each source. A valid fallback does not compensate for incorrect candidate URLs if the browser chooses one of them.
- The page layout or image dimensions look wrong. Make sure the
widthandheightattributes describe the selected image’s proportions, especially when alternate crops have different aspect ratios. Do not copy sample dimensions without checking your own assets. - The page downloads a file that does not seem to fit the slot. Revisit the slot-width assumptions in
sizes; a 480w candidate means a file with intrinsic width 480 pixels, not an instruction to render it at 480 CSS pixels.
Responsive-image checklist
- Use
srcsetwithwdescriptors when one image has multiple intrinsic widths. - Pair width descriptors with
sizesthat reflects the actual layout. - Use
1xand2xdescriptors for fixed-size density variants, and do not mix them withwdescriptors. - Use
picturefor a different crop or format, with a validimgfallback. - Make sure asset paths, intrinsic widths, dimensions, and alternative text are correct.
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.
