Learn
Image SEO: Formats, Sizing and Getting Into Image Search
Image optimisation splits into two jobs that get conflated: making pages fast, and making images findable. The first is technical and the second is editorial.
Run a fresh DomainLens audit and use the report as your priority list.
Two separate goals
Performance work — formats, compression, sizing, lazy loading — is about how quickly the page paints. Discoverability work — alt text, filenames, captions, structured data — is about whether the image appears in image search.
They are unrelated, and confusing them produces advice like "compress images to improve rankings", which is true only through Core Web Vitals and has nothing to do with the image being findable.
| Goal | Levers | Measured by |
|---|---|---|
| Page speed | Format, compression, dimensions, loading | LCP, transfer size |
| Image discovery | Alt text, filename, surrounding text, sitemap | Image search traffic |
| Layout stability | Explicit width and height | CLS |
Choosing a format
Modern formats are meaningfully smaller than JPEG and PNG at the same visual quality, and the picture element lets you serve them with a fallback so support is not a concern.
| Format | Best for | Notes |
|---|---|---|
| AVIF | Photos, where size matters most | Smallest; slower to encode |
| WebP | General purpose | Universally supported now |
| JPEG | Fallback for photos | Safe everywhere |
| PNG | Transparency, flat graphics | Large for photographs |
| SVG | Icons, logos, diagrams | Scales freely; sanitise user uploads |
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="…"
width="1600" height="900"
fetchpriority="high">
</picture>
<!-- The browser picks the first format it supports.
width and height prevent layout shift regardless
of which one it chooses. -->Responsive sizing is where the bytes are
The largest single saving is usually not compression but not sending a 2400px image to a 400px viewport. srcset and sizes let the browser choose an appropriate file, and the difference on mobile is frequently an order of magnitude.
The sizes attribute is the part people omit. Without it the browser assumes the image spans the full viewport width and picks a larger file than needed.
<img src="/photo-800.jpg"
srcset="/photo-400.jpg 400w,
/photo-800.jpg 800w,
/photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="…" width="800" height="600" loading="lazy">Making images findable
Alt text carries most of the weight and is the one most often filled with keywords rather than descriptions. See image alt text for writing it, and lazy loading for the loading attribute.
- Alt text describing the image's purpose in context — the primary signal, and an accessibility requirement.
- Descriptive filenames: winter-trail-shoe-blue.jpg rather than IMG_4821.jpg.
- Surrounding text, which Google uses to understand what the image depicts.
- A caption where one genuinely helps the reader.
- An image sitemap, for large libraries or images loaded by script.
- Structured data where the image belongs to a Product, Recipe or Article.
How DomainLens contributes
DomainLens reports missing alt attributes, images without dimensions and the LCP element it measured — the three image findings that map directly to a metric or to accessibility. See what LCP measures when the LCP element is an image.
- Which image format is best for SEO?
- No format ranks better. AVIF and WebP are smaller, which helps loading metrics. Serve them with a JPEG fallback through the picture element.
- Do filenames matter?
- A little, for image search. A descriptive filename is a weak signal and costs nothing; it is not worth renaming an existing library for.
- What is the biggest image performance win?
- Responsive sizing with srcset. Not sending a desktop-sized image to a phone usually saves more than any compression setting.
- Do I need an image sitemap?
- Only for large libraries or images loaded by JavaScript. Images referenced in ordinary HTML are discovered when the page is crawled.