Prepare clear, accessible website images

Choose images that explain the page or support its message. A relevant, readable image is more useful than a large decorative file that slows down the page or distracts from the next step.

Match the image to its purpose

Use a wide composition for a banner and an appropriate crop for a card or portrait. Keep important details away from edges that may be cropped at smaller screen sizes.

For a product screenshot, show the control or result discussed in the text. Avoid including private account, customer or payment details. Place a short explanation beside the image so the step is understandable without relying on the screenshot alone.

Prepare the file

Use a descriptive filename to help you find the asset later. Upload a size suitable for the intended display rather than a much larger original without a reason. Keep a copy of the original if you may need a different crop.

Compare any compressed version with the original. Text in screenshots should remain readable, and product images should retain the details customers need. A smaller file is not an improvement if it makes the image unusable.

Add and check alternative text

Select the image and use its alternative-text setting. Describe the information the image contributes in its context.

For example, “Contact form settings with the recipient email field” is more useful than “image1” or a list of SEO keywords. Do not assume a generated filename is a good description. If the same information is already fully stated nearby, avoid an unnecessarily repetitive description.

Alternative text is different from a visible caption. A caption can explain why the image matters or tell readers what to do next.

Preview the actual layout

Check the page at a narrow and wide width. Verify the crop, any text placed over the image and the space reserved for it. Do not put essential instructions only inside a screenshot or graphic.

If an image appears stretched or unexpectedly cropped, review its sizing settings and source dimensions. See the Image block reference for the available controls.

Publish and review

Save and publish the page, then check the public version. Make sure the intended file loads and its details remain readable. If you replace an image, check any other places where the old asset is still used.

For guidance on image discovery and descriptive alternative text, see Google's image SEO best practices.