You serve the same 2400 px image to a 390 px phone and a 4K monitor. The browser scales it, but the user has already paid the full weight in data and time. The srcset and sizes attributes let you offer several resolutions and pick the right one for the actual slot width on screen, without duplicate designs or sacrificing desktop quality.
In October 2026, with more mobile traffic than ever and metrics like LCP and CLS at the heart of technical SEO, mastering srcset is no longer optional on business sites with product, team or facility photography. Here is how they work, how to combine them with modern formats, and which mistakes to avoid on your next release.
What srcset is and what problem it solves
srcset is an attribute on <img> (and on <source> inside <picture>) that lists several URLs of the same image at different widths or pixel densities. The browser picks one based on the viewport and device density (w descriptors) or on x (1x, 2x, 3x).
On a typical corporate site, the hero photo may span 100 % width on mobile but only 50 % on desktop in a two-column grid. Without srcset, everyone downloads the same large file. With a well-tuned srcset, mobile might get an 800 px JPEG and desktop a 1600 px one, saving hundreds of kilobytes per visit.
The role of sizes: telling the browser how wide the image will be
sizes complements srcset. It states, before layout is complete, how wide the image will be at different breakpoints. The browser uses that estimate to choose the most efficient srcset candidate.
A common homepage example:
sizes="(max-width: 768px) 100vw, 50vw"
That means: up to 768 px wide screens the image uses the full viewport width; above that, half. If your CSS does something else (e.g. 33 % on desktop), sizes must match or you will pick a file that is too large or too small.
Practical rule: sizes must match real CSS, not a generic value copied from a tutorial.
Performance, LCP and mobile data
srcset does not replace solid compression or WebP or AVIF, but it multiplies the effect: fewer bytes on the resource that is often the LCP on visual landings.
Combine it with:
- width and height in HTML to reserve space and avoid CLS.
- fetchpriority="high" only on the above-the-fold LCP variant (fetchpriority).
- loading="lazy" on below-the-fold images (lazy loading), never on the LCP hero.
- CDN when you serve many variants from the same origin (CDN).
srcset with w versus x (DPR) descriptors
w (width) descriptors: best when image size in CSS changes by breakpoint. You need sizes.
x (1x, 2x, 3x) descriptors: useful for icons or fixed-pixel images (retina logos). sizes is not required.
For responsive company banners you will usually use 480w, 800w, 1200w, 1600w with sizes that match the layout. For blog thumbnails fixed at 400 px in CSS, a 400w/800w srcset with sizes="400px" may be enough.
picture, art direction and alternate formats
When crop—not just scale—changes between mobile portrait and desktop landscape, use <picture> with several <source media="..."> elements and a fallback <img>. That is art direction: a different composition, not only scaling.
You can also serve AVIF/WebP with JPEG fallback:
<source type="image/avif" srcset="..."><source type="image/webp" srcset="..."><img src="fallback.jpg" srcset="..." sizes="..." alt="...">
Order matters: the browser uses the first format it understands.
Practical cases on business websites
Services hero. Three or four widths (768, 1200, 1600, 2000) and sizes reflecting full width on mobile and a column on desktop. Single img fallback with fetchpriority high.
Product or catalog pages. 300 px thumbnail in listings: srcset 300w/600w, sizes="(max-width: 576px) 50vw, 300px". Larger widths on the detail view.
Blog and news. Featured image in the article: sizes="(max-width: 768px) 100vw, 720px" when the content container max-width is ~720–800 px.
Team and testimonials. Portraits in a grid: do not upload only 4000 px; generate variants and let srcset distribute them.
Step-by-step implementation
- Define in design the maximum image width at each breakpoint (aligned with your responsive design).
- Export or generate variants (manual, build script or dynamic image service).
- Write sizes with media queries that match your CSS.
- Build srcset with the real width of each file (the w number must be intrinsic width).
- Add descriptive alt, default width/height, and test in DevTools → Network with 4G throttling.
- Measure LCP before and after in PageSpeed Insights and in the field if you have CrUX.
Minimal example:
<img src="/img/hero-1200.jpg" srcset="/img/hero-480.jpg 480w, /img/hero-800.jpg 800w, /img/hero-1200.jpg 1200w, /img/hero-1600.jpg 1600w" sizes="(max-width: 768px) 100vw, 50vw" alt="Consulting team in office" width="1200" height="675" fetchpriority="high" decoding="async">
Common srcset and sizes mistakes
- sizes="100vw" everywhere when the image only uses 40 % of the layout on desktop → unnecessarily large downloads.
- w values that do not match the real file (labeling 1200w on an 800 px JPEG) → wrong browser choice.
- Forgetting sizes with w descriptors → the browser assumes 100vw and often hurts mobile.
- Too many variants without CDN or cache → more files to maintain with little gain; 3–5 widths are usually enough.
- Lazy on the LCP image with a complex srcset → delays the main paint.
- Trusting CMS “responsive” alone without checking generated HTML → sometimes only one URL is resized on the server.
Tools and checks (2026)
In Chrome DevTools, disable cache, emulate mobile, and compare the downloaded file in Network with the element width in Layout. PageSpeed Insights flags “oversized” images when the file exceeds displayed size.
On WordPress, optimization plugins may auto-generate srcset from registered sizes; on custom stacks (Laravel, headless), automate at build time or with an image service. What matters is correct final HTML, not only files on disk.
Checklist before shipping changes
- sizes aligned with CSS on mobile, tablet and desktop.
- 3–5 reasonable widths; WebP/AVIF when possible.
- width/height on the default variant for CLS.
- No lazy loading on the LCP image; fetchpriority high when applicable.
- Test on 4G and on a retina screen (2x DPR).
- Unique, descriptive alt on each product or team image.
Conclusion
srcset and sizes are the standard way to align image weight and visual quality on every device. On business sites with strong brand photography, used well they shave perceived load time and improve LCP without changing the design you already have.
If you want to audit which images on your homepage or catalog are oversized and how to generate variants without duplicating editorial work, at aatsoft we review HTML, CMS and media pipelines with a focus on performance and conversion.
