Image SEO

Why It Matters

Images are usually the heaviest thing on a page by a wide margin. A photograph straight off a phone can be 4 MB; resized to the width it is actually displayed at and saved as WebP it is often under 150 KB, a cut of well over ninety per cent with no visible difference. That is the gap between a hero that paints in half a second and one that keeps the page above the 2.5-second threshold. Alt text meanwhile does three jobs at once: it is what a screen reader announces, what appears if the file fails to load, and the strongest signal image search has about the subject.

How It Works

A crawler finds images through the img src attribute, through srcset candidates, through CSS backgrounds it sees while rendering, and through an image sitemap if you provide one. It then reads the alt attribute, the file name and the nearby text to work out what the picture is of. Serving the right file per screen is the job of srcset and a sizes attribute, which let the browser fetch a 480-pixel version for a phone and a 1600-pixel one for a monitor. Explicit width and height attributes, or an aspect-ratio in CSS, reserve the space before the bytes arrive so the layout does not jump as each image lands. A static host serves exactly the file you upload at the size you uploaded it, so the sizing decision belongs in your image editor rather than anywhere downstream.

Real-World Example

Common Mistakes

• ✕Packing alt text with keywords — it reads badly to a screen reader user and search engines discount the padding anyway
• ✕Uploading the camera original because the page displays it small — the browser downloads the full file regardless of the CSS width applied to it
• ✕Leaving width and height off the img element — the page then jumps as each picture lands, which is precisely what Cumulative Layout Shift measures

Related Terms