When to use this check
Assess the image’s purpose in its particular location. A repair photo may explain a procedure, decorate a section or act as a link; each use needs a different text alternative.
Know what you are checking.
Image SEO connects the purpose of a visual with its delivery. Informative images need an appropriate text alternative. A decorative image may correctly use an empty alt attribute.
A practical example
<img src="repair.webp" width="960" height="640" alt="Technician replacing a brew-unit seal" />
<img src="decoration.svg" alt="" />A common mistake
Identical alt text on every photo fills an attribute without explaining the images. A static rule also cannot verify that the description is factually accurate.
Understand the result. Make the right change.
When an image needs alt text or an empty alt
The same photograph can explain a procedure or simply decorate an introduction. Write its alternative according to the information that would otherwise be missing here.
- Give an informative image a concise, factual alternative.
- Keep alt="" for a purely decorative image.
- Explain important data from a complex chart in nearby text as well.
How to name an image link or button
When a logo is the only content of a homepage link, its alternative supplies the link’s name. Describing an icon’s colour or shape does not explain a button’s action.
- Check the announced name of a link containing only an image.
- Make the name explain its destination or action.
- Avoid a redundant icon description when adjacent text already names the control.
How to size images without causing layout shifts
A small preview does not need the original multi-megapixel photograph. It still needs to remain clear on a dense display, so evaluate the actual rendered size.
- Provide appropriate responsive variants and an accurate sizes value.
- Reserve space using dimensions or an aspect ratio.
- Check detail and unnecessary transfer size on mobile.
When to use lazy loading for images
An important image in the initial viewport may be the LCP element. Unnecessarily delaying it slows the visible result; assess images further down the page separately.
- Do not automatically lazy-load the main visible image.
- Consider deferred loading for images below the initial viewport.
- Verify the result with Core Web Vitals measurement and the rendered page.
Primary reference: www.w3.org ↗
Frequently asked questions
Does every image need a long, keyword-rich alt attribute?
Alt text depends on purpose. Informative images need a concise equivalent, decorative images usually need empty alt text, and linked images need the destination or function described. Repeated keywords make listening harder. For product variants, describe a visible difference such as color when it matters to the buying decision.
When the task is complete
Check whether the page still makes sense without images. Reserve layout space and verify main-image loading separately; file size alone cannot establish a good LCP result.