Image SEO in 2026: Alt Text, AVIF, Lazy Loading & Core Web Vitals

The short answer

Image SEO is the set of practices that make your images fast to load, understandable, and discoverable in search. Four of them move the needle most: serve a modern format (AVIF first, with WebP and JPEG fallbacks), stop images from slowing or shifting the page by setting width and height and loading behaviour correctly, write alt text that genuinely describes the picture, and give files descriptive names.

Fix the format and loading first. That is the part Google measures as a ranking signal, through Largest Contentful Paint and Cumulative Layout Shift. Alt text and filenames add context and open up Google Images, but they will not rescue a page that takes six seconds to paint.

Serve AVIF or WebP, never a raw multi-megabyte JPEG.
Never lazy-load the hero or LCP image. Lazy-load everything below the fold.
Set width and height on every image to stop layout shift, and write alt text for meaning, empty alt for decoration.

Modern Formats: AVIF and WebP

The single biggest win in image SEO is almost always the format. A photo exported straight from a camera or a stock library can weigh several megabytes. The same image as AVIF, sized for the slot it fills, can be a fraction of that with no visible difference. Smaller files paint sooner, and sooner is what Core Web Vitals reward.

Format	Typical size	Browser support	When to use it
JPEG / PNG	Baseline	Universal	Only as the final fallback in a picture element, or where a tiny PNG is genuinely smaller.
WebP	About 25 to 35% smaller than JPEG	Effectively universal in current browsers	A safe default and the first fallback after AVIF. Good quality at a real size saving.
AVIF	About 30 to 50% smaller than JPEG	Broad, not yet universal	Serve first for photos and complex images. Offer WebP and JPEG below it for older clients.

The pattern that covers every browser is the picture element. You list the modern sources in order of preference, and the browser downloads the first one it understands:

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Team reviewing a quarterly traffic chart"
       width="1200" height="675" />
</picture>

Notice the width and height on the fallback img. They are not cosmetic. They let the browser reserve space for the image before it arrives, which is how you avoid the layout jump that Cumulative Layout Shift punishes. For images that appear at different sizes on phones and desktops, add srcset and sizes so the browser can also pick the right resolution rather than shipping a desktop file to a phone. Our guide to improving Largest Contentful Paint covers the preload and priority tricks for the one image that matters most.

Google's John Mueller walks through how images are found and ranked in Google, and the practices that help: descriptive filenames and alt text, placement near relevant text, and image sitemaps.Video: SEO for Google Images by Google Search Central. Loads from YouTube only when you press play.

Alt Text and Filenames: Context Google Can Read

Once an image loads fast, the next job is to tell Google and assistive technology what it shows. Alt text does most of that work, with the filename as a smaller supporting signal.

Alt text that actually helps

Describe, do not label. Say what the image shows in context, as if to someone who cannot see it.
Keyword only when true. Include a term when it genuinely matches the picture, never as a forced stuffing.
Decorative means empty. Use alt="" on pure design elements so screen readers skip them.

Filenames and Google Images

A descriptive filename such as organic-traffic-by-month.avif gives Google more to work with than IMG_4821.jpg. Rename at export, where it is free, rather than retrofitting old URLs.

Google Images is a separate traffic channel that shows up in Search Console as the Image search type. Descriptive filenames, good alt text, placement near relevant text and an image sitemap are what help pictures rank there.

Lazy Loading: The One LCP Exception

Lazy loading defers off-screen images until the reader scrolls near them. In modern browsers you get it with a single attribute, loading="lazy", no JavaScript required. It saves bandwidth, and Google renders and indexes lazy-loaded images without any penalty.

There is exactly one image you must not lazy-load: the one above the fold that is your Largest Contentful Paint element, usually the hero. Deferring it tells the browser to wait before fetching the very thing Google is timing, which pushes LCP later and worsens your Core Web Vitals. For that image, use loading="eager" or leave the attribute off, and consider a fetchpriority="high" hint so it loads first.

The common mistake: a plugin or framework adds loading="lazy" to every image automatically, including the hero. The fix is to exclude the first in-view image. The good LCP target is 2.5 seconds or less, and a lazy-loaded hero routinely blows past it.

A Worked Example

Illustrative scenario, not client data

A blog post opens with a 3.8 MB JPEG hero, 3000 pixels wide, shown in an 800 pixel column. The template lazy-loads every image. On a mid-range phone the hero takes about 5 seconds to paint, so LCP fails, and the layout jumps as the image finally arrives, so CLS fails too. Here is the fix, in order.

