WEBSITE PLANNING

Choose Image Sizes for Phone and Desktop Layouts

Plan image widths and crops that preserve useful detail across phone and desktop layouts.

Match the display role

For each important photo, record its largest displayed width on desktop and its role on a phone. A full-width banner and a small project thumbnail do not need the same delivery size. Preserve the original source image privately so future crops do not start from an already degraded copy.

Compare representative crops

Create previews showing the actual crop at narrow and wide layouts. A hypothetical installer photograph may keep the person visible but crop out the work being discussed. Have the content owner confirm the important subject. Review sharpness and file size together; a smaller file is not a successful optimization if it removes the detail customers need to evaluate the project.

Give the developer the decisions

Supply the approved crops, meaningful asset names and intended layout sizes. Responsive image markup can let the browser select appropriate resources; the implementation should be verified in the browser rather than inferred from filenames. Inspect which image was loaded at representative widths. Record any exception, such as a diagram whose text must remain readable, and test its alternative presentation.

Reference and next step

Reference: MDN responsive image guide. For help reviewing a specific implementation, send the affected website address and describe the task customers are trying to finish.