Image SEO: How Images Affect Search Rankings (And How to Fix Them)

Most SEO guides focus on keywords, backlinks, and on-page content. They barely mention images. That's a mistake — for many pages, images are the single biggest ranking factor in play. Here's why, and what to do about it.

Does Image Size Affect SEO?

Directly, yes. Google uses Core Web Vitals as a ranking signal, and images are the primary driver of the most important metric: Largest Contentful Paint (LCP). LCP measures how long it takes for the largest visible element on your page to load — for most pages, that's the hero image or the first large blog image.

Google's threshold for a "good" LCP is under 2.5 seconds. A large, uncompressed JPG hero image can easily add 2–4 seconds to that on a mobile connection. Switch that image to WebP at 75% quality and you can drop the LCP by 1–3 seconds — potentially moving from "Poor" to "Good" and picking up a meaningful ranking boost.

How to Write Alt Text for Image SEO

Alt text is read by screen readers for visually impaired users, and by Google to understand what your image shows. Both audiences matter — write for the human first, and the SEO signal follows naturally.

The rule for good alt text

Describe the image in plain English, naturally including your target keyword where it fits. Aim for 5–15 words. Never stuff multiple keywords into alt text.

<!-- Bad: generic, no context -->
<img src="img.jpg" alt="image" />

<!-- Bad: keyword stuffed -->
<img src="img.jpg" alt="image SEO SEO tips image optimization Google ranking images" />

<!-- Good: descriptive, natural -->
<img src="webp-vs-jpg-comparison.webp"
     alt="Side-by-side comparison of WebP vs JPG image quality at 75% compression" />

For decorative images that add no content value (dividers, backgrounds, decorative icons), use empty alt: alt="". This tells screen readers to skip it and tells Google it's decorative.

Does Image File Name Matter for SEO?

Yes. Google reads the file name as a relevance signal for both the image and the parent page. The file name is one of the first things Google uses to understand what an image shows before it analyzes visual content.

The rule: use lowercase, hyphen-separated, descriptive names that include your target keyword naturally:

# Bad file names
IMG_4821.jpg
photo1.png
screenshot.webp

# Good file names
webp-vs-jpg-compression-comparison.webp
how-to-compress-png-without-losing-quality.webp
iphone-heic-to-jpg-conversion-steps.webp

How Core Web Vitals Affect Rankings

Google's Core Web Vitals update (rolled out 2021) made three page experience metrics official ranking signals. Images directly affect two of the three:

• LCP (Largest Contentful Paint) — Time to load the largest visible element. Usually an image. Target: under 2.5 seconds.
• CLS (Cumulative Layout Shift) — How much content shifts as the page loads. Images without width and height attributes cause layout shift. Target: under 0.1.
• INP (Interaction to Next Paint) — Not directly image-related, but heavy image pages can indirectly affect this.

To fix CLS: add explicit width and height attributes to every image. The browser reserves correct space before the image loads:

<!-- Causes layout shift -->
<img src="hero.webp" alt="Homepage hero" />

<!-- No layout shift -->
<img src="hero.webp" alt="Homepage hero" width="1200" height="630" />

Should You Use WebP for SEO?

Yes — and Google explicitly tells you to. When you run PageSpeed Insights on any page with JPG or PNG images, the most common suggestion is "Serve images in next-gen formats." WebP is the format Google wants to see.

WebP produces files 25–35% smaller than equivalent JPG at the same visual quality. For a page with 5 images, switching from JPG to WebP can reduce total image payload by 200–400 KB. Browser support: 97%+ of users are on browsers that support WebP.

How to Check If Images Are Hurting Your Rankings

Two tools give you a complete picture:

1. Google PageSpeed Insights

Go to pagespeed.web.dev and enter any page URL. In the Opportunities section, look for:

• "Serve images in next-gen formats" — still using JPG/PNG where WebP would work
• "Properly size images" — serving larger images than actually displayed
• "Efficiently encode images" — images not compressed enough
• "Largest Contentful Paint element" — tells you exactly which image is the LCP

2. Google Search Console — Core Web Vitals Report

Navigate to Experience → Core Web Vitals. This shows which pages have poor LCP and CLS scores across real users — not just a simulated test. This is where you find which pages most need image optimization work.

Lazy Loading — Does It Help or Hurt SEO?

Adding loading="lazy" to below-the-fold images is safe for SEO and helps Core Web Vitals. There is one critical rule: never lazy-load your LCP image.

<!-- LCP image (hero/above-fold) — NO lazy loading -->
<img src="hero.webp" alt="Your hero description"
     width="1920" height="1080" fetchpriority="high" />

<!-- Below-fold images — lazy load these -->
<img src="blog-image.webp" alt="Description"
     width="1200" height="800" loading="lazy" />

Image SEO Impact at a Glance

Factor	Bad practice	Fix	Ranking impact
File size	Uncompressed JPG, 1–3 MB	WebP at 75% quality, under 100 KB	LCP improves 1–3s
Alt text	Missing or "image.jpg"	5–15 word natural description	Image indexing, accessibility signal
File name	IMG_4821.jpg	descriptive-hyphenated-name.webp	Minor relevance signal
Dimensions	No width/height attributes	Explicit width/height on every <img>	CLS improves toward <0.1
Loading strategy	Lazy-loading the hero image	fetchpriority="high" on LCP image only	LCP improves further

The Complete Image SEO Checklist

• Convert all images to WebP (25–35% smaller than JPG at same quality)
• Compress images to under 100 KB — 150–200 KB max for hero images
• Write descriptive alt text for every image: 5–15 words, include keyword naturally
• Use empty alt="" for purely decorative images
• Name files descriptively: webp-compression-guide.webp not IMG_4821.jpg
• Add width and height attributes to every <img> tag to prevent CLS
• Add loading="lazy" to all below-fold images
• Add fetchpriority="high" to your LCP image
• Run PageSpeed Insights monthly — fix anything scoring under 75
• Monitor Core Web Vitals in Google Search Console weekly

Frequently Asked Questions