Image SEO optimizationWhat it checks and how to fix it

What it checks

Looks at the images in the page content (outside nav, header and footer) for four things: width and height attributes, a descriptive file name (not IMG_1234, DSC_, image1, screenshot, a UUID or a hash), a srcset or <picture>, and a loading attribute. Fails when any file name is non-descriptive or more than half the images lack dimensions, warns on smaller gaps and passes when every image has all four.

Why it matters

Images without dimensions make the layout jump as they load, which hurts Cumulative Layout Shift and Core Web Vitals. Images without srcset ship desktop-sized files to phones, and without a loading attribute offscreen images compete with the content above the fold. A descriptive file name is one of the few signals image search has about what a picture shows.

How to fix it

Name files after what they show, declare their intrinsic size, offer several widths and lazy-load images below the
fold (keep loading="eager" for the main image at the top).

<img src="/images/dmarc-report-dashboard-800.webp"
     srcset="/images/dmarc-report-dashboard-400.webp 400w,
             /images/dmarc-report-dashboard-800.webp 800w,
             /images/dmarc-report-dashboard-1600.webp 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="800" height="450"
     loading="lazy"
     alt="DMARC aggregate report dashboard">

In Rails:

<%= image_tag "dmarc-report-dashboard-800.webp",
      srcset: { "dmarc-report-dashboard-400.webp" => "400w", "dmarc-report-dashboard-800.webp" => "800w" },
      sizes: "(max-width: 800px) 100vw, 800px",
      width: 800, height: 450, loading: "lazy", alt: "DMARC aggregate report dashboard" %>