How to choose and prepare website images

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.

Fictional exercise: a 1,600 × 900-pixel source is placed in a 480 × 480 CSS-pixel square with centred alignment. With contain, the complete image occupies 480 × 270 pixels, leaving 105-pixel bands above and below. With cover, the frame shows a central 900 × 900-pixel source area, retaining 56.25% of its width.

cover fills the frame while preserving proportions, at the cost of cropping; fill can distort the image. object-position moves the retained area without changing those proportions. If an essential detail remains outside the frame, prepare a suitable crop, possibly selected with picture. Review the alternative text too: it should not describe a detail no longer visible.

• 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.

Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.

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.

Choose for the image’s role

A photograph needs controlled compression; a diagram can remain vector artwork to preserve detail. Supply variants for displayed width and inspect the mobile download. A modern format cannot fix excessive dimensions or a crop removing the useful subject.

Retain source, author, licence and attribution conditions for third-party photographs. A generated photograph illustrates a subject; it does not prove a location, team or completed project. Alternative text conveys useful information; provenance and credit belong in associated visible text.

Check the useful crop

Proposed case: a product image looks correct on desktop, but a variant's distinguishing detail disappears on a phone. The file exists; its purpose is no longer met.

Compare the original and actual placements. Keep a capture per format with visible subject, alternative text and selected variant; file size alone cannot settle the review.

• Identify the essential detail
• Compare card and detail page
• Keep captures at tested sizes

• Compare loading conditions

  Improve website performance page by page

Estimate variant width without sending the original everywhere

For a raster image, multiply displayed width in CSS pixels by the target density to estimate a file width. These calculations assume a large enough source and the same crop. Enlarging a small original does not recreate missing detail.

Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.

• WHATWG · HTML · Images

  This helps prepare candidates; it does not independently predict the file selected by the browser. Check srcset, sizes, the actual loaded file and the crop. The HTML standard distinguishes density, display width and art direction.