Image SEO: Alt Text, File Size, and What Actually Ranks

Image SEO gets taught backwards.

Nearly every guide leads with alt text and filenames — the parts that are easy to explain and barely move anything — and treats file size as a technical footnote. Meanwhile oversized images are the single most common cause of a failing Largest Contentful Paint, which is a ranking factor and does lose you readers.

So let's do it in order of what actually matters.

The short version

1. File size and format — biggest impact, because it feeds Core Web Vitals directly
2. Alt text — an accessibility requirement first, a modest search benefit second
3. Filenames and context — small, free, worth doing

Serve WebP, size images to their display dimensions, lazy-load below the fold but never the hero, and write alt text that describes the image for someone who can't see it.

Format and file size

Use WebP. It's supported across every current browser and produces meaningfully smaller files than JPEG or PNG at equivalent quality. AVIF compresses better still, though support and tooling are patchier — WebP is the sensible default.

Keep JPEG for photographs where you need a universal fallback. Keep PNG only when you genuinely need transparency and SVG won't do. Use SVG for logos, icons, and diagrams, since it's tiny and scales perfectly.

Size to display dimensions. This is the mistake that costs the most. Uploading a 4000-pixel-wide photograph into a container that displays it at 800 pixels means every visitor downloads five times the data they need. The browser scales it down, so it looks fine — and your LCP is quietly ruined.

Resize before upload, or use responsive images so the browser can pick an appropriate size:

<img src="diagram-800.webp"
     srcset="diagram-400.webp 400w,
             diagram-800.webp 800w,
             diagram-1200.webp 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="…" width="800" height="450">

Always set width and height attributes. Without them the browser doesn't know how much space to reserve, so the layout jumps when the image loads — which is exactly what Cumulative Layout Shift measures.

Lazy loading, and the one place not to use it

Lazy loading defers off-screen images until they're needed. loading="lazy" is a one-attribute win for anything below the fold.

Never lazy-load your hero image or anything visible on load. Your LCP element is usually the largest above-the-fold image, and lazy-loading it delays the exact thing the metric measures. This is a genuinely common own-goal — someone applies lazy loading site-wide via a plugin setting and makes their headline metric worse.

Set loading="eager" on the hero, or exclude it in your plugin's settings.

Alt text

Alt text describes an image for people who can't see it — screen reader users, and anyone whose image failed to load. That's the actual purpose, and it's an accessibility requirement rather than an SEO tactic.

Useful description happens to also help search engines understand your images. Those goals align, which is convenient, but the accessibility one is the one that matters.

Write what the image shows, in context:

• ✘ alt="image" — tells nobody anything
• ✘ alt="email deliverability SEO email marketing spam filter" — keyword stuffing, actively hostile to screen reader users
• ✘ alt="diagram" — technically a description, practically useless
• ✔ alt="Three factors deciding inbox placement: technical infrastructure, list quality, and content behaviour"

Context decides the right alt text. The same photograph of a person at a desk might be alt="Sarah Chen, author" on a bio page and alt="A marketer reviewing campaign metrics on a laptop" in an article. Describe what matters here.

Decorative images take empty alt text. A background flourish or divider should have alt="" — not a missing attribute, an explicitly empty one. That tells a screen reader to skip it rather than announcing a filename.

Keep it to about a sentence. Screen readers read the whole thing aloud; a paragraph is punishing.

If the image contains important text, that text needs to exist somewhere else on the page too. A screenshot of a table isn't accessible content and isn't crawlable content.

Filenames

email-deliverability-three-factors.webp beats IMG_4471.jpg.

It's a small signal, it's free, and it takes two seconds at upload. Use hyphens, lowercase, and describe the image.

Don't spend real effort here. It's a minor factor that gets disproportionate attention because it's easy to teach.

Does image search still send traffic?

Yes, and it's genuinely overlooked — though it depends heavily on your subject.

Visual topics — recipes, products, design, travel, anything where people search to see something — still get meaningful image search traffic. Abstract B2B topics get very little, and no amount of alt text changes that.

What helps when it applies: original images rather than stock, descriptive filenames and alt text, images placed near relevant body text, and an image sitemap if you have a large visual library.

The honest read for most business blogs: your traffic will come from the pages, not the images. Optimise images for speed and accessibility, and treat image search traffic as a bonus in the categories where it exists.

A note on original images

One thing worth flagging, since it connects to something bigger.

Original diagrams, screenshots, and charts are among the more durable content assets you can make. They're genuinely link-worthy, they can't be synthesised from an existing explanation, and they signal first-hand work in a way stock photography actively doesn't.

A custom diagram explaining your framework will outlast fifty stock images of people shaking hands. Why that matters now.

Frequently asked questions

Does alt text affect rankings?
Modestly and indirectly. Alt text helps search engines understand image content, which supports image search visibility and adds a little context to the page. It isn't a significant ranking factor for the page itself. Its real importance is accessibility — screen reader users depend on it, and keyword-stuffed alt text actively degrades their experience while gaining you nothing.

What image format is best for SEO?
WebP for most images — universal browser support and meaningfully smaller files than JPEG or PNG at the same quality. SVG for logos, icons, and diagrams, since it's tiny and scales perfectly. AVIF compresses better than WebP but has patchier tooling support. Format matters mainly through file size, which feeds Core Web Vitals, so the goal is the smallest file that still looks right.

Should I use lazy loading?
Yes for below-the-fold images, via loading="lazy". Never for your hero image or anything visible when the page loads — your Largest Contentful Paint element is usually the biggest above-the-fold image, and lazy-loading it delays exactly what the metric measures. Applying lazy loading site-wide through a plugin without excluding the hero is a common and self-defeating mistake.

What to do next

Run one page through PageSpeed Insights and look at what it names as your LCP element.

If it's an image, check two things: is it in WebP, and is it sized to its display dimensions? For most sites the answer to at least one is no, and fixing it is the largest single speed improvement available.

Then check whether your lazy loading is excluding the hero.

Free: The SEO audit checklist.

---

Related guides

• On-page SEO: the complete checklist — where images fit
• WordPress speed: the Core Web Vitals playbook — the wider performance picture
• How to read a PageSpeed Insights report — interpreting what it tells you
• 6 content formats that still get clicks — original visuals as assets