Image SEO: WebP, Alt Text and Page Speed

Image SEO means choosing a modern format (usually WebP), giving images the size the page actually needs, naming and describing them clearly, and loading them so they do not slow the page down. The payoff is twofold: faster pages, which means better Core Web Vitals, and images that Google can understand and index in Google Images.

Images are usually the heaviest part of a page and among the easiest to improve. They do not call for rewriting code, just a simple working discipline. Below you will find formats, compression steps, correct HTML, rules for alt text, and a checklist. It is one of the best effort-to-result items in on-page SEO.

Why do images matter for SEO?

Three reasons, from the most practical to the most strategic:

1. Speed. Large images slow loading. On many pages, the largest element visible at load (LCP, Largest Contentful Paint) is an image; according to web.dev, a good LCP is 2.5 seconds or less. How that connects to rankings is covered in our guide to Core Web Vitals and site speed.
2. Page stability. An image without declared dimensions makes text jump when it loads. That is CLS (Cumulative Layout Shift), another Core Web Vitals metric.
3. Visibility in Google Images and in image-rich results. For products, recipes, destinations, or design, image search brings real visits.

Plus one reason that has nothing to do with rankings: accessibility. Alt text is how someone using a screen reader learns what an image shows.

Which format should you choose: JPEG, PNG, WebP, AVIF, or SVG?

The choice depends on the type of image. Google Images indexes BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF, so you are free to use modern formats.

Google's WebP project documentation states that lossy WebP images are 25–34% smaller than comparable JPEGs at an equivalent SSIM quality index, and that lossless WebP images are 26% smaller than PNGs. Results depend on the image, so treat these figures as an order of magnitude, not a promise.

Working rule: WebP by default, SVG for logos and icons, AVIF optional for large images with a WebP or JPEG fallback, and JPEG/PNG only where you need compatibility.

How to size and compress an image, step by step

1. Find the size it is displayed at. If the image takes 800 px of width on the page, a 4000 px original is waste. For high-density screens, send a version at about 2× the display width, no more.
2. Resize before uploading. Do not rely on CSS to shrink a huge file; the browser downloads the whole thing anyway.
3. Compress. For lossy WebP, a quality between 75 and 82 usually gives good results; check visually, especially faces, text, and gradients.
4. Convert. A simple command with Google's cwebp tool (the second example converts a whole folder):

cwebp -q 80 robot-vacuum-x200.jpg -o robot-vacuum-x200.webp

for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

1. Strip unneeded metadata (large EXIF data, redundant color profiles) if you do not need it.
2. Create size variants (for example 480, 800, 1200 px) for srcset.
3. Check the result visually on a phone and on desktop. Over-aggressive compression shows on products and on photos of people.

Rough weight benchmarks, offered by us as a starting point and not as a Google rule: hero image under 150–200 KB, article image under 100 KB, thumbnail under 30 KB. If a speed test shows images are still the problem, compress harder.

How should you name image files?

The file name is a small signal, but a free one. Google recommends descriptive names: black-robot-vacuum-x200.webp says something, IMG_4821.webp says nothing.

• Use lowercase, words separated by hyphens (-), no spaces, diacritics, or special characters. Google's URL guidance recommends hyphens over underscores.
• Describe the subject; do not repeat the keyword: solid-oak-living-room-furniture.webp, not furniture-furniture-living-furniture-cheap.webp.
• Keep the name stable. If you change it, the image's address changes, and old links and indexing are lost.

If you have many Romanian names with diacritics to fix, the diacritics and slug fixer quickly turns text into a clean form for URLs and files.

How do you write good alt text?

The alt attribute provides a text alternative for an image. A screen reader reads it, it appears if the image fails to load, and Google uses it, along with the surrounding text, to understand what the image shows. The W3C divides images into four types, and each is handled differently:

Writing rules:

1. Describe what is visible and what matters in context. For a store: product, color, model, sometimes the view. “Black robot vacuum, front view, with self-emptying dock.”
2. Be concise. There is no official limit; as a convention, under about 125 characters reads comfortably, but complex descriptions can be longer.
3. Do not start with “image of” or “photo of.” The screen reader already announces that it is an image.
4. Do not cram in keywords. Alt text like “robot vacuum cheap robot vacuum price” is spam and hurts accessibility.
5. Include the keyword only if it naturally describes the image.
6. Do not put important text only inside the image. If the image contains text, repeat it in the alt or, better, on the page.

Examples:

• Weak: alt="vacuum", alt="IMG_4821", alt="robot vacuum cheap best price robot vacuum".
• Good: alt="Black X200 robot vacuum, top view, on a wooden floor".

What does correct image HTML look like?

A well-written <img> element brings all the recommendations together. For the main image above the fold:

