Responsive images for SEO: srcset and sizes explained

Updated 26 September 2026

Tool for this guide: SEO image pack

A responsive image gives the browser several copies of the same picture at different widths and lets it download the smallest one that still looks sharp. Phones get a small file, large screens get a large one, and pages load faster for everyone.

The HTML

<picture>
  <source type="image/webp"
    srcset="/images/red-shoes-640w.webp 640w, /images/red-shoes-1280w.webp 1280w"
    sizes="(max-width: 1280px) 100vw, 1280px">
  <img src="/images/red-shoes-1280w.jpg"
    srcset="/images/red-shoes-640w.jpg 640w, /images/red-shoes-1280w.jpg 1280w"
    sizes="(max-width: 1280px) 100vw, 1280px"
    width="1280" height="853"
    alt="Pair of red running shoes on a track" loading="lazy" decoding="async">
</picture>

What each part does

Part	What it does
`srcset`	Lists the copies and their widths in pixels (`640w`)
`sizes`	Tells the browser how wide the image will be shown, so it can pick a copy before the layout is known
`<source type="image/webp">`	Offers WebP to browsers that support it; others use the JPG in `<img>`
`width` and `height`	Reserve space before the image loads, so the page doesn't jump
`alt`	Describes the image for screen readers and search engines
`loading="lazy"`	Waits to load images that are further down the page

Don't lazy-load the main image at the top of a page, since it's needed straight away.

Which widths to make

Make copies up to the largest width the image is ever shown at, and never larger than the original. A common set is 640, 960, 1280 and 1920 pixels. Our SEO image pack generator makes these in WebP and JPG (plus AVIF if your browser can save it), names them after your keyword, and writes the HTML above for you.

File names and alt text

File names: short, descriptive words separated by hyphens, like red-running-shoes-1280w.webp, not IMG_4032.jpg.
Alt text: one plain sentence describing what the image shows and why it's on the page. Don't start with "image of".

Try it now

Turn one image into a fast, search-friendly set: responsive sizes in WebP, AVIF and JPG, keyword file names, alt text, and ready-to-paste HTML with srcset and lazy loading.

Open seo image pack