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 →There is no universal pixel width that is right for every website image. Choose source dimensions from the image’s rendered slot at each layout state, then let the browser select an appropriate candidate for the viewport and pixel density. Use srcset and sizes when the composition stays the same, picture when the crop or format must change, and reserve the image’s space so loading does not move the page.
Start with the rendered slot, not a breakpoint chart
Measure the width the image actually occupies in your layout: a single-column article image, a card in a three-column grid, a sidebar thumbnail, and a hero may all have different slots at the same viewport width. Repeat the measurement for the layout states your CSS creates. A desktop slot can even be narrower than a mobile slot when a component changes from one column to several.
For each slot, create several source widths that cover the real range. The familiar 320w, 480w, and 800w values shown in Google examples are instructional markup examples, not a universal standard. Add or remove candidates according to your measured slots and the pixel density you need to support.
Account for pixel density
A browser may need more physical pixels than the CSS width of the slot. A 400 CSS-pixel image on a high-density display can use a source wider than 400 pixels, but downloading a huge desktop original for every phone wastes bytes. Supply candidates around the widths your components really use and let the browser choose.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
An illustrative planning table
| Layout state | What to measure | What to provide |
|---|---|---|
| Narrow single column | The content column’s rendered width, including its mobile side padding | Several files around that width and the higher-density sizes you actually support |
| Wide single column | The maximum article or content-column width | A candidate near the maximum plus intermediate widths for smaller windows |
| Grid or card layout | The width of one card image after gaps and columns are applied | Card-sized candidates; do not assume the full viewport width |
| Fixed or nearly fixed thumbnail | The stable CSS width of the thumbnail | Density variants can be simpler than a long fluid width list |
These are planning categories, not prescribed pixel values. Use your browser’s computed layout and representative content to obtain the slot widths.
Use srcset and sizes for the same image at different resolutions
When the visual content and crop stay the same, use an img with width descriptors. The sizes attribute tells the browser how wide the image will be in the current layout; the browser combines that hint with the candidate list and its own device context.
<img
src="/images/article-800.jpg"
srcset="
/images/article-320.jpg 320w,
/images/article-640.jpg 640w,
/images/article-960.jpg 960w,
/images/article-1280.jpg 1280w"
sizes="(max-width: 700px) 100vw, (max-width: 1100px) 75vw, 800px"
width="1280"
height="720"
alt="A laptop displaying the product dashboard">The first matching condition in sizes wins. Make the conditions describe your actual CSS: if the image is full-width below 700 pixels, use 100vw; if it occupies three quarters of the viewport in the next state, say so; otherwise give the maximum slot width. A wrong estimate can cause an unnecessarily large download or a visibly soft image.
Keep a valid src fallback even when you use srcset or picture. Google Search Central says standard img elements are how it discovers images; a meaningful image placed only in a CSS background is not an equivalent fallback for search.
Choose width descriptors or density descriptors deliberately
| Situation | Preferred markup | Reason |
|---|---|---|
| Fluid slot whose CSS width changes | srcset with w descriptors plus sizes |
The browser can match a candidate to the estimated rendered width. |
| Effectively fixed displayed size | srcset with 1x, 2x (and, if needed, higher density descriptors) |
The choices represent pixel-density variants of a stable slot. |
| Different crop or composition by viewport | picture with media-conditioned source elements |
You control art direction instead of merely changing resolution. |
| Different encoded formats | picture with source type and an img fallback |
The browser can select a supported format while retaining a fallback. |
Use picture for art direction and format selection
If a wide desktop composition would leave the subject tiny on a phone, prepare a deliberate narrow crop. That is art direction, not resolution switching.
<picture>
<source media="(max-width: 700px)" srcset="/images/team-tight-640.jpg 640w, /images/team-tight-960.jpg 960w" sizes="100vw">
<source media="(min-width: 701px)" srcset="/images/team-wide-960.jpg 960w, /images/team-wide-1440.jpg 1440w" sizes="80vw">
<img src="/images/team-wide-960.jpg" width="1440" height="810" alt="The support team in the office">
</picture>You can also offer an alternate format with type, followed by a normal img fallback. The fallback remains important for browsers that do not select a supplied source.
Rank #3
Make every image flexible and reserve its space
A safe baseline prevents overflow and distortion:
img {
max-inline-size: 100%;
block-size: auto;
display: block;
}Set the HTML width and height attributes to the intrinsic dimensions of the selected fallback (or otherwise provide the correct aspect ratio). CSS can scale the rendered result, while the attributes let the browser allocate space before the file arrives and reduce layout movement.
If the design intentionally crops into a fixed-ratio frame, make that treatment explicit rather than stretching the source:
.card-media {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.card-media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}Use source imagery composed for that crop and adjust object-position when the subject needs a different focal point.
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
Loading strategy: defer what is below the fold, protect what is visible
Use loading="lazy" for images that are genuinely below the initial viewport. Do not blanket-lazy-load the main heading image or another immediately visible, likely largest image; delaying it can hurt the initial experience.
<img src="/images/related-640.jpg" width="640" height="360" loading="eager" alt="Related article illustration">fetchpriority="high" and preload are targeted hints, not defaults. Giving one image higher priority can lower priority for scripts or fonts, and indiscriminate preloads compete with other critical resources. Reserve them for an image that is truly vital to the first view and verify the result in performance tooling.
Reduce bytes without chasing a magic file-size limit
- Do not send a source substantially wider than the largest slot that can use it.
- Choose an appropriate image format and compression level, then inspect the visual result at the rendered size.
- Generate candidates from the actual component widths rather than exporting every image at arbitrary breakpoints.
- Keep intrinsic dimensions and aspect ratios consistent so the browser can reserve accurate space.
- Measure page weight and loading behavior on representative pages; image contribution varies by page and asset.
Google describes images as often the largest contributor to a page’s overall bytes, but there is no current universal image-byte budget established here. A figure sometimes quoted as “more than 60%” comes from a web.dev article published in 2014; treat it as historical context, not a current average.
Implement and verify a responsive image workflow
- Inspect the layout. In browser DevTools, select the image at each target viewport and record its rendered CSS width and aspect ratio.
- Define candidates. Export a small, useful set around those widths and include a valid fallback file.
- Write the hint. Use width descriptors and a
sizesexpression that matches your CSS, or use density descriptors for a fixed slot. - Separate art direction. Switch to
picturewhen the crop, composition, or format needs explicit source control. - Reserve space. Add intrinsic
widthandheight(or an equivalent aspect-ratio treatment) and apply the flexible CSS baseline. - Set loading hints. Lazy-load below-the-fold images and leave the immediately important image eligible to load promptly.
- Test the network result. Check which candidate was fetched at narrow, wide, and high-density settings, and confirm that the selected file is neither needlessly large nor too small.
Or skip the browser setup:
To inspect how a page renders at different viewport settings, you can request a screenshot from ScreenshotNeo instead of maintaining a local browser capture script. It accepts a URL and returns a PNG, JPEG, WebP, or PDF. Before capture it accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers.
Here is a one-request cURL example; see the ScreenshotNeo API documentation for options such as viewport, device preset, full-page capture, waiting for a selector or network idle, custom CSS and JavaScript, and PDF settings.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe same request in Python:
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)And in 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}`);ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Other plans are Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000; yearly billing gives two months free, and every feature is on every plan. Create a free ScreenshotNeo account to test your responsive layouts.
Troubleshoot common responsive-image failures
| Symptom | Likely cause | Fix |
|---|---|---|
| The phone downloads the largest desktop file | sizes is missing or overstates the slot |
Describe the real mobile slot first and verify that the first matching condition is correct. |
| The image looks soft on a high-density screen | No suitable higher-resolution candidate exists, or the slot estimate is too small | Add a candidate appropriate for the actual density and correct the sizes estimate. |
| The subject is cut off on mobile | Resolution switching was used where the composition needs a crop change | Use picture with a mobile-specific source and deliberate art direction. |
| Text jumps when images arrive | No intrinsic dimensions or aspect-ratio reservation | Set accurate width and height attributes or reserve the ratio in CSS. |
| A key image appears late | It was lazy-loaded or competed with too many preloads | Remove lazy loading from the immediate image and use priority hints only after checking the critical-resource trade-off. |
| Search does not find an editorial image | The image exists only as a CSS background | Use a normal img element with a meaningful src and accessible alt text. |
| Different browsers show different formats | No fallback or unsupported type declaration |
Keep a working img fallback after the source elements. |
How to choose the right pattern
- Same content, fluid width: width-descriptor
srcsetplus an accuratesizeslist. - Same content, fixed display size: density descriptors can be clearer.
- Different crop or composition:
picturewith media conditions. - Format negotiation:
picturewithtypeand a fallbackimg. - Any meaningful image: retain a standard
img, reserve its space, and verify loading priority.
Frequently Asked Questions
Can one image candidate list be reused by several components?
Yes, when the components use the same composition and their real slot widths are covered. Keep each component’s sizes value accurate; sharing files does not mean sharing an incorrect slot hint.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Should I keep the original full-resolution file online?
Keep an uncropped source in your authoring or asset pipeline, but expose only the responsive candidates the page can use. The browser cannot benefit from an oversized original that is never an appropriate slot choice.
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.
