Images are often the largest visual resources on a page, yet image optimization is more than converting every file to a modern format. A phone should not download a desktop-sized photograph only to display it in a narrow card. The browser also needs enough information to reserve space before the bytes arrive, and it needs a useful text alternative when the image carries meaning.
This guide connects srcset, sizes, picture, intrinsic dimensions, lazy loading and fetch priority. The goal is not the smallest possible file at any cost. It is the right visual resource, at an appropriate quality, delivered at the right time without causing layout shift. See the Core Web Vitals guide for the LCP and CLS context.
Start with the rendered slot
An image file may be 1200 pixels wide while CSS displays it at 360 pixels. The browser cannot infer every layout before choosing a resource, so responsive markup describes available candidates and the expected slot. Width descriptors such as 640w state the intrinsic width of each candidate. The sizes attribute describes the rendered slot under media conditions.
The browser combines that information with viewport size, device pixel ratio and its own resource-selection logic. It chooses a candidate; authors should not assume one exact file will always be selected.
<img
src="/images/card-800.webp"
srcset="/images/card-400.webp 400w,
/images/card-800.webp 800w,
/images/card-1200.webp 1200w"
sizes="(max-width: 640px) 100vw, 50vw"
width="1200"
height="675"
alt="Performance report comparing image transfer sizes"
>The declared sizes must match the CSS layout. If the image occupies one third of a desktop grid but the markup claims 100vw, the browser may select a larger resource than necessary.
| Image need | Recommended mechanism | Reason |
|---|---|---|
| Same composition at several widths | srcset with width descriptors and accurate sizes | Lets the browser select an efficient candidate |
| Different crop on a narrow screen | picture with media-specific sources | Supports deliberate art direction |
| Important above-fold hero | Eager discovery and measured fetch priority | Avoids delaying a true LCP resource |
| Off-screen supporting image | Native lazy loading | Reduces initial network competition |
Use picture for format choice or art direction
The picture element can offer modern formats with a fallback. It can also change the crop or composition at a breakpoint, which is called art direction. Use art direction when the same wide scene becomes unreadable on a narrow screen, not merely to resize an identical image.
<picture>
<source
type="image/avif"
srcset="/images/hero-640.avif 640w,
/images/hero-1200.avif 1200w"
>
<source
type="image/webp"
srcset="/images/hero-640.webp 640w,
/images/hero-1200.webp 1200w"
>
<img
src="/images/hero-1200.jpg"
srcset="/images/hero-640.jpg 640w,
/images/hero-1200.jpg 1200w"
sizes="(max-width: 768px) 100vw, 960px"
width="1200"
height="675"
fetchpriority="high"
alt="Developer comparing responsive image candidates"
>
</picture>The img element remains the fallback and carries the alternative text. In this example, high priority is appropriate only if measurement confirms that this above-the-fold image is the LCP element.
Reserve space with intrinsic dimensions
Width and height attributes give the browser an intrinsic aspect ratio before the image loads. CSS can still resize the image responsively. Reserving the ratio prevents content below it from jumping when the resource arrives, which directly addresses a common CLS cause.
.article-image {
display: block;
max-width: 100%;
height: auto;
}Do not omit dimensions because a responsive stylesheet changes the displayed size. Intrinsic dimensions and responsive CSS solve different parts of the problem.
Lazy-load only off-screen images
Native loading="lazy" can defer an image that begins below the fold. This reduces initial network competition and work, but applying it to the main hero can delay LCP because the browser intentionally waits to fetch it.
<img
src="/images/case-study-800.webp"
width="800"
height="450"
loading="lazy"
alt="Before-and-after image transfer size comparison"
>Test at realistic viewport heights. An image just below a design mockup may be visible immediately on another device. Browser lazy-loading heuristics also vary, so treat the attribute as a hint rather than an exact scroll-distance contract.
Write alternative text for purpose
Alternative text should communicate the purpose or information of the image in context. A chart needs the important conclusion in nearby text or an appropriate description, not merely alt="chart". A decorative flourish that adds no information should use an empty alt="" so assistive technology can ignore it.
Do not stuff search phrases into alt text. Describe what a person needs to understand. The web accessibility guide covers names, descriptions and non-text content in more depth.
Build a reliable image pipeline
- Keep a high-quality source and generate a controlled set of widths.
- Encode formats at a quality appropriate to the visual, not one global number.
- Publish immutable versioned URLs and cache them for a long period.
- Make CDN cache keys include every transformation that changes output.
- Store intrinsic width, height and useful alt text with the content record.
- Monitor transfer size, LCP discovery and layout shift in production.
Common pitfalls
- Listing several candidates but omitting or misrepresenting
sizes. - Using CSS background images for important content without an accessible alternative.
- Lazy-loading the LCP image.
- Giving every image high fetch priority.
- Generating variants but serving them with cache keys that collide.
- Assuming AVIF or WebP removes the need for correct dimensions and compression.
Frequently asked questions
Does the browser always choose the largest srcset candidate?
No. It considers the declared slot, viewport, pixel density and other browser factors when selecting an appropriate candidate.
Should a responsive image still have width and height?
Yes. The attributes establish intrinsic aspect ratio. Responsive CSS can then scale it with max-width: 100% and height: auto.
Is every below-the-fold image required to be lazy?
No, but native lazy loading is often useful for images that are not initially visible. Verify the actual journey and network behavior.
Authoritative reference
Review MDN's responsive images guide and its examples of resolution switching and art direction. Use the performance audit checklist to test candidate selection in the network panel.
Test your frontend skills
Check your knowledge of image selection, Core Web Vitals, JavaScript loading, React and accessible markup.
A practical assessment of Core Web Vitals, React rendering, JavaScript loading, responsive images, caching, semantic HTML, and accessible forms. Start the trivia-style player right inside the article.Modern Frontend Performance & Accessibility Mock Test
Discussion
0 comments
Ask a question or share what stood out to you.