Estimated reading time : 5 min
Check an image in its actual placement
A usable file can become misleading after cropping, or too heavy for its display size. Check meaning, rights, framing and served variants together.
- Source and rights
Identify the author, permission and real or illustrative nature.
- Role on the page
Establish what information the image contributes.
- Displayed frame
Inspect the retained subject on phones and large screens.
- Served version
Check dimensions, size and alternative text in the published context.
Open the situation you want to check
The important subject disappears inside a card
- What is known
- Cropping has changed what the reader can observe.
- The next check
- Adjust the focal point, format or chosen image; check each placement rather than approving only the source file.
The photograph is decorative in this placement
- What is known
- It may not contribute additional information.
- The next check
- Choose its alternative according to that specific role. The same image can be informative on another page.
A generated scene resembles completed work
- What is known
- The visual alone does not prove that work or a place exists.
- The next check
- Identify illustrative material and use documented photography when the page needs to show work actually completed.
Both displays use the same source file. Filling the frame changes what remains visible; inspect the important details before choosing the crop. For another subject, the central crop may be unsuitable.
Illustrative photograph : Vadim Bozhko / Unsplash · Licence.
Illustrative checks to adapt to your system. This page performs no operation on your website. Technical reference : W3C WAI · Images · Consulted 15 October 2026.
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.
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
Reference documents
Content updated on