Most sites have images. Few have their images fully optimised for search. Alt text is either missing or keyword-stuffed, file names are DSC_0147.jpg, formats haven't moved to WebP, and half the images below the fold are missing lazy loading. These aren't cosmetic issues — they directly affect page speed scores, Core Web Vitals, and whether Google can surface your images in Image Search.
Key Takeaways
- Alt text is the primary ranking signal for images — describe the image accurately, include the target keyword naturally
- WebP reduces image file size by 25–35% vs JPEG at equivalent quality — the single highest-impact image format change
- All images must have explicit
widthandheightattributes to prevent Cumulative Layout Shift (CLS) - Images below the fold should use
loading="lazy"; the LCP candidate image must NOT be lazy-loaded - Descriptive file names help Google understand image content before parsing alt text — use
red-running-shoes.webpnotimg-0412.jpg
Why Image SEO Matters
Images affect rankings through multiple channels:
- Google Image Search — a distinct search surface with its own ranking signals (alt text, page context, file name, structured data)
- LCP (Largest Contentful Paint) — for most pages, the LCP element is the hero image. Slow images delay LCP and hurt Core Web Vitals scores
- CLS (Cumulative Layout Shift) — images without dimensions cause layout shifts as they load, directly increasing the CLS score
- Page speed — unoptimised images are the most common cause of slow load times; PageSpeed Insights flags them as the top opportunity on most sites
- Crawl budget — oversized images slow Googlebot's crawl of your pages, reducing how many it can crawl per day
Alt Text — The Most Important Image SEO Factor
Alt text (the alt attribute on <img> tags) is Google's primary signal for understanding what an image depicts. It's also what screen readers announce to visually impaired users — so it serves both SEO and accessibility.
Write alt text that describes the image accurately. Include the target keyword where it fits naturally, but don't keyword-stuff. Bad: alt="seo seo optimization seo guide". Good: alt="screenshot of SEO audit results showing 22 checks per page".
For decorative images (dividers, backgrounds, icons used for aesthetics only), use an empty alt attribute — alt="" — to tell screen readers and Google to skip it. Missing the alt attribute entirely is different from an empty alt — a missing alt means "no description provided" (a warning); an empty alt means "intentionally decorative" (correct behaviour).
| Alt text type | Example | Verdict |
|---|---|---|
| Missing (no alt attribute) | <img src="chart.png"> |
Accessibility fail + SEO miss |
| Empty (decorative) | <img src="divider.svg" alt=""> |
Correct for decorative images |
| Keyword-stuffed | alt="seo seo audit seo checker" |
Spam signal — avoid |
| Descriptive + natural keyword | alt="SEO audit dashboard showing page score breakdown" |
Correct approach |
File Names — Tell Google Before It Reads the Alt
Google reads the file name as a secondary signal for image context. A file named DSC_0147.jpg tells Google nothing. A file named organic-dark-chocolate-bar.webp gives Google context before it even parses the page's alt text.
Use lowercase, hyphen-separated words that describe the image content. Match it to the page's primary keyword where accurate. This is a small signal, but it costs nothing to get right and compounds across hundreds of images.
Image Formats — WebP First
Browser support for WebP is now universal (Chrome, Firefox, Safari, Edge). AVIF has even better compression but slightly less universal support. The practical advice:
- WebP for all photos, product images, and screenshots — 25–35% smaller than JPEG at equivalent quality
- SVG for logos, icons, illustrations — infinitely scalable, tiny file size for geometric shapes
- PNG only when you need lossless quality with transparency (e.g. screenshots with sharp text on transparent background)
- JPEG acceptable as fallback; migrate to WebP when re-exporting
- Avoid BMP, TIFF, ICO for web images — significantly larger than equivalent WebP/PNG
If you're on a CMS like WordPress, image optimisation plugins (Imagify, ShortPixel, Smush) handle WebP conversion automatically on upload.
Dimensions — Prevent CLS
Always specify width and height attributes on <img> tags. The browser uses these to reserve space for the image before it loads — preventing the page from jumping as images appear (Cumulative Layout Shift).
<!-- Bad: no dimensions → CLS -->
<img src="hero.webp" alt="...">
<!-- Good: dimensions declared → no CLS -->
<img src="hero.webp" alt="..." width="1200" height="630">You can use CSS to make the image responsive while keeping the declared dimensions — width: 100% in CSS overrides the HTML attribute for display purposes, but the browser still uses the ratio to reserve space. Set height: auto in CSS alongside a declared height attribute for correct responsive behaviour.
Lazy Loading — Load Below-Fold Images Only When Needed
The loading="lazy" attribute defers image loading until the user scrolls near the image. This reduces initial page load time and data usage for users who don't scroll the full page.
<!-- Above the fold (LCP candidate) — never lazy -->
<img src="hero.webp" alt="..." width="1200" height="630" loading="eager">
<!-- Below the fold — lazy load -->
<img src="product.webp" alt="..." width="400" height="400" loading="lazy">loading="lazy" to your LCP image. The LCP element (typically the hero image) must be fetched immediately. Lazy-loading it delays LCP and hurts Core Web Vitals. Use loading="eager" (the default) or add fetchpriority="high" for the LCP image to give it the highest browser fetch priority.
Structured Data for Images
For products, recipes, and articles, adding structured data helps Google surface your images in rich results:
- Product schema — include
imageproperty pointing to a high-quality product photo (minimum 50px × 50px, ideally 1200px+ wide) - Recipe schema —
imageis a required property for recipe rich results - Article / BlogPosting schema —
imageproperty enables article rich results in Google News and Discover - VideoObject schema —
thumbnailUrlproperty for video thumbnails in search results
The Schema Markup Tester validates whether your image URLs in structured data are reachable, match the declared content type, and meet the minimum dimension requirements for rich results.
Checking Image SEO Issues Sitewide
Manual image audits don't scale beyond a few pages. For site-wide checks, the Page Speed Inspector audits a single page for images missing width/height attributes, below-fold images without loading=lazy, oversized images, and missing alt text — with a list of affected images for each issue. Run it on your homepage and highest-traffic templates first.
Audit Your Page's Image Issues
Free, no signup. The Page Speed Inspector checks every image on a page for missing dimensions, missing lazy loading, oversized files, and other issues that affect page speed and Core Web Vitals.
Try the Page Speed Inspector Free →Related reading: Image SEO Optimization — 8 Tips That Actually Work
Affiliate disclosure: Some links on this page may be affiliate links. We only mention tools we've personally used and have an honest opinion about. Affiliate revenue helps keep ByteWaveNetwork's tools free and maintained. We are not paid by any of the tools compared in this article for favorable coverage.