<picture>
  <source type="image/avif" srcset="/img/robot-800.avif 800w, /img/robot-1200.avif 1200w" sizes="(max-width: 900px) 100vw, 800px">
  <source type="image/webp" srcset="/img/robot-800.webp 800w, /img/robot-1200.webp 1200w" sizes="(max-width: 900px) 100vw, 800px">
  <img src="/img/robot-800.jpg" width="800" height="533"
       alt="Black X200 robot vacuum, top view, on a wooden floor"
       fetchpriority="high" decoding="async">
</picture>

For images below the fold:

<img src="/img/filter-480.webp" width="480" height="320"
     alt="HEPA filter removed from the vacuum, held in a hand"
     loading="lazy" decoding="async">

What each piece does:

• width and height reserve space and prevent layout shift (CLS).
• srcset and sizes let the browser choose the version that fits the screen.
• <picture> offers alternative formats: the browser picks the first source it understands.
• loading="lazy" defers loading of images far from the visible area.
• fetchpriority="high" tells the browser the main image is important; browsers that do not know it ignore it.
• decoding="async" allows decoding without blocking the rest of the page.

Lazy loading without hurting LCP

loading="lazy" is one of the most effective optimizations, but it has a trap: if you put it on the main image, that image loads later and LCP gets worse. web.dev's recommendation is not to lazy load images in the first visible area.

The simple rule:

1. The first large image (hero, main product image): no loading="lazy", with fetchpriority="high".
2. All other images outside the visible area: loading="lazy".
3. Check in the speed test which element is the LCP; if it is an image, prioritize it. For measurement you can use our Core Web Vitals speed test.

From an SEO standpoint, native lazy loading is generally fine, since Google can see images loaded this way when the markup is standard. Avoid solutions that put the real image address only in a custom attribute activated by complicated scripts.

How do you make images indexable in Google Images?

Google's image documentation asks for a few verifiable things:

1. Use <img> with src. Google does not index images placed only as CSS backgrounds.
2. Place the image next to relevant text. Surrounding context (headings, paragraph, caption) helps understanding.
3. Give it a descriptive file name and good alt text. See above.
4. Do not block images in robots.txt. Google's image crawler is called Googlebot-Image.
5. Include important images in a sitemap if they are not easy to find through pages; for sitemaps, see our XML sitemap guide.
6. Use stable addresses. Images moved without a redirect can drop out of the index.
7. Original content. A stock image used on thousands of sites has little chance of standing out.

If you want product images shown with extra information in results, also complete the product structured data; our guide to Schema.org structured data shows how.

Images in WordPress and online stores

On WordPress, current versions automatically generate several sizes of each image and add srcset; you can upload WebP directly, and many themes use loading="lazy" by default. Watch for two things: the theme may also lazy load the main image, and optimization plugins can compress too aggressively. General settings are in the guide to WordPress SEO before launch.

In online stores, the volume of images is high: product galleries, category thumbnails, banners. The same rules apply, with clear priorities:

• main product image: good quality, fetchpriority="high" on the product page;
• gallery: lazy loading for secondary images;
• category thumbnails: small, specific sizes, not the full image shrunk by CSS;
• alt text with product name, color, model, not the generic category text.

See also the guide to ecommerce SEO, where images are an important chapter.

Image checklist

Common mistakes

• Uploading photos straight from the camera, at 4000 px and several MB.
• Resizing only with CSS, without shrinking the file.
• Lazy loading on the LCP image, which delays it.
• Alt text that is missing, generic, or a string of keywords.
• File names like IMG_1234.
• Important text only inside the image, which Google and screen readers cannot use.
• Images without width and height, causing layout shifts.
• CSS background images for content that should be indexed.
• Over-compression that ruins products or faces.
• Renaming files or changing addresses without redirects, leading to broken images.

When this does not apply, and the limits

• Images do not compensate for weak content; they support a good page.
• Alt text is not a field for “hidden SEO”; accessibility comes first.
• Google Images traffic is valuable only in certain industries; for abstract B2B services it may be negligible.
• AVIF is not always worth the effort: the gain over WebP depends on the image, and encoding is slower.
• On sites with few images or already fast ones, the gain is small; prioritize by the speed test result.
• You cannot promise rankings from images alone; they help with speed, accessibility, and extra visibility.

Conclusion and next steps

Well-prepared images are a small investment: once the workflow is set (resize, WebP, name, alt), every new image follows the same recipe. You get pages that are faster, more accessible, and easier for search engines to understand.

What you can do this week:

1. Run a speed test on your five most visited pages and note which element is the LCP.
2. Convert the heaviest images to WebP and resize them to display size.
3. Check the width, height, and loading attributes on the main image and the others.
4. Write alt text for informative images on commercial pages.
5. Name new files using the descriptive, hyphenated rule.

If your site has thousands of images or a large store, a plan for on-page SEO can define the loading rules and fix the existing batch, so it does not depend on each individual editor.