Image optimization: from Core Web Vitals to AI recognition

Why image optimization is more than choosing a file format

I have a confession to make. For years, when I thought about image optimization, I only thought about file size. WebP instead of JPEG, crank up compression, adjust dimensions. Done. On to the next problem.

But I only had half the picture.

Images also communicate context. To search engines, to screen readers, to AI models. How you provide that context (alt texts, structured data, filenames) is at least as important as file size. Perhaps more so.

At Kobalt we regularly see websites where images are technically fine: small files, WebP format, lazy loading in the right places. But the alt texts? "image1.webp". Or completely empty. For a human visitor that matters little. For an AI crawler, the alt text is often the only way to understand what is in that image.

Modern formats: WebP and AVIF

Let me cover the basics. Because I still encounter sites serving full 3 MB PNGs. In 2026. It makes me a little despondent.

• WebP: the modern standard. Widely supported, typically 25 to 35 percent smaller than JPEG at comparable quality.
• AVIF: even smaller than WebP (20 to 30 percent), but the encoder is slower and some older browsers struggle with it.
• SVG: for icons, logos and illustrations. Infinitely scalable and small. Use this wherever you can.
• Use the `` element: AVIF as primary, WebP as fallback, JPEG as safety net. That way you cover everything.

Largest Contentful Paint: the image that matters

LCP is the Core Web Vital most affected by images. It measures how long it takes for the largest visible element in the viewport to load. On most sites that is a hero image.

And this is where I sometimes worry. Because I see sites that lazy load their hero image. The image that most determines the speed experience for the visitor. They load it last. That is like opening the entrance to your shop only after the customer has been standing at the door for fifteen minutes.

1. Preload your LCP image. A `` in the `` gives the browser an early signal.
2. Absolutely do not use lazy loading on the LCP image. This is the most common mistake I encounter.
3. Store the LCP image on a CDN close to your visitors.
4. Always include `width` and `height` attributes in the HTML. Prevents Cumulative Layout Shift while the image loads.

Alt texts as a bridge to AI understanding

This is where it gets really interesting. Alt texts were originally intended for accessibility. Screen readers read them aloud. But they also play a crucial role in how AI models understand images.

"Photo of laptop" is a bad alt text. "Laravel Artisan command running database migrations in the terminal" is a good one. That difference is not only relevant for blind visitors. It is the context an AI crawler uses to understand what your page covers.

Decorative images (background textures, ornamental lines) get an empty alt attribute: `alt=""`. That explicitly tells screen readers and crawlers: this image carries no substantive information. That is just as important as a good alt text on a content image.

Structured data: make it explicit

Schema.org offers ImageObject schema to annotate images. What is in it? Who holds the rights? How does the image fit the page context? For products, recipes and articles, an associated image is even required for Google's Rich Results.

Images are not decoration. They are content. Treat them as such: with descriptive alt texts, correct format, proper dimensions and structured data. Curious how your images score? Take the free AEO scan and see for yourself.

Frequently asked questions