Practical guides

How to choose and prepare website images

A useful image shows an activity, person, place, product or step that the text alone cannot convey as clearly. Select it for the page and the visitor’s question before editing or compressing the file.

Go to the method

Content editor selecting distinct photographs for website pages

Inventory every image placement

Walk through the site as a visitor: home, services, articles, lists, cards, testimonials and social previews. For each placement, record display size, intended subject, current file, owner and approval status. A missing hero or internal-page image is easier to spot in this list than in a folder full of assets.

Mark repeated pictures within one list and generic images used for unrelated subjects. Sharing one photograph across translations of the same page may be sensible; a set of cards comparing different activities usually needs distinct visuals.

  • Placement and purpose of the image.
  • Specific subject and relationship to nearby copy.
  • Rights, credit, version and approval status.

Create a shot list

For each priority page, describe a short scene: who or what appears, the setting, the action or detail and the orientation. Leave enough room for mobile cropping and avoid putting the subject where overlaid text will sit. One shoot can provide a portrait, a working scene, a material detail and a place without repeating the same crop everywhere.

When an image comes from a third party, check publication permission, permitted uses and identifiable people. Do not present an illustrative scene as a real client project or team if it is not one.

  • A page-specific main image.
  • Complementary visuals for cards and process steps.
  • Horizontal or vertical versions to suit the component.

Optimize while retaining useful information

Keep a high-quality source, then export variants for the sizes actually displayed. WebP and AVIF often work well for photographs; a browser should not download a huge image for a small card. Declare width and height to prevent layout shifts, and prioritize the main image visible at first load.

A short descriptive filename, context-specific alternative text and a caption when helpful do more for understanding than stuffing EXIF fields with keywords. Google Search Central calls alt text the most important descriptive image attribute. Review credits and rights before stripping metadata: Google can also use IPTC metadata or licensing structured data.

  • Responsive variants, checked file weight and HTML dimensions.
  • Alt text that describes the image’s role, or empty alt when decorative.
  • Credits and rights information consistent with the permission held.

Check the published result

Open every page on phone and desktop. Check crops, sharpness, text overlays, dark backgrounds, loading errors and whether card images match their destinations. In social previews, the chosen image should represent the page and survive a shorter crop.

Update the inventory when services or campaigns change. It prevents removed pictures returning, credits being lost and main images disappearing from important pages. The prelaunch checklist includes this review in the wider visitor journey.