Image SEO Optimization: alt, Dimensions and Weight for Core Web Vitals

Image optimization for SEO boils down to three simple things: a meaningful alt (for image search and accessibility), set width and height (so the page doesn't "jump" during loading and fail CLS), and a lightweight modern format (WebP or AVIF). All of this impacts ranking and Core Web Vitals, and it’s cheap to fix—if you know what you're doing.

Images are almost always the heaviest part of a page, yet they're the first thing people forget. During e-commerce audits, we constantly see the same thing: hundreds of product photos at once without alt tags or dimensions. Google indexes the page but misses the context, while the user watches the layout twitch as images load. I'll break down what an audit checks and how to fix it.

Why you need alt and how to write it

The alt attribute is a text description of an image, and it works on several fronts at once. Google reads alt to understand what's in the image and pulls your photos into image search, which drives real traffic. A blind user's screen reader reads the alt out loud—without it, the image simply disappears for them. And if an image fails to load, the description text shows up instead. The scale of the problem is huge—Nikolay cites some uncomfortable numbers in his podcast about alt tags:

"Over 53% of homepages worldwide have critical issues with missing or incorrect alt tags. And the funniest part—45% of images without alt tags are also clickable links: for a blind person, such a link sounds like a gibberish string of letters, and they have no idea where it leads."

— Nikolay Shmitchkov, SEOquick podcast on alt tags

And here's an angle that's more important in 2026 than ever before. Alt tags were invented for the blind—but now they have a second "blind" reader:

"Alt tags were made for the visually impaired. But today, neural networks are also 'blind': when AI sees an image, it tries to guess what it is based on the filename or the alt—it rarely renders the image itself to save resources. Therefore, neural networks are the second blind population in this world, and there are far more requests from them to your site than from actual blind people."

In other words, an empty alt isn't just a barrier for someone with a screen reader; it's silence for ChatGPT, Perplexity, and Google AI as they try to figure out what your page is about. We covered how this connects to getting into AI answers in our guide on GEO optimization for GPT.

A good alt describes what's in the image specifically and without fluff. Nikolay’s formula is simple:

"The ideal alt answers a simple question: how would I describe this picture to a friend over the phone to convey its essence? Not 'photo of a coffee cup on a table,' but 'steaming cup of coffee on a wooden table next to an open notebook'—you already visualized that in your head."

Don't use "image," "photo1234.jpg," or a wall of ten keywords. Compare:

A few more rules from the podcast to keep in mind. Stick to around 125 characters—most screen readers cut off reading at that point. Don't start with "image of" or "photo": the bot already knows it's an image, so get straight to the point. If an image acts as a button—a cart icon, a search magnifying glass—describe its function, not its look: not "magnifying glass icon," but "search site." For a chart, convey the main takeaway rather than listing every number: "sales growth chart, +25% in Q3" tells both humans and bots more than a dry list of figures. And a disclaimer for purely decorative images (background patterns, dividers, meaningless icons): leave their alt empty—alt=""—which signals the screen reader to "skip this, nothing important here." So an empty alt isn't always an error; the audit highlights places where a description is actually needed but missing.

Why width and height stop layout shifts

This is a case where two tiny attributes directly affect your rankings. When an <img> tag lacks width and height, the browser doesn't know how much space to reserve for the image before the file loads, so it allocates zero pixels. The text renders first, then the image "arrives," pushes the content aside—and everything jumps down. The user reaches to click a button, but a different element is already under their finger. Google measures these jumps with the CLS (Cumulative Layout Shift) metric from the Core Web Vitals set, and a good score is less than 0.1.

The fix is one line—set the actual dimensions of the original:

<img src="divan-milano.webp" width="1200" height="800" alt="Red leather Milano sofa">

Using these numbers, the browser holds a space with the correct proportions in advance, and the image fits right in without a jolt. You can still use CSS to stretch the width to 100%—modern browsers will maintain the aspect ratio themselves. The audit flags such images with the code img-no-dims, and on pages with dozens of photos, this is the most common source of bad CLS.

Weight and formats: WebP and AVIF instead of heavy JPEG

Heavy images kill speed, and speed is a direct ranking factor and the main contributor to the LCP (Largest Contentful Paint) metric. The cheapest way to lighten a page is to switch formats. According to major Google research, WebP weighs 25–34% less than JPEG at the same quality, while AVIF is about 50% smaller than JPEG and another 20–30% lighter than WebP. Support is no longer an issue: WebP is understood by about 95% of browsers, and AVIF by nearly 94%, including Safari.

The practice is simple. For WebP, keep quality at 75–85; for AVIF, 60–70 is enough—visually it looks like a JPEG at 85, but the file is several times lighter. If you want to serve the lightest format to every browser without risking compatibility, use <picture> with a fallback JPEG:

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" width="1200" height="800" alt="...">
</picture>

The browser will automatically grab the first format it supports: new ones get AVIF, older ones gracefully fall back to JPEG.

Lazy loading: Useful, but not for the first screen

The loading="lazy" attribute delays image loading until the user scrolls to them—and for photos below the fold, it’s pure gold: the page starts faster, and Google explicitly supports this. But there's one trap that costs rankings. You shouldn't put lazy on the main image of the first screen—the one that triggers LCP. According to web.dev measurements, mistakenly lazy-loading an LCP image increases LCP at the 75th percentile from roughly 2.9 to 3.5 seconds, which is a Core Web Vitals fail. The rule is short: anything visible immediately upon opening should be loaded normally (you can even add fetchpriority="high" to the LCP image), and only photos below get lazy.

FAQ

Does alt affect rankings in regular search?
A site almost never ranks in web search directly based on alt text, but it’s exactly what opens up traffic from image search and helps Google and AI systems understand the page context. Plus, it's an accessibility requirement that Google considers indirectly.

Is it mandatory to set width and height if dimensions are already in CSS?
Yes. CSS is applied after the browser starts drawing the page, so it's the attributes in the <img> tag itself that prevent layout shifts. CSS doesn't go anywhere—it manages the display, while the attributes reserve the space.

Which should I choose—WebP or AVIF?
AVIF is lighter and should be placed first in the <picture> tag, leaving WebP as a more compatible fallback before JPEG. For most sites, just converting everything to WebP is enough—that’s already a third of the weight gone without any hassle.

Want to see how many of your pages have images without alt tags or dimensions? Run your site through the free SEOquick audit: it will highlight alt, img-alt-long, and img-no-dims codes page by page. And to speed up your entire site, check out our guide on site speed.