Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated 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 matchiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use srcset to give the browser several real image files and use sizes to describe how wide the image slot is expected to be at each layout condition. CSS still controls the rendered size. The browser combines your candidates, the slot hint, pixel density, zoom, and other conditions to choose a suitable request, so you do not need device-specific JavaScript.
What srcset and sizes actually do
A responsive image implementation has three separate jobs:
- HTML source selection:
srcsetlists files that contain the same image at different resolutions, or density alternatives for a fixed-size image. - Slot communication:
sizestells the browser how wide the image is expected to be in the layout when the candidates use width descriptors. - Visual layout: CSS determines the image’s actual rendered width, height, object-fit behavior, and surrounding layout.
Keeping those jobs separate prevents a common misconception: neither srcset nor sizes resizes an element. They improve the browser’s choice of resource before or while the image is rendered. If CSS displays an image at 640 CSS pixels but the sizes hint says 1000 pixels, the browser can request a larger file than necessary. If the hint says 300 pixels, it can request one that is too small for the slot.
Think of the markup as a menu rather than a command. You publish several usable files, describe the expected slot, and let the user agent select from that menu. The browser may account for device pixel ratio, zoom level, cache state, viewport dimensions, and network or rendering conditions. This is why responsive images can adapt without a script that detects every phone or desktop model.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose the descriptor that matches the image’s job
A single srcset must use one descriptor type. Use width descriptors (w) for fluid images and density descriptors (x) for alternatives intended to occupy the same CSS size.
Width descriptors for fluid images
A width descriptor records the intrinsic pixel width of the referenced file. In photo-800.jpg 800w, 800w means that the file is 800 pixels wide; it does not mean the browser will display it at 800 CSS pixels.
Width candidates are appropriate for article photos, cards, hero images, galleries, and other content whose slot changes with columns or viewport width. Pair them with sizes, because the browser needs an estimate of the slot to compare candidate widths with the device’s pixel density.
Every URL in a width-based list should represent the same subject and intended crop. A build pipeline may produce files named by width, but the descriptor is still a claim about the file’s actual intrinsic width. If an image was resized, recompressed, or accidentally exported at a different dimension, correct the descriptor or regenerate the asset before publishing.
Density descriptors for fixed-size alternatives
Density descriptors describe alternatives such as a 1x and 2x logo that will be displayed at one fixed CSS size:
<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" width="160" height="40" alt="Site logo">Here the CSS slot is intended to remain 160 by 40 CSS pixels, while the 2x file supplies twice the physical pixel density. A density-based list does not use sizes. Do not mix w and x descriptors in one srcset.
Density descriptors are a good fit for a compact icon, logo, or other asset whose layout dimensions are known and stable. They are not a substitute for width candidates on a card that becomes wider or narrower as columns change. If the displayed width varies, the fixed 1x/2x assumption no longer describes the image’s job accurately.
Build a width-based responsive image step by step
The reliable workflow is to start with the layout, then map real files to that layout.
- Establish the CSS layout first. Decide whether the image is full-bleed, constrained to a maximum width, or placed in a column. Record the slot width at the relevant media conditions, including column gaps and horizontal padding.
- Create actual image variants. Export files at useful intrinsic widths, such as 400, 800, and 1200 pixels. The number in each descriptor must match the file’s actual intrinsic width, not a target display width or a filename convention.
- Write the candidate list. Separate each URL and descriptor with a comma. Keep the image content and crop consistent when the only change is resolution.
- Describe the slot with
sizes. Put the narrowest applicable media condition first, followed by a default value. Express the expected slot width in CSS length units such asvworpx. - Retain a useful
src. It is the fallback for browsers that do not support responsive image selection and is also relevant as a 1x candidate in density-based usage. - Test requests in the browser. Use representative viewport widths and pixel densities, then inspect the Network panel and the image’s current request rather than assuming a particular URL must always be selected.
Complete example
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
width="1200"
height="800"
alt="A description of the photograph">In this example, the sizes expression says the slot is expected to occupy the viewport width up to 600 pixels, and half the viewport above 600 pixels. It is only a selection hint. If the design has a 24-pixel gutter, a 320-pixel maximum column, or another constraint, change the expression to represent that actual slot. The three w values must correspond to the intrinsic widths of their files.
The fallback src should be a sensible image, not an unrelated placeholder. It can be one of the listed files, often a middle-sized candidate, so a browser without responsive-image support still receives the same essential content. Keep its alternative text on the img; that is also the element assistive technology uses inside a picture element.
Write an accurate sizes expression
The browser evaluates the media conditions in sizes from left to right. The first matching condition supplies the slot length; the final length is the default when no earlier condition matches.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
sizes="(max-width: 600px) 100vw, 50vw"Only one length is used for a given evaluation. A media condition such as (max-width: 600px) is followed by the expected slot length, and the final unqualified length acts as the fallback. This ordering matters: place the most specific or narrowest layout state first, then broader states, and finish with a default that matches the widest remaining layout.
Translate CSS rules into lengths
If an image is full-width inside the viewport, 100vw is a reasonable description only when the viewport width is close to the image’s actual slot. A centered column that is 80% wide might be represented by 80vw; a fixed desktop column might use a pixel length. For a two-column layout, the correct value may be approximately half the viewport minus the gap and container padding, not simply 50vw.
Use the same breakpoints that change the layout, not arbitrary device categories. For example, if CSS switches from a one-column card to a two-column card at 720 pixels, make that condition visible in sizes. If the image has a maximum width, include that cap in the final value so wide screens do not imply an endlessly growing slot.
Measure the slot produced by the actual component, including borders, internal padding, gutters, and any parent max-width. A value such as calc(50vw - 24px) can be more faithful than 50vw when a fixed gap is removed from a two-column row. The exact expression is design-specific; there is no universal breakpoint recipe.
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 →Why an inaccurate hint matters
With a value that is too large, the browser may download a larger candidate than the layout needs. With a value that is too small, it may select a file that has to be enlarged, reducing detail. The browser can still account for pixel density and other information, but it cannot infer your intended column width when the hint contradicts the layout.
Because sizes is a hint, a small rounding difference is not automatically a bug. A materially wrong branch is the problem: for example, reporting the full viewport for an image that occupies a narrow sidebar. Revisit the hint whenever a component gains a column, changes its gutter, or receives a new maximum width.
Keep CSS responsible for rendering
Use CSS to make the element fit its container:
.article-image {
display: block;
width: 100%;
height: auto;
}The HTML width and height attributes describe the image’s intrinsic dimensions and aspect ratio. They do not force the rendered element to remain at those pixel dimensions. A common pattern is to provide the source image’s dimensions in HTML and then allow CSS to make it fluid. Supplying both attributes lets the browser reserve the correct aspect-ratio space while the image loads, reducing layout movement.
If the design intentionally crops images, set the desired CSS dimensions and use an appropriate object-fit rule. Do not try to express a crop through sizes; that attribute communicates slot width, not composition.
Responsive source selection and responsive layout therefore work together but remain independent. You can make an image 100% wide in CSS while serving a 400-pixel file in a small card, or constrain it to a 1200-pixel maximum while offering larger candidates for high-density screens. Changing CSS without updating sizes can make the source choice stale even though the layout still looks correct.
Understand what the browser selects
Candidate selection is a hint-driven process, not a rigid breakpoint switch that authors can control exactly. The user agent considers the slot estimate, device pixel ratio, zoom, viewport, and potentially network or rendering conditions. Two otherwise similar devices can therefore request different valid candidates.
Describe your markup as offering suitable alternatives rather than promising that a 600-pixel viewport always downloads a particular filename. A browser may choose the nearest candidate, prefer a slightly smaller resource, or retain a cached resource. The goal is an appropriate image for the current conditions, not a deterministic URL matrix.
This discretion is intentional. It lets the browser balance sharpness, transfer cost, cache reuse, and current conditions. Do not force a JavaScript breakpoint switch just to obtain a filename you predicted. First determine whether the selected resource is actually too small or unnecessarily large for the measured slot and density.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Use picture for art direction or formats
img with srcset and sizes is the direct pattern when the image content and crop stay the same and only resolution changes. Use picture when the browser must choose a different composition, crop, or source format.
<picture>
<source media="(max-width: 600px)" srcset="portrait-crop.jpg">
<source type="image/avif" srcset="photo.avif">
<img src="photo.jpg" alt="A description of the photograph" width="1200" height="800">
</picture>Each source can provide conditions or formats, while the nested img remains the fallback and the element that receives the alternative text. If you also need resolution variants for a selected source, its srcset can contain them, with a matching sizes value where width descriptors are used.
Use art direction when the subject’s framing must change, such as a wide landscape crop on desktop and a portrait crop on a phone. Use format selection when the same composition is available as formats such as AVIF or another supported encoding. A width-only list cannot change the focal point or encoding format; it only offers resolution alternatives for the same image.
Make the page mobile-aware before testing
Include a viewport meta element so mobile browsers use the expected CSS viewport:
Recommended Free Tools
<meta name="viewport" content="width=device-width, initial-scale=1">Without it, a phone can lay out the page against a wider virtual viewport, making both the CSS slot and the selected candidate appear wrong during testing.
Test a responsive image systematically
- Verify the files. Open every candidate or inspect its metadata and confirm that its intrinsic width equals the descriptor, such as an actual 800-pixel-wide file paired with
800w. - Check the rendered slot. Use browser developer tools to measure the image’s CSS width at each layout condition. Account for container padding, gutters, borders, and maximum widths.
- Check the hint. Compare that measurement with the matching
sizesbranch. A full viewport hint is wrong when the image occupies only a constrained column. - Inspect the request. In the Network panel, filter for the image and record the selected URL, response dimensions, viewport width, zoom, and emulated device pixel ratio.
- Repeat at representative conditions. Test narrow and wide viewports, standard and high-density displays, and the breakpoints where the layout changes.
- Allow for browser discretion. Treat any valid candidate choice as possible. Investigate whether it is actually unsuitable before changing markup merely because it differs from your expectation.
Clear or disable the cache when comparing fresh requests, and distinguish a cached response from a new selection. Test the real page with its viewport metadata, not only a resized desktop window. Record the measured CSS slot as well as the selected URL; the URL alone does not tell you whether the hint is accurate.
Troubleshoot the most common failures
The browser always downloads the largest file
- Confirm that the
srcsetuses width descriptors and thatsizesis present. - Check whether
sizesoverstates the slot, for example by using100vwfor an image inside a narrow column. - Verify that the page has the viewport meta element and that you are testing the intended viewport rather than a zoomed desktop view.
- Check the Network panel for caching; a previously fetched resource can obscure a new selection.
- Make sure the CSS is not temporarily forcing a wider slot than the production component, such as a development rule that removes a max-width.
The image looks soft on a high-density display
- Confirm that a sufficiently large candidate exists for the slot multiplied by the device pixel ratio.
- Make sure each descriptor matches the file’s real intrinsic width; an incorrectly labeled file can make the browser believe a larger option is available when it is not.
- Check whether CSS enlarges the image beyond the slot described by
sizes. - Check the source asset itself: aggressive compression or a soft original cannot be fixed by adding another descriptor.
The wrong crop appears
Width candidates are not an art-direction mechanism. If mobile and desktop need different focal points or aspect ratios, use picture and media-specific source elements.
The layout shifts while the image loads
Provide accurate width and height attributes that represent the source aspect ratio, then use CSS for the fluid width. For intentionally cropped components, reserve the component’s designed aspect ratio with CSS and apply the crop with object-fit.
Free tools Windows power users keep installed
One-click scans. No signup required.
The markup becomes difficult to maintain
Generating many variants by hand increases the chance of stale dimensions, missing files, and mismatched descriptors. A predictable image build process or image CDN/transformation service can create and name variants consistently. Such a service is optional, not a requirement for using responsive images; teams should weigh its operational and delivery cost against the number of assets and transformations they manage.
Best Value
Compare the available implementation patterns
| Requirement | Recommended markup | Needs sizes? |
What changes between candidates |
|---|---|---|---|
| Fluid image, same content and crop | img with width-descriptor srcset |
Yes | Resolution and intrinsic width |
| Fixed-size logo or icon with a high-density version | img with density-descriptor srcset |
No | Pixel density |
| Different mobile and desktop crop | picture with media-specific source elements |
Only when a selected source uses width descriptors | Composition, crop, and possibly resolution |
| Alternative image formats | picture with type-specific source elements and an img fallback |
Depends on the source lists | Encoding format and, optionally, resolution |
When comparing implementations, ask five questions: Is the slot fixed or fluid? Do candidates differ only in resolution, or also in crop and format? Does sizes mirror the CSS slot? Do descriptor values match real files? And is browser selection being treated as a flexible choice rather than a guaranteed breakpoint mapping? Those questions usually identify the right element before you optimize the syntax.
Accessibility and maintainability checks
- Write meaningful
alttext for informative images. Use an emptyaltattribute for purely decorative images so assistive technology can skip them. - Keep every candidate’s subject and crop consistent when using width descriptors; otherwise users may see a content change that was not intended.
- Store candidate files and their intrinsic dimensions in a predictable naming or build process, but verify the dimensions rather than trusting filenames.
- Update
sizeswhenever a CSS component changes columns, gutters, or maximum width. Stale hints can silently increase downloads or reduce image quality. - Retain a sensible
srcfallback and ensure the fallback has the same essential content and accessible description.
Responsive-image markup does not replace normal accessibility practices. Alternative text belongs on the fallback img, decorative images should remain ignorable, and a source change should never remove essential information. Treat the candidate set as interchangeable resolutions only when it really is interchangeable to the reader.
Practical decision checklist
- Does the image’s rendered width vary with the layout? Choose width descriptors and add
sizes. - Is the image displayed at one fixed CSS size with standard- and high-density files? Choose density descriptors and do not add
sizes. - Do you need a different crop, composition, or format? Use
picture. - Do descriptor numbers equal the referenced files’ intrinsic widths? Correct them before testing.
- Does every
sizesbranch match the CSS slot, including padding and columns? Adjust it when the layout changes. - Are intrinsic
widthandheightattributes present, with CSS controlling fluid rendering? Add them to preserve aspect ratio and reduce layout movement. - Have you inspected real requests at the viewport and density settings your users will encounter? Validate the result in developer tools.
- Will a build process or image service keep variants, dimensions, and URLs synchronized as the component evolves? Choose an operational approach that your team can maintain.
Frequently Asked Questions
Can I use both w and x descriptors in one srcset?
No. A candidate list uses one descriptor model. Use w values for fluid, width-varying images and x values for fixed-size density alternatives.
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 errorsDo the HTML width and height attributes prevent a responsive image from shrinking?
No. They describe intrinsic dimensions and aspect ratio. CSS such as width: 100%; height: auto; can still make the image fluid.
Why did the browser choose a different candidate than I expected?
Selection is discretionary. The browser weighs the slot hint, pixel density, zoom, viewport, cache, and other conditions, so a different valid candidate does not automatically indicate an error.
Is sizes required with every srcset?
No. It is needed for width-descriptor candidates so the browser can estimate the rendered slot. A density-descriptor list for a fixed-size image does not use sizes.
Can srcset choose a different crop for mobile?
No. Width candidates are intended to preserve the same content and crop. Use picture with media-specific source elements for art direction.
Why is my image request larger than the CSS width?
The browser also considers pixel density, so a high-density display can need more physical pixels than CSS pixels. Also verify that the matching sizes branch does not overstate the slot and that the browser is not reusing a cached resource.
Do I need an image CDN to use responsive images?
No. You can create and serve ordinary files yourself. A CDN or transformation service is an optional way to automate many variants and their delivery when the maintenance cost of doing so manually becomes significant.
The Bottom Line
Use width-descriptor srcset plus an honest sizes hint for fluid images, density descriptors for fixed-size alternatives, and picture for different crops or formats. Let CSS define the rendered layout, provide intrinsic dimensions to preserve the aspect ratio, and verify real browser requests at the viewport and density conditions you support.
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.
