Since Google rolled out Mobile-First Indexing, unoptimized mobile images are one of the most damaging ranking factors. Responsive images — using srcset, sizes, and the picture element — don't just improve UX; they directly impact Core Web Vitals scores and search rankings.
According to HTTP Archive 2026 data, 78% of web traffic comes from mobile devices. Images account for an average of 58% of total page weight. Properly implemented responsive images can reduce mobile image payload by 40–65%.
1. The srcset Attribute — Providing Multiple Image Versions
The srcset attribute lets you declare multiple versions of the same image at different resolutions. The browser automatically selects the most appropriate version based on viewport width and device pixel ratio (DPR).
- ▸Width descriptor: `srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"`
- ▸Pixel density descriptor: `srcset="image.jpg 1x, image@2x.jpg 2x"` — ideal for icons and logos
- ▸Smart selection: browsers choose the optimal image using the sizes hint and actual DPR
- ▸Without srcset: the browser always downloads the largest file, wasting mobile bandwidth
Create 3–4 size variants for each content image: 400w, 800w, 1200w, 1600w. For thumbnails under 200px, a single version is sufficient.
2. The sizes Attribute — Telling the Browser Display Width
While srcset declares available images, sizes tells the browser how wide the image will be rendered. This is the critical hint that lets the browser choose the right image before CSS is parsed.
- ▸Syntax: `sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"`
- ▸Reads left-to-right: uses the first condition that matches the current viewport
- ▸Missing sizes: browser assumes 100vw and always downloads the largest image
- ▸Incorrect sizes: causes wrong image selection — either oversized waste or blurry rendering
3. The <picture> Element — Format Control by Browser Capability
The `<picture>` element lets you serve different image formats based on browser support. It's the standard way to serve WebP/AVIF to supporting browsers while falling back to JPEG/PNG for older ones.
- ▸`<source type="image/avif" srcset="img.avif">` — AVIF: 20–30% smaller than WebP, latest Chrome/Firefox
- ▸`<source type="image/webp" srcset="img.webp">` — WebP: 95%+ browser support in 2026
- ▸`<img src="img.jpg" alt="...">` — JPEG/PNG fallback for unsupported browsers
- ▸Combine with srcset inside each source for responsive + next-gen format simultaneously
4. Responsive Images and Core Web Vitals
LCP (Largest Contentful Paint) — usually the hero image or banner — is the most important Core Web Vitals metric. Responsive images directly improve LCP by reducing the file size that needs to be downloaded.
- ▸LCP target: under 2.5 seconds — responsive images help achieve this on mobile
- ▸Preload the LCP image: `<link rel="preload" as="image" imagesrcset="..." imagesizes="...">` — parallel with HTML
- ▸Add fetchpriority="high" to the LCP image to signal browser prioritization
- ▸Never put loading="lazy" on above-the-fold images — causes LCP penalty
In Next.js and Nuxt, the built-in Image component automatically generates srcset, converts to WebP, adds lazy loading, and placeholder blurs. No manual srcset required.
5. Mobile-First SEO and Responsive Images
Google crawls with Googlebot Smartphone. Images that the mobile bot can't load (blocked URLs, missing files, or extreme sizes) are skipped during indexing. Responsive images ensure all versions are crawlable and indexable.