A camera file is a master asset, not automatically a good website upload. It may contain far more pixels than the page displays, an awkward crop, or a filename that says nothing about its contents. Prepare a web version while keeping the original.
Begin with the place the image will appear. A wide homepage banner and a square product card need different crops even when they use the same photograph.
Choose the crop before compression
Check the desktop and mobile layouts. Keep the subject visible in both, especially when text or controls sit beside the image. If one crop cannot serve both layouts, ask the developer whether separate responsive images are appropriate.
For product photographs, preserve the complete item unless the image is clearly a detail view. Cropping off a handle or mounting point can remove information customers need. Plan the views with the product photography shot list.
Export for the displayed size
Prepare suitable dimensions for the image’s role and the screens it will serve. Avoid using one enormous file for every thumbnail. Where the website supports responsive image sources, let the browser choose from appropriate sizes.
Compare exports visually at their intended display size. Compression that makes fabric, labels, or edges unreadable defeats the purpose of the photo. There is no single file-size target that makes sense for every image.
Google’s image guidance supports balancing quality and loading performance, using descriptive filenames, and providing relevant alternative text. The practical export settings still depend on your own images and layout.
Name the file and describe its role
Use a concise filename such as “blue-canvas-tote-side” instead of a camera sequence. Keep a naming convention for variants and angles so future uploads do not overwrite the wrong asset.
Alternative text should communicate the image’s useful information in context. “Blue canvas tote with exterior zip pocket” may help on a product page. Repeating a sales keyword list does not. Decorative images may need empty alternative text; the W3C decision tree helps distinguish image purposes.
Verify the page after upload
Open the live or preview page on a phone and desktop. Check that the image is sharp enough, the subject is not cut off, and the layout does not jump unexpectedly as it appears. Ask the developer to reserve image dimensions and review loading behavior where needed.
Finally, confirm that replacing an image has not changed a product variant or left an outdated caption. Keep the master and exported versions in clearly named folders. A repeatable preparation step saves time when the next catalog or portfolio update arrives.