Image SEO: Alt Text, WebP, Lazy Loading and CLS

Image SEO covers two goals that are often confused: helping search engines understand and rank your images, and stopping images from slowing your pages down. Alt text and descriptive filenames serve the first. Modern formats, correct sizing, lazy loading, and explicit dimensions serve the second. Explicit width and height attributes are the single cheapest fix for layout shift.

What is image SEO?

Image SEO is the practice of making images discoverable, understandable, and fast. Discoverability comes from alt text, filenames, surrounding context, and sitemap inclusion. Speed comes from format, compression, dimensions, and loading strategy.

Images are usually the largest thing on a page by weight, which makes them the most common cause of a failing Largest Contentful Paint. That gives image work an unusual property in technical SEO: the same change often improves accessibility, performance, and search visibility at once.

Quick facts

Why image optimisation matters

• Performance. Images dominate page weight. LCP is an image on most content pages, and LCP is a Core Web Vital. See Core Web Vitals explained.
• Accessibility. Alt text is how screen reader users perceive images. This is the primary purpose, and it is a legal requirement in many jurisdictions.
• Image search traffic. A meaningful referral source for recipe, product, travel, and how-to content.
• Context. Images and their alt text contribute to a page’s topical understanding.

Order of operations: if you fix one thing today, add explicit width and height attributes to every image. It takes minutes, it eliminates the largest single source of layout shift, and it requires no new tooling. Format conversion and compression matter more for total page weight, but nothing else offers this ratio of effort to result.

How to write good alt text

Alt text describes the image’s content and function in context. Write it for someone who cannot see the image, not for a crawler.

Alt text rules

• Describe what is in the image, specifically.
• Keep it concise; roughly 125 characters is a practical ceiling.
• Do not start with “image of” or “picture of”; that is already announced.
• Use an empty alt="" for purely decorative images, never omit the attribute.
• For a linked image, describe the destination rather than the picture.
• Never keyword-stuff. It harms screen reader users and is treated as spam.
• If the image contains important text, repeat that text in the alt.

Image formats compared

Serve modern formats with a fallback using the picture element:

<picture>
  <source srcset="/img/boot.avif" type="image/avif">
  <source srcset="/img/boot.webp" type="image/webp">
  <img src="/img/boot.jpg" alt="Brown leather hiking boot, side view"
       width="800" height="600" loading="lazy" decoding="async">
</picture>

The complete image markup pattern

For an above-the-fold hero image, which is usually your LCP element:

<img src="/img/hero-800.webp"
     srcset="/img/hero-400.webp 400w,
             /img/hero-800.webp 800w,
             /img/hero-1600.webp 1600w"
     sizes="(max-width: 768px) 100vw, 800px"
     alt="Descriptive text here"
     width="800" height="450"
     fetchpriority="high">

Note what is absent: no loading="lazy". Lazy-loading the LCP image delays the very thing Core Web Vitals measures, and it is one of the most common self-inflicted performance problems on WordPress sites.

For images below the fold, reverse it: add loading="lazy" and omit fetchpriority.

How to optimise images, step by step

Step 1: Resize before uploading

Never upload a 4000-pixel-wide photograph for a 800-pixel slot. Browsers download the full file regardless of display size. Resizing at source is the largest single saving available and costs nothing.

Step 2: Compress

Quality around 80 is visually indistinguishable from 100 for most photographs at a fraction of the size. Run every image through a compressor before or during upload.

Step 3: Convert to WebP or AVIF

On WordPress, an image optimisation plugin can convert and serve modern formats automatically with fallbacks. If your host uses LiteSpeed, its cache plugin handles this too; see LiteSpeed cache settings.

Step 4: Add width and height to every image

This lets the browser reserve space before the image loads, which prevents layout shift. Modern CSS handles the aspect ratio correctly as long as the attributes are present, so this does not break responsive layouts.

Step 5: Lazy-load below the fold only

Native loading="lazy" requires no JavaScript. Apply it to everything below the fold and to nothing above it. Audit your theme, since many apply it globally by default.

Step 6: Use descriptive filenames

brown-leather-hiking-boot.webp is better than IMG_4471.jpg. It is a minor signal, but it costs nothing at upload time and is expensive to change later.

Step 7: Consider an image sitemap

If image search matters to your business, add image entries to your XML sitemap. For most sites, images embedded in crawlable HTML are discovered without this.

Common image SEO mistakes

Decision guide

• Blog with a few images per post: resize, compress, WebP, alt text, dimensions. That is the whole job.
• Ecommerce with large catalogues: automate conversion and srcset generation at the pipeline level; do not do this by hand.
• Recipe, travel, or product site: image search is a real channel; invest in an image sitemap and strong alt text.
• Failing LCP: check whether your hero image is lazy-loaded first, before anything else.
• Failing CLS: add width and height attributes site-wide. This usually resolves it.

Image SEO checklist

• Every image has an alt attribute, empty if decorative
• Alt text describes content, not keywords
• Images resized to their maximum display size before upload
• Compressed at around quality 80
• Served as WebP or AVIF with fallbacks
• Explicit width and height on every image
• Lazy loading applied below the fold only
• fetchpriority="high" on the LCP image
• srcset and sizes on responsive images
• Descriptive, hyphenated filenames
• Image paths not blocked in robots.txt
• No important text baked into image files

Frequently asked questions

Does alt text affect rankings?

It helps Google understand image content, which matters for image search and contributes context to the page. Its primary purpose is accessibility, and writing it well for that purpose produces good SEO alt text automatically.

Should every image have alt text?

Every image needs an alt attribute. Purely decorative images should have an empty one, alt="", which tells screen readers to skip them. Omitting the attribute entirely is different and worse, because assistive technology may then read the filename.

Is WebP better than JPEG?

Generally yes: typically 25 to 35 percent smaller at comparable quality, with transparency support. AVIF compresses better still but takes longer to encode. Serve modern formats with a fallback.

Should I lazy-load all images?

No. Never lazy-load images visible on initial load, particularly the LCP image. Lazy loading defers the request, which is exactly wrong for the element Core Web Vitals is timing.

Do image filenames matter?

Slightly. Descriptive filenames are a minor signal and cost nothing at upload. They are not worth renaming an existing library for.

How do I stop images causing layout shift?

Add explicit width and height attributes. The browser then reserves the correct space before the file arrives. This is the standard fix and it works with responsive CSS.

Do I need an image sitemap?

Only if image search is a meaningful channel for you. Images in crawlable HTML are discovered normally without one.

Key takeaways

• Alt text is for accessibility first; good accessibility alt text is good SEO alt text.
• Use alt="" for decorative images, never omit the attribute.
• WebP or AVIF with fallbacks should be the default.
• Explicit width and height prevent layout shift; this is the cheapest fix available.
• Never lazy-load the LCP image.
• Resizing before upload is the single largest weight saving.
• Text inside images is invisible to search engines.

Conclusion

Image work pays three ways at once, which is rare. Start with the two changes that cost nothing and fix the most: add width and height attributes everywhere, and confirm your hero image is not lazy-loaded. Then move to format conversion and compression, which take tooling but deliver the bulk of the weight reduction.

Related articles

• Technical SEO guide
• Core Web Vitals explained
• LiteSpeed cache settings
• How to do a technical SEO audit
• Mobile-first indexing explained

External references

• Google Search Central: Google Images best practices
• web.dev: Optimize Largest Contentful Paint