For a business website, choose image dimensions from the space the picture will occupy, the detail buyers need and the crop on a phone. Keep the original file, then make web versions for the agreed layout. A single rule such as “make every image 2,000 pixels wide” will waste some files and leave other pictures poorly framed.
This guide helps an owner prepare product, premises and service photographs for a designer. The aim is a usable image handover and a clear acceptance check, without needing to learn an image editor.
Separate pixels, shape and download size
Pixel dimensions describe the source image: for example, 1,600 × 900 pixels. Aspect ratio describes its shape; that example is 16:9. File size, measured in KB or MB, describes how much data the browser downloads. Changing one does not settle the others.
An illustrative calculation: if a picture occupies 800 CSS pixels across, a 1,600-pixel-wide source can provide two image pixels per CSS pixel. That is a planning example, not a required export size. web.dev explains how display density affects source selection. The actual layout and device determine what is useful.
Ask the designer for the intended shape and largest display size before exporting. A wider source cannot rescue a crop that cuts the product in half. A tiny file is also a poor result if its labels become unreadable.
Prepare originals around the job each picture does
Keep an untouched original folder and a separate folder for approved web exports. Send the designer a short image list that connects each file to a page, subject and purpose. These are working recommendations, not universal platform specifications.
| Use | What to supply | What to agree before cropping |
|---|---|---|
| Wide opening image | Original with room around the main subject | Where the subject and headline sit on desktop and mobile |
| Product card | Consistent views of the actual item | Frame shape, background and comparable product scale |
| Detail or technical view | Sharp close-up of the relevant feature | Which detail must remain visible and whether a larger view is needed |
| Premises or service photo | Current image with accurate context | What it represents and which page needs it |
| Logo | Original brand file, including vector artwork if available | Light/dark background use and clear space |
Identify the current approved version. If a photo shows a discontinued product, old location or optional accessory, label that context before it goes into the layout. For a product range, do not let one attractive picture silently stand in for several different specifications.
Record the source and any permission or licence conditions you already have. Ask the provider to identify stock or generated concept images so the team can keep them separate from evidence of actual work. This is an asset-management recommendation; it does not establish legal rights to a file.
Agree web exports and phone crops together
Ask for web-ready exports that balance visible detail and download size. Avoid committing to one format, quality setting or KB limit for every image. A logo, a photograph and a diagram have different needs. Compare candidate exports in the actual page, particularly where small lettering or fine edges matter.
For the delivery brief, distinguish two questions: does the phone need a smaller copy of the same composition, or a different crop? Responsive image markup supports source choices; the implementation should follow the design decision. An owner can review the result without writing that markup.
For example, a wide photograph may leave the featured object too small when fitted to a narrow screen. Ask for a tighter mobile composition or a different placement, then check that it still shows the right object. Do not solve this by stretching the picture.
Retain the originals even when the website uses compressed copies. They give the next designer room to make a different crop without starting from an already reduced export. The broader website content checklist helps organise the rest of the handover.
Give each useful image the right context
Use a filename the team can recognise, such as brass-handle-side-view, rather than an unexplained camera number. Add the product or service identity to the image list. Google's image guidance discusses descriptive filenames, relevant page context and alternative text; none guarantees a search ranking.
Alternative text should reflect the image's purpose in that page. An informative product photograph needs a useful description; a purely decorative image can have empty alternative text. If an image is the only content of a link, its alternative needs to communicate the destination or action. Use the W3C image decision tree to discuss ambiguous cases with the designer.
Keep necessary specifications and instructions as readable page text rather than relying only on a photograph of a label. Ask the person approving the product information to check the description and the visible image together.
Accept the picture in the page, not just the folder
Open the finished pages on a computer and a phone. Check the opening image, one ordinary card and the most demanding detail image. Verify that the subject is intact, the crop makes sense, proportions are natural and important detail remains readable. Open any larger-image control and check its destination.
Ask the maintainer to confirm that image space is reserved while the page loads and that below-the-fold images can be deferred where appropriate. The main visible opening image should not be delayed indiscriminately. web.dev covers image loading and layout stability. If the whole page still feels slow, use the mobile website performance guide for a broader diagnosis.
Finish with an approved image list, preserved originals, the web exports and a note of who updates them. A successful handover lets the business replace a product photo next month without guessing which file, crop or description belongs on the page.
