Image SEO Checklist: Alt Text, Dimensions, and Everything Around the File

Compressing an image well is one part of image SEO. The rest happens in the markup and the delivery, and it is where most of the measurable impact lives — particularly for Largest Contentful Paint, which on content pages is usually an image.

Alt text: describe the function, not the picture

Alt text has two jobs: replace the image for screen reader users, and tell search engines what the image contains. The same text serves both if you describe why the image is there.

Informative image — describe the content: "Bar chart showing 40% of respondents preferred dark mode."
Functional image (a linked icon) — describe the action, not the glyph: "Search," not "Magnifying glass icon."
Decorative image — use an empty alt attribute, alt="". This tells screen readers to skip it. Omitting the attribute entirely is different and worse: some readers fall back to announcing the filename.
Image containing text — repeat the text. If the text is important enough to be in an image, it is important enough to be in the alt.

Keyword stuffing in alt text is both an accessibility failure and a ranking risk. Write the sentence you would say aloud to describe the image.

Always set width and height

Omitting dimensions means the browser cannot reserve space before the image loads, so the page reflows when it arrives. That is Cumulative Layout Shift, and it is a ranked Core Web Vital.

Set the intrinsic dimensions as attributes and let CSS handle the display size:

<img src="hero.webp" width="1600" height="900" alt="..." style="width:100%;height:auto">

Modern browsers use the ratio from those attributes to reserve the correct box even when CSS resizes the image. The height:auto in CSS is required, otherwise you override the ratio.

Lazy loading: yes, but not above the fold

loading="lazy" defers offscreen images and is close to free. The mistake is applying it globally: lazy-loading the hero image delays your LCP element, which is exactly backwards.

The rule:

Above-the-fold hero → loading="eager" plus fetchpriority="high"
Everything else → loading="lazy"

Serve the right size, not one size

A single 2400px-wide file served into a 400px column wastes most of the bytes it downloaded. Use srcset so the browser picks:

<img srcset="photo-800.webp 800w, photo-1600.webp 1600w" sizes="(max-width: 768px) 100vw, 800px" src="photo-800.webp" alt="...">

sizes is the part people get wrong — it describes how wide the image will be rendered, not the file size. Get it wrong and the browser downloads the wrong candidate.

For format negotiation, wrap in <picture> with a WebP source and a JPEG fallback. If your audience is entirely on current browsers, serving WebP directly is simpler.

Filenames and surrounding context

Filenames are a weak signal but a free one. blue-ceramic-mug.webp beats IMG_4821.webp. Use hyphens; underscores are treated less reliably as word separators.

Surrounding text matters more than the filename. Search engines read the caption, the heading above, and the paragraph around the image to understand it. An image dropped into a wall of unrelated text has little to be indexed against.

Captions in a <figcaption> are visible to users and machine-readable. If a caption would help a reader, add it.

A pre-publish checklist

Resized to the largest display size actually needed, times two for high-DPI
Cropped to the aspect ratio the layout expects, so CSS is not doing the cropping
Compressed and visually checked at 100% zoom
Served as WebP where possible
width and height set, with height:auto in CSS
Descriptive alt text, or explicit alt="" if decorative
loading="lazy" on everything except the LCP image
Descriptive, hyphenated filename
Included in your sitemap if images drive traffic for you

Steps 1 through 4 are where the byte savings are; 5 through 7 are where the Core Web Vitals impact is.

Try it

Image Cropper — crop to the layout's ratio before export
Image Compressor — reduce size with a visible before/after comparison
Format Converter — export WebP for delivery

Related reading: How Image Compression Actually Works explains why resizing beats the quality slider, and Aspect Ratio Cheat Sheet covers picking the ratio in step 2.