Image SEO: how to optimise images for speed and Google Search

Image SEO means serving images in a modern format (AVIF or WebP), at the size they are displayed, with their dimensions declared and lazy loading used only below the first screen. For Google, three more things count: img elements in the HTML, alt text that describes the image, and a descriptive filename.

To check it on your own site: SEO audit

Images touch two parts of SEO at once: speed, because every image is a download and the main one is often the LCP element, and content, because Google indexes images and shows them in its results. This guide covers both, with a commented HTML snippet you can copy.

Which image format should you use?

For photographs, AVIF or WebP with a JPEG fallback; for logos and icons, SVG; for screenshots with text, PNG or lossless WebP. AVIF and WebP both support lossy and lossless compression, transparency and animation, and compress much better than JPEG or PNG1. According to MDN, lossy WebP images are on average 25 to 35% smaller than JPEG images of similar visual quality1.

Support is no longer a problem. WebP works in all current browsers, and AVIF since Chrome 85, Firefox 93, Safari 16.1 and Edge 1211. Google Search supports both in its results, along with BMP, GIF, JPEG, PNG and SVG2.

The safe way to serve AVIF is inside a picture element, which groups several versions of the same image: the browser uses the first format it understands and, if it understands none, loads the fallback img3. Google specifically asks you to always provide that img with its src2.

On compression, the rule of thumb: photographs tolerate lossy compression well, because the discarded detail is hard to see; screenshots, diagrams and line art call for lossless compression1. Judge the quality by looking at the image at its real size, not zoomed in.

How do you serve the right size for each screen?

With the srcset and sizes attributes. srcset lists the versions of the image with their real width in pixels; sizes says how wide the image will be on the page at each screen width. With both, the browser picks the smallest version that fills the slot without losing sharpness, taking the screen's pixel density into account3.

A common mistake is uploading a photo straight from the camera, 4,000 pixels wide, to display in an 800-pixel slot. The phone downloads five times the width it needs. PageSpeed Insights flags this in the Improve image delivery insight, which covers older formats and images larger than they are displayed4. How to read the rest of the report is in the guide to PageSpeed Insights.

Lazy loading: when to use it and when never to

Native lazy loading (loading="lazy") tells the browser not to download an image until it is close to the screen. Chrome starts loading it at roughly 1,250 pixels away on 4G, or 2,500 on slower connections5. It works in all current browsers without JavaScript, and Google supports it: its crawler sees lazy-loaded images because they do not depend on anyone scrolling or clicking6.

The rule has one exception with no room for nuance: never put loading="lazy" on the LCP image, the largest one on the first screen. Web.dev puts it plainly: lazy-loading the LCP image will always lead to an unnecessary delay in loading it7. That image should instead carry fetchpriority="high" so the browser requests it ahead of the rest7.

This is not a theoretical precaution. A web.dev study found that pages using native lazy loading, most of them built with WordPress, had a worse LCP than pages without it, because it was also applied to images at the top. When images on the first screen were excluded, the penalty disappeared and the data savings remained8.

The same goes for priority: in a lab test on Google Flights, marking the background image with fetchpriority="high" cut LCP from 2.6 to 1.9 seconds9. It is a hint to the browser, not an instruction, so measure the effect on your own page9.

Dimensions: the cheapest CLS fix

Declare width and height on every image. With those two numbers the browser works out the aspect ratio and reserves the space before downloading the image, so the text does not jump when it arrives. Images without dimensions are one of the usual causes of layout shift10, and web.dev recommends the attributes on every img element5.

The image does not have to be displayed at that exact size. With max-width: 100% and height: auto in your CSS, it adapts to the available width and keeps the ratio you declared. If you cannot touch the HTML, CSS aspect-ratio achieves the same10. How this affects visual stability is explained in the guide to Core Web Vitals.

An example of correct HTML, with comments

This snippet is a product page for a fictional shop: the main image with modern formats, sizes and priority; a secondary image that is lazy-loaded; and a decorative flourish with empty alt text.

<!-- In your CSS: img { max-width: 100%; height: auto; } -->

<!-- 1. Main image, probably the LCP: NO loading="lazy", and high priority -->
<picture>
  <!-- The browser uses the first format it understands: AVIF, otherwise WebP -->
  <source type="image/avif"
          srcset="/img/grey-linen-sofa-800.avif 800w, /img/grey-linen-sofa-1600.avif 1600w"
          sizes="(max-width: 800px) 100vw, 800px">
  <source type="image/webp"
          srcset="/img/grey-linen-sofa-800.webp 800w, /img/grey-linen-sofa-1600.webp 1600w"
          sizes="(max-width: 800px) 100vw, 800px">
  <!-- JPEG fallback: required; Google reads the src of this img -->
  <img src="/img/grey-linen-sofa-800.jpg"
       srcset="/img/grey-linen-sofa-800.jpg 800w, /img/grey-linen-sofa-1600.jpg 1600w"
       sizes="(max-width: 800px) 100vw, 800px"
       width="800" height="533"
       fetchpriority="high"
       alt="Three-seater sofa upholstered in grey linen, seen from the front">
