Publish useful, accessible and lightweight web images
A strong image shows or explains something the text cannot convey as well alone. Relevance, rights, format, file size and the way the image is presented to people and search systems all matter.
What to remember.
- Give every important page a representative image with a clear purpose.
- Deliver suitable sizes in HTML and describe meaningful images in context.
- Record rights and check mobile crops, file weight and missing assets before release.
Choose the image for its role
A primary image should represent its page; a card image should help people recognise the destination; a screenshot should show the actual step being explained. Avoid generic visuals interchangeable across unrelated topics. Closely related pages deserve distinct primary images. Size variants of one asset serve different screens on the same page, while mobile crops must preserve the important subject.
Prepare files for their display size
Export dimensions close to the intended display and provide a smaller version for narrow screens. Compare the result at its real size before reducing quality further. WebP and AVIF can reduce transfer, but choose by visual quality and the compatibility needed. Give files short descriptive names. Keep subject, author or licence, review date and restrictions in an editorial asset register. Embedded metadata can help asset management but may be stripped in processing.
Make images discoverable without slowing the page
Put important images in an img element, optionally inside picture, with a fallback src URL. Search engines do not treat CSS background images in the same way. Declare width and height to reserve space. Prioritise a main image visible at the top of the page; defer images lower down. Confirm the intended mobile file is served and remains legible. An image sitemap can help discovery but cannot replace useful page content.
Write alternative text for the actual context
Alternative text communicates the useful information conveyed by an image; it is not a list of keywords. Describe an editorial image briefly in relation to the page. When an image is a link, communicate its destination if adjacent text does not already do so. A purely decorative image can have empty alternative text. Put the image near relevant copy and use a caption when source, method or context needs more room.
Check provenance and permission
Before publishing, identify the source, rights holder and permitted uses. Being discoverable online does not grant permission to reuse a picture. Review applicable consent for identifiable people and show required credits where readers can find them. For a third-party logo, prefer an official asset and verify it represents the named organisation. Never pass a neutral badge off as an official mark.
Review rendering and maintenance
Open key pages on large and small screens, checking heroes, lists and cards. Find missing files, misleading crops, unjustified duplicates and absent alternatives. Check dimensions, transferred weight and layout movement. After publication, relate image and page performance to the purpose of the page: an indexed image without useful visits, or a fast page with a misleading visual, is not a complete success.