Define what each photograph must explain
Imagine a ceramics studio preparing a catalogue of handmade cups. A collection card helps visitors recognise a shape; a product page shows the handle, rim and glaze. Write those purposes into the photography brief. One dramatic table scene may suit the collection but leave the individual cup difficult to judge.
MDN distinguishes changing an image's resolution from choosing a different crop for a layout. For the studio, approve the cup's framing in each placement. Check that the handle remains visible and that a close crop does not imply the photograph shows the entire item. Separate detail photographs can answer questions that a tighter crop cannot.
Agree how one original becomes several useful files
Web.dev explains how srcset and sizes help browsers select from image files using information about their display. Ask the developer to show which file a catalogue card actually downloads on a phone. A small-looking picture should not be accepted as proof that its delivered file is appropriately sized.
Keep the approved original and document how website versions are produced. Automated resizing reduces repetitive work, while manual exports give the editor direct control but add steps whenever a photograph changes. Agree who checks fine glaze detail after processing. Compare candidates at their intended display size before choosing the version to publish.
Keep the catalogue steady while it opens
Web.dev recommends image dimensions or reserved aspect-ratio space to avoid image-related layout shifts. For the ceramics catalogue, watch a row of cards as photographs arrive. The product names and links should remain easy to follow rather than jumping into a different position.
A uniform card shape can make comparison easier, but it also needs an editorial rule for unusually tall or wide pieces. Choose whether to show the full item with surrounding space or prepare another composition. Test a newly added tall vase alongside the cups before approving the reusable template.
Choose which images can wait
Web.dev's lazy-loading guidance supports deferring offscreen images and keeping initially visible images eager-loaded. Map that decision to the actual catalogue layout. The first product view and a long gallery near the bottom serve different moments in a visitor's decision.
Review the gallery while scrolling on a slower connection. Note any blank view that makes a useful comparison difficult, and ask the team to investigate. Removing every extra photograph may make a page lighter while leaving the customer without the detail needed to enquire. Keep images that answer a distinct question.
Make the next catalogue update a rehearsal
Have the regular editor replace one cup photograph using the handover instructions. Review the resulting page together and correct the workflow before the next collection. Keep a short checklist with the approved examples.
- Check the full item and important details in card and product views.
- Confirm the delivered files and transferred sizes on representative phone and desktop layouts.
- Watch the catalogue during loading and after adding an unusually shaped item.
- Scroll through the gallery and confirm each photograph adds useful information.
- Name the person responsible for approving exports, crops and later replacements.