The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Choose image candidates from the space the image actually occupies, not from a list of phone, tablet, and desktop widths. Measure the image’s rendered CSS slot at each layout state, create files that cover those slot widths, list their truthful intrinsic widths in srcset, and describe the slot with sizes. The browser then combines that information with pixel density, zoom, viewport interpretation, and network conditions to choose a resource. CSS still controls the displayed dimensions.
This approach works for fluid cards, full-bleed heroes, fixed-size icons, and art-directed crops. The examples below show how to derive values from your own layout rather than copying universal breakpoints.
Start with the rendered slot, not the device
An image’s “right size” is the width it will occupy in the layout, multiplied by the detail you need at the visitor’s display density. A 390-pixel-wide phone viewport might contain a full-width image, a 350-pixel content column, or a 180-pixel card. A wide monitor can show the same 350-pixel column. Device labels alone cannot describe that slot.
Inventory the layout states
- Inspect the CSS and design at representative viewport widths.
- Record the image slot in each state: full viewport width, a centered container width, or a grid fraction.
- Include container maximum widths, column gaps, padding, and any full-bleed escape from the container.
- Note whether the image’s CSS width is fluid, fixed, or capped with
max-width.
For a two-column grid, estimate one card’s width from the actual container and gap. Do not use 100vw unless the image really spans the viewport.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors#1 Best Overall
Keep CSS in charge of display size
sizes is a source-selection hint; it does not set the element’s rendered width. Use CSS such as width:100%, grid sizing, or an explicit width to lay out the image. Add intrinsic width and height attributes (or an equivalent aspect-ratio rule) to reserve space and reduce layout shifts.
How srcset and sizes work together
For a fluid image, use width descriptors. Each w value must be the real pixel width of that file, not a CSS width or a viewport breakpoint. The sizes list tells the browser how wide the slot is under each matching condition. The browser can then choose a candidate appropriate for the slot and display density.
<img
src="story-960.jpg"
srcset="story-480.jpg 480w, story-960.jpg 960w, story-1440.jpg 1440w"
sizes="(width <= 600px) 100vw, (width <= 1100px) 80vw, 960px"
width="1440"
height="900"
alt="Describe the meaningful image content"
>The first matching sizes condition wins, so put the most specific conditions first and always provide a final default length. The numbers above are illustrative. Replace them with widths measured from your CSS and files you actually generate.
What a source-size expression means
100vwmeans the slot is the viewport width.80vwmeans the slot is approximately 80% of the viewport at that layout state.960pxis an absolute maximum slot width.- Percentages such as
50%are not valid source-size lengths; express the equivalent using viewport units or an absolute length.
A condition in sizes describes the image slot, not merely the breakpoint at which your CSS changes. Verify the expression against padding, gaps, max-widths, and nested grids.
Choose the right responsive-image mechanism
| Situation | Use | Describe |
|---|---|---|
| Same image, fluid rendered width | srcset with w descriptors plus sizes |
True pixel widths of candidates and the slot width at each layout condition |
| Same image, fixed CSS display size with alternate densities | srcset with x descriptors |
Resolution variants for the fixed presentation |
| Different crop or different subject framing | <picture> with conditional <source> elements |
Which art-directed source applies in each context |
| Lazy-loaded image where laid-out width can be used | sizes="auto" where supported, with a fallback |
The concrete laid-out width and a useful fallback source size |
Use width descriptors for fluid layouts
If the CSS width changes, width descriptors communicate the candidate’s intrinsic dimensions directly. Provide a small, intentional set that spans the smallest and largest useful slots. There is no universal interval or breakpoint set: derive candidates from your design and source assets.
Use density descriptors for fixed-size images
For an icon or logo that is always displayed at a fixed CSS size, density descriptors are clearer:
<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" width="160" height="40" alt="Company name">Do not use this pattern as a substitute for sizes when the CSS width is fluid.
Use <picture> for art direction
If a portrait crop is needed on narrow screens and a wide composition on larger screens, use conditional sources. Resolution switching alone cannot change the composition:
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match<picture>
<source media="(max-width: 600px)" srcset="hero-square-600.jpg 600w, hero-square-900.jpg 900w" sizes="100vw">
<img src="hero-wide-1200.jpg" srcset="hero-wide-800.jpg 800w, hero-wide-1200.jpg 1200w" sizes="(max-width: 1100px) 90vw, 1200px" width="1200" height="600" alt="People collaborating at a table">
</picture>Each source should represent the same semantic image while allowing a deliberate crop or alternate asset for that context.
Build candidates from real assets
- Measure the maximum slot. If the content container is capped at 1,200 CSS pixels and the image fills it, a 1,200-pixel candidate is a useful upper bound.
- Measure smaller states. Record the actual card or column widths at narrow and medium layouts.
- Generate files at those intrinsic widths. Preserve aspect ratio and use an appropriate format; do not label a 900-pixel file as 960w.
- Add a safety margin where needed. A high-density display may need a candidate wider than the CSS slot. The browser will decide whether downloading it is worthwhile.
- Keep a fallback. The
srcattribute is used by browsers that do not process the responsive set.
Automated image services can generate and deliver these variants, but they are optional. Your existing build pipeline, CDN, or image processor may be sufficient.
Write accurate sizes for common layouts
Full-bleed image
<img srcset="banner-640.jpg 640w, banner-1280.jpg 1280w, banner-1920.jpg 1920w"
sizes="100vw" ...>Use this only when the image truly reaches both viewport edges.
Centered content column
<img srcset="article-640.jpg 640w, article-960.jpg 960w, article-1280.jpg 1280w"
sizes="(width <= 700px) calc(100vw - 32px), (width <= 1200px) 80vw, 960px" ...>The subtraction accounts for 16-pixel side padding in the narrow state. Replace it with your page’s real spacing.
Two-column card grid
If a container is 1,200px wide with a 24px gap, each of two equal cards is about (1200 - 24) / 2 = 588px. Your source hint might therefore resemble:
sizes="(width <= 700px) calc(100vw - 32px), (width <= 1200px) calc((100vw - 24px) / 2), 588px"Confirm the calculation against container padding and any minimum card width. A wrong hint can make the browser fetch an unnecessarily large or insufficient candidate.
Lazy-loaded images and auto
sizes="auto" can let supporting browsers use the concrete laid-out width for a lazy-loaded image. Preserve a useful fallback source size after auto, and verify behavior for the browsers your audience supports. Do not assume every browser resolves auto identically.
Make mobile viewport interpretation correct
Include the standard mobile viewport declaration:
<meta name="viewport" content="width=device-width, initial-scale=1">Without it, some mobile browsers use a wider layout viewport and scale the page down. That can make responsive-image selection interpret the viewport differently from your CSS. Desktop testing can also appear surprising when browser zoom or an emulated viewport differs from the page’s actual viewport.
Validate what the browser actually selected
- Open the page at representative narrow, medium, and wide viewport widths.
- Repeat at more than one device-pixel ratio when possible.
- In browser developer tools, inspect the image element and Network panel to see the requested resource and its intrinsic dimensions.
- Compare the selected file with the measured slot and the image’s visual quality.
- Test zoom and a throttled connection; selection can change because the browser considers more than viewport width.
These checks validate your layout and hints. They do not guarantee that every browser, zoom level, or network condition will fetch the same named candidate. Selection remains browser-controlled.
Common mistakes and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| The browser downloads the largest file on a small screen | sizes is missing or says 100vw for a narrow column |
Describe the real column or card slot and put matching conditions first |
| The image looks soft on a dense display | No sufficiently wide candidate, or a file is mislabeled | Generate a larger intrinsic-width candidate and ensure each w value is truthful |
| Images are displayed at the wrong width | Expecting sizes to control CSS layout |
Fix the CSS width, grid, container, or aspect-ratio rule |
| The crop is wrong on mobile | Using resolution switching for an art-direction problem | Use <picture> and conditional sources |
| Unexpected choices during desktop testing | Browser zoom or an emulated viewport differs from the actual viewport | Check the reported viewport, zoom, device pixel ratio, and selected resource |
| Layout jumps while images load | No intrinsic dimensions reserved space | Provide accurate width/height or an equivalent CSS aspect ratio |
auto behaves inconsistently |
Target browser does not support the needed lazy-loading behavior | Supply the fallback source size and test your supported browser set |
Or skip the browser setup
If you need rendered screenshots to check responsive states, ScreenshotNeo can capture the page with one request. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing result. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
See the parameter details in the ScreenshotNeo documentation. Replace the URL in these runnable examples with your page:
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Sign up for the free plan.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Frequently asked questions
Can I use only srcset without sizes?
You can, but for width descriptors the browser then has less accurate information about the slot and may choose poorly. Add sizes whenever the rendered width is fluid.
Should every image have a 2× file?
No. A 2× variant is useful for a fixed CSS size or where a larger slot and display density justify it. Let the browser choose from truthful width candidates for fluid images.
Does a larger candidate always look better?
Not necessarily. It may improve detail but costs bytes. Candidate widths should cover real slots and quality requirements; the browser balances them with density, zoom, viewport, and other factors.
Frequently Asked Questions
Do viewport breakpoints determine responsive image sizes?
No. Breakpoints only help describe when the layout changes. The value in sizes must estimate the image’s actual CSS slot after containers, padding, and columns are applied.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →When should I choose WebP or JPEG?
Choose formats according to your content, browser support, and image pipeline. Format choice does not replace accurate intrinsic widths, srcset, or sizes.
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.