</picture>

<!-- 2. Image below the first screen: lazy-loaded -->
<img src="/img/grey-linen-sofa-stitching.webp"
     width="600" height="400"
     loading="lazy"
     alt="Close-up of the double stitching on the sofa arm">

<!-- 3. Decoration with no information: empty alt (do not remove the attribute) -->
<img src="/img/wave-divider.svg" width="120" height="8" alt="">

Note three details. The sizes attribute says the image fills the full width on screens up to 800 pixels wide and is 800 pixels wide on larger ones. The filenames describe the photo. And width and height keep the real 3:2 ratio, even when the image is displayed smaller.

Alt text: what to write and when to leave it empty

Alt text (the alt attribute) is the description that stands in for an image when it cannot be seen: screen readers read it out, it appears if the image fails to load and, according to Google, Google uses it along with computer vision and the content of the page to understand what the image is about2.

The W3C publishes a decision tree that settles almost every case. In summary, in order11:

1. Does the image contain text? If the same text is already nearby, use an empty alt; if not, the alt repeats the text.
2. Is it inside a link or a button? The alt says where it goes or what it does, not what it looks like: "View basket", not "basket icon".
3. Does it add information to the page? A short description of what it contributes in that context. If it is a complex chart, the data also goes in the page text.
4. Is it decorative? alt="". An empty attribute tells the screen reader to skip it; if the attribute is missing, some screen readers announce the file name instead12.

Google adds its own example of what not to do: filling alt attributes with keywords results in a negative user experience, and it calls this keyword stuffing2. Between alt="puppy" and alt="Dalmatian puppy playing fetch", Google rates the second as best. The accessibility side is covered in more depth in web accessibility and SEO.

Filenames, context and image sitemaps

Google only indexes images in the src of an img element; it does not index CSS background images2. If an important product photo is a background-image, Google does not see it as an image at all.

Three more practices from Google's image guidance2:

• Short, descriptive filenames: grey-linen-sofa.jpg says more than IMG00023.JPG. If you translate your site, translate the filenames too.
• Context: place the image near the text about it, on a page about that topic. The page's title and text influence how the image appears in results.
• Image sitemap: it lets you tell Google about images it might not otherwise find, such as those loaded with JavaScript.

An image sitemap can be a separate file or tags added to your existing sitemap; Google is equally happy with either13. Each URL can list up to 1,000 images, and the old title, caption, licence and geo-location tags are no longer used13. Images can live on another domain, such as a CDN, as long as you verify that domain in Search Console13.

Image SEO checklist

Declaration of interest: this blog belongs to SmoothSeen, a web audit tool that measures visibility in search engines and AI assistants. Among its search visibility checks, it reviews image alt text (with text, decorative or missing), whether the main image is lazy-loaded, whether images have dimensions, and speed through PageSpeed Insights.

Frequently asked questions

Is WebP or AVIF better?

AVIF usually compresses slightly better than WebP at the same visual quality, but its support is more recent: Safari has supported it since version 16.1 and Edge since 121. WebP works in every current browser. The safest option is to serve both inside a picture element, AVIF first and then WebP, with a JPEG fallback in the img.

Does lazy loading hurt SEO?

Not if it is used properly. Google supports the browser's native lazy loading, because it does not depend on the user scrolling or clicking, and its crawler sees those images. What does hurt is applying it to the main image on the first screen: it delays LCP, which is one of the Core Web Vitals. Only lazy-load what sits further down.

Do all images need alt text?

They all need the alt attribute, but not all of them need text in it. Images that carry information get a short description of what they contribute in their context. Decorative images, or ones that repeat what the text next to them already says, get an empty alt="" so that screen readers skip them. Removing the attribute is not the same as leaving it empty.

Do I need an image sitemap?

It is not mandatory. Google discovers images in the img elements of your HTML when it crawls your pages. An image sitemap helps when there are images it might not find, such as those loaded with JavaScript, or when they are served from another domain. It can be a separate file or tags added to the sitemap you already have.

What to do next

Open your most visited page, find its main image and check three things: that it does not carry loading="lazy", that it has width and height, and that its alt describes what it contributes. Then work through the checklist on your other templates, and carry on with the guide to what SEO is.