Right-size and convert: export the hero at the width it is actually displayed, as AVIF with a WebP fallback. The file drops from 3.8 MB to roughly 90 KB.
Stop lazy-loading it: remove loading="lazy" from the hero and add fetchpriority="high". It now starts downloading immediately.
Reserve its space: set width and height so the browser holds the slot and nothing shifts.
Keep lazy for the rest: every image further down the article keeps loading="lazy", so they cost nothing until the reader reaches them.

The same four moves apply whether you run one site or fifty. LCP lands under 2.5 seconds, CLS settles near zero, and the page is now tens of kilobytes instead of several megabytes, which also helps every visitor on a slow connection.

See which images actually earn clicks.

Murkuz connects Google Search Console, Analytics 4 and Bing Webmaster Tools to Claude or ChatGPT. Ask "which pages and queries bring my Google Images traffic, and where did it drop?" and Search_Analytics returns the rows from the Image search type. It reads your data through the official API. It does not touch your site.

See the Search Console connector

Frequently Asked Questions

What is the best image format for SEO in 2026?

AVIF is the strongest general-purpose format for web photos in 2026. It is typically 30 to 50 percent smaller than a JPEG at the same visual quality, which directly helps the page load faster. Browser support is now broad, but it is not universal, so the safe pattern is a picture element that offers AVIF first, then WebP, then a JPEG or PNG fallback. The goal is not the format badge itself. It is a smaller file that paints sooner, because that is what Google measures through Largest Contentful Paint.

How do I write good alt text for SEO?

Describe what the image shows and why it is on the page, the way you would describe it to someone who cannot see it. Be specific and natural: a chart of monthly organic clicks is better described as that than as a generic keyword string. Include a keyword only when it genuinely matches the picture, never as a forced insertion, and keep it concise, usually under about 125 characters so screen readers are not overwhelmed. Alt text is read by assistive technology and used by Google to understand the image, so writing it well serves both accessibility and search.

Should decorative images have alt text?

No. If an image is purely decorative and adds no information, give it an empty alt attribute, written as alt equals two quotation marks with nothing between them. That tells screen readers to skip it instead of announcing a filename or a meaningless description. Reserve descriptive alt text for images that carry meaning, such as product photos, diagrams, screenshots and charts. Omitting the alt attribute entirely is not the same thing: browsers then fall back to the filename, which is worse than a deliberate empty value.

Is lazy loading safe for SEO?

Yes, when you apply it to the right images. Adding loading equals lazy to images below the fold defers them until the reader scrolls near them, which saves bandwidth and helps the initial load. Google renders and indexes lazy-loaded images correctly, so it does not hurt rankings. The one rule that matters: never lazy-load the image that is above the fold or is your Largest Contentful Paint element, because that delays the very paint Google is timing and will make your Core Web Vitals worse.

Do image file names affect SEO?

Yes, as a small but real signal. A descriptive name like organic-traffic-by-month-chart.avif gives Google more context than IMG_4821.jpg, and Google's own image documentation recommends descriptive filenames. The effect is minor next to alt text, placement and page relevance, so rename files where it is cheap to do, such as at export time, rather than retrofitting thousands of old URLs and risking broken links.

How do images show up in Google Images, and is that traffic worth it?

Google Images is a separate surface that can send real visitors, and in Search Console it appears as the Image search type. Google finds your images from the page they sit on, so the fundamentals are the same: a descriptive filename and alt text, placement next to the relevant text, a fast-loading modern format, and inclusion in an image sitemap for large libraries. Whether it is worth pursuing depends on your topic. Visual niches such as recipes, products, travel and design tend to earn far more from Google Images than text-heavy B2B pages do.

Do width and height attributes matter for image SEO?

They matter for Cumulative Layout Shift, which is one of the three Core Web Vitals. When you set the width and height attributes on an image, the browser reserves the right amount of space before the file downloads, so surrounding content does not jump as the image appears. That jump is exactly what CLS measures. Set width and height (or an equivalent aspect-ratio in CSS) on every content image, and pair it with responsive srcset and sizes so the browser can also pick the right file for the screen.

Written by Junaid Khalid

CEO & Founder, Ertiqah (Murkuz). Updated October 15, 2026.

Image SEO in 2026: Every Pixel Counts