Image files, dimensions, and lazy src

Alt text says what an image is. These checks are about whether the file itself can load, whether the page reserves space for it, and whether the address is in src.

What we look for

On an indexable HTTP 200 page we look at images that are not hidden, not tracking pixels, and not SVG icons. Login, cart, and similar paths are left alone.

• File did not load. Up to eight informative JPG, PNG, WebP, AVIF, or GIF images that already have alt text. We request each URL. This opens when the first response is 4xx or 5xx, except 403. A redirect or a timeout is not flagged.
• Missing width and height. The same kind of image, when both attributes are missing. Empty alt is left alone, because that image is decorative.
• URL only in a lazy attribute. src is empty, a data URL, or a placeholder, and data-src (or a similar attribute) holds the real http URL. loading="lazy" on a real src is left alone.

What to do

Point src at a file that returns HTTP 200. Set width and height to that file’s pixel size so the text below does not jump. Keep loading="lazy" if you want the browser to wait, but do not hide the only address in data-src.

Example

On /guides/leather-care, the tote photo should name the file, its size, and a real src:

<img src="data:image/gif;base64,AAAA" data-src="/images/leather-tote-front.jpg" alt="Brown leather tote">

<img
  src="https://example.com/images/leather-tote-front.jpg"
  alt="Brown leather tote bag with brass handles on a white background"
  width="800"
  height="600"
  loading="lazy"
>

Technical note

Each row lists the image URL. A file that did not load also lists the HTTP status. We do not request every icon on the page. Alt text stays on its own checks.