Image SEO: WebP, Alt Text, Lazy Loading, Dimensions

Quick Answer

The three image SEO essentials: (1) use WebP or AVIF format and compress files to under 200 KB, (2) set width and height attributes on every <img> tag to prevent layout shift, (3) write descriptive alt text for screen readers and search engines. For below-the-fold images, add loading="lazy" . These three habits applied consistently solve the bulk of image SEO problems on a static website.

Images are the heaviest thing on most websites. Get them right and your website stays fast. Get them wrong and your 200 KB of HTML loads behind 8 MB of unoptimized photos. Here's what to do, in priority order.

Use WebP (or AVIF) for photos

For photographs and complex images, WebP files are roughly 30% smaller than JPEG at the same quality. AVIF is even smaller but slightly less supported. Use one of them. PNG is fine for graphics with sharp edges or transparency. SVG is best for logos and icons.

Convert your images before uploading. Tools that work in the browser:

Squoosh (Google, free, drag and drop)
TinyPNG (handles WebP and PNG)
cwebp command-line tool if you're processing many images at once

Aim for under 200 KB per image for content photos. Hero images can be up to 500 KB if they need to be high quality. Anything over 1 MB is almost always too big.

Always set width and height

If you don't tell the browser how big an image will be, the page layout shifts when the image loads. That shift is called Cumulative Layout Shift (CLS), one of Google's Core Web Vitals. Setting width and height on every image fixes it.

<img src="mug.webp"
 width="800"
 height="600"
 alt="Blue speckled stoneware coffee mug on a wooden shelf">

The values are the actual pixel dimensions of the file. You can still resize the image with CSS; these attributes just tell the browser the aspect ratio so it can reserve the space.

Write alt text that describes the image

The alt attribute is text that:

Screen readers announce for blind users
Browsers display if the image fails to load
Search engines use to understand what the image is

Rules:

Describe what's actually in the image, briefly
Don't start with "image of" or "picture of." Screen readers already announce that it's an image.
Keep it under 125 characters
For purely decorative images (a divider, a background pattern), use alt="" (empty alt). This tells screen readers to skip it.

Bad: alt="mug"

Bad: alt="image of a beautiful handmade ceramic mug for sale buy now"

Good: alt="Blue speckled stoneware coffee mug with a curved handle"

Lazy-load below-the-fold images

Add loading="lazy" to images that aren't visible when the page first loads. The browser then waits to download them until the user scrolls close to them.

<img src="gallery-1.webp"
 width="800" height="600"
 alt="Three pottery wheels in a studio"
 loading="lazy">

Don't add loading="lazy" to your hero image or anything visible on first load. That delays the largest contentful paint and hurts performance.

Use responsive images for big ones

If you have a hero image that displays at 1600px on desktop and 400px on mobile, serving the 1600px version to a phone wastes bandwidth. The srcset attribute lets the browser pick the right size.

<img src="hero-800.webp"
 srcset="hero-400.webp 400w,
 hero-800.webp 800w,
 hero-1600.webp 1600w"
 sizes="(max-width: 600px) 400px,
 (max-width: 1200px) 800px,
 1600px"
 width="1600" height="900"
 alt="Sara at the pottery wheel">

You'll need to export the image at three sizes and upload all three. The browser handles the rest.

File names matter, a little

IMG_4823.jpg tells Google nothing. blue-speckled-coffee-mug.webp tells Google what the image is. The effect is small but free. Rename files before uploading.

Where images go on static.app

Convention is an images/ folder at the root of your project. The URL of an image at images/mug.webp is yoursite.com/images/mug.webp . Reference it from any HTML file with <img src="/images/mug.webp"> .

The three-thing image rule

WebP. Width and height set. Real alt text. If you do those three on every image, your image SEO is fundamentally solved. Everything else is refinement.

Frequently Asked Questions

What's the best image format for SEO in 2026?

WebP for photographs (about 30% smaller than JPEG at the same quality). AVIF for even smaller files where browser support is fine. SVG for logos, icons, and any geometric graphic. PNG only when you need transparency and can't use WebP.

How much should I compress images?

Aim for under 200 KB per content image, up to 500 KB for hero images that need high quality. Anything over 1 MB is almost always too big. Use Squoosh or TinyPNG to compress without visible quality loss.

Should I use lazy loading on all images?

No. Lazy load below-the-fold images (with loading="lazy" ) but never your hero image or anything visible on first load. Lazy-loading the largest contentful paint element delays it and tanks your Core Web Vitals score.

Does the image filename matter for SEO?

A little. IMG_4823.jpg tells Google nothing; blue-ceramic-mug.webp tells it the image content. The effect is small but free, so rename images before uploading.

How do I add alt text to background images?

You can't directly. CSS background images aren't accessible to screen readers or to Google in the same way. If the image is meaningful content, use an <img> tag instead. If it's purely decorative, a CSS background is fine and no alt is needed.