Account
All guides

Image SEO guide

Image SEO and Core Web Vitals: the parts that actually move numbers

An honest image SEO checklist: dimensions and srcset, LCP priority, lazy loading, format choice, and compression budgets that move Core Web Vitals.

Updated by Tinify.dev

Most image SEO advice is padding: rename your files, stuff keywords into alt text, sprinkle schema everywhere, and somehow rankings follow. The honest version is shorter. Images affect search primarily through page experience - Core Web Vitals - and through basic discoverability. A handful of technical items move those numbers; the rest is decoration.

Here is the checklist, ordered by impact, with the reasoning attached so you can skip items that do not apply to your site.

1. Serve images at the size they display

The most common image problem is dimensional, not compressional: a 2400px-wide original rendered in a 400px card. The browser downloads six times the pixels it paints - and no format choice or quality setting recovers that waste.

  • Resize masters to the largest size each slot actually displays. The resize tool handles batches of 50.
  • Use srcset and sizes so browsers pick an appropriate variant per viewport instead of downloading the desktop image on a phone.
  • Crop before resizing when the design shows only part of the image - pixels outside the crop are pure overhead (crop tool).

Our responsive images guide covers the srcset mechanics in detail.

2. Fix the LCP image specifically

Largest Contentful Paint is the Core Web Vital images most often control, and it is usually one image - the hero. General optimization helps; targeting that one file helps more:

  • Never lazy-load it. loading="lazy" on the LCP image delays the metric directly. This remains one of the most common self-inflicted wounds in the wild.
  • Raise its priority with fetchpriority="high" on the img element, and consider a <link rel="preload"> when the image is late in the HTML.
  • Compress it hardest. This single file justifies more effort than any other asset - test formats, compare qualities, spend the ten minutes. See web.dev's LCP guidance for the full treatment.

3. Lazy-load everything below the fold

For every image that is not near the initial viewport, loading="lazy" is a one-attribute win: less initial bandwidth, faster main-image loading, no JavaScript required. Browser support has been universal for years - MDN documents the details.

4. Set width and height to prevent layout shift

Cumulative Layout Shift is the other image-driven vital. An img without dimension attributes reserves no space, so content jumps when it loads. Set width and height (the intrinsic values - CSS still controls the display size) and the browser reserves the slot in advance. This costs nothing and fixes a whole category of CLS.

5. Choose formats by content, not fashion

  • Photographs: AVIF, with WebP or JPEG fallback where non-browser consumers matter.
  • Screenshots and UI graphics: WebP, lossless when text sharpness matters.
  • Logos and icons: SVG when they are genuinely vector.

The AVIF vs WebP comparison has the detailed reasoning, and the convert tool does the work. One caution from that article worth repeating: conversion is not automatically compression - verify the new file is actually smaller.

6. Compress with a number in mind

After sizing and format, compression is the remaining lever. Two approaches:

  • Default: run everything through the compressor at the balanced setting. It aims for the point where extra bytes stop buying visible quality, and it never returns a larger file than the input.
  • Hard budgets: when a page's image weight needs a ceiling, give each image a byte target - the target size feature finds the best quality that fits a stated limit instead of making you guess.

As a rough discipline, question any content image over 200 KB and any hero over 500 KB. Those are review thresholds, not rules - a photography portfolio has different needs than a documentation site.

7. Write alt text for people

Alt text exists for accessibility; search engines read it as a side effect. Describe what the image shows, in one sentence, the way you would to someone who cannot see it. Keyword-stuffed alt text reads as spam to users of assistive technology first and to crawlers second. Decorative images get an empty alt="" so screen readers skip them.

The parts that barely matter

For honesty's sake, items you can deprioritize:

  • Keyword-rich file names. Fine as a habit, roughly irrelevant as a ranking factor. hero-mountain-sunrise.avif beats IMG_4032.avif mostly for your own maintenance.
  • Image sitemaps - useful for image-search-dependent businesses (stock photos, recipes, products), noise for everyone else.
  • EXIF metadata. Strip it for privacy and bytes; do not expect ranking effects.

The checklist, compressed

  1. Resize to display dimensions; add srcset.
  2. Find the LCP image: no lazy loading, fetchpriority="high", compress it hardest.
  3. loading="lazy" below the fold.
  4. width and height on every img.
  5. Format by content type.
  6. Compress everything; use byte targets where limits exist.
  7. Alt text for humans; alt="" for decoration.

Items one, two, and six are where the measurable movement lives. Run your pages through PageSpeed Insights before and after - if the image work mattered, LCP and CLS will say so, and if they do not say so, you are done and can stop optimizing images on someone else's checklist, including this one.