An image must be reachable, meaningful, and appropriately described
Use standard HTML image elements with stable URLs, correct response headers, intrinsic dimensions, and responsive sources. Write alt text for the image’s purpose, use empty alt for decoration, and avoid hiding important information only inside an image.
- Return actual image bytes with 200 and the correct image Content-Type.
- Use informative alt text for meaningful images and alt="" for decorative ones.
- Declare width and height to reserve layout space.
- Keep a usable img src fallback when using picture, srcset, or lazy loading.
Discovery and delivery
Standard img elements and their src URLs are the most robust discovery path. CSS background images are not equivalent for image indexing or accessibility, and client-only URLs may depend on rendering.
Follow redirects to a stable HTTPS asset, verify that it returns an image media type rather than an error document, and ensure anonymous crawlers are not blocked by authentication, robots rules, or hotlink protection.
Alternative text is contextual
- Informative image Describe the useful visual information concisely in the surrounding context.
- Functional image Describe the action or destination when an image is the only content of a control or link.
- Decorative image Use an empty alt attribute so assistive technology can ignore it.
- Complex image Provide a short alt plus a nearby detailed explanation or data equivalent.
Responsive and performant images
Set intrinsic width and height or an aspect ratio to reduce layout shifts. Provide appropriately sized variants through srcset and sizes, with a normal src fallback and modern formats only where clients can degrade gracefully.
Lazy-load below-the-fold media, but do not delay the likely hero image unnecessarily. Compress to the visual quality required and test the final resource rather than trusting the filename extension.
Repair images from response to meaning
- 01Fix broken, redirected, non-image, and mixed-content URLs.
- 02Classify each missing or empty alt by the image’s purpose.
- 03Add intrinsic dimensions and responsive candidates.
- 04Keep important images in discoverable HTML with a src fallback.
- 05Retest performance and accessibility on representative pages.
Official references
The technical recommendations in this guide are aligned with these primary sources.