When mobile crops the important detail: how should you frame website images?

Define the information the image must preserve

The essential area might be a furniture joint, a shop entrance or a person’s face. Mark that area before designing the layout. An atmospheric photograph may tolerate a flexible crop; a picture explaining a product’s shape may lose essential information when an edge disappears. Ask what someone could misunderstand after the crop.

One focal point is not always enough. A photograph containing two people or a diagram showing connected parts may need to remain complete in a different aspect ratio. Leaving space around the image can be preferable to filling every corner of a box while removing the relationship it was meant to explain.

Review three placements with the actual copy

Begin with a wide hero, a square card and a narrow phone placement. These are sample situations for discovering problems, not an exhaustive device list. Add the real heading and button text. If the heading overlays a photograph, check the entire text rather than approving a clear first line while the remaining words disappear into detail.

Turkish and English headings may occupy different amounts of space. Review both languages before approving the framing. Where possible, keep the title as HTML text rather than embedding it in the photograph. A separate or carefully controlled text area also allows wording to change without recreating the image file.

Separate resolution choices from different compositions

Different resolutions of one composition and genuinely different crops address separate needs. web.dev describes srcset for providing size variants of an image, and picture sources when alternative compositions or proportions are required. Choose according to what changes in the content, rather than treating every image as a special case.

Make that distinction explicit in the delivery list: a smaller version of the same photograph is not the same assignment as a mobile-specific crop. The implementation should also supply accurate dimensions. Before producing more files, check whether the existing composition can work with a better focal position and a sensible container ratio.

Inspect a framing handover note

Review the description alongside the crop

If a crop changes which detail is visible, check that the alternative description remains accurate. Sources within one picture element share the same alternative text, so the description must work for every selected version. Do not describe a detail as visible on all screens when one crop removes it.

Think of the crops as presentations of the same content. Replacing the product with a different one for mobile is a larger content change. Check the heading, description, product link and image again to ensure that they still refer to the same thing. A visually tidy result can still be misleading.

Deliver a usage record with the files

For each image, record its source, usage rights, page placement, essential area and any mobile variant. Give the next content editor enough context to apply the same rules to a replacement photograph. After publication, check the product’s completeness, text overlap and horizontal overflow on a phone.

Review loading behaviour separately with our performance guide, and multiple-image navigation with the gallery guide. Presentations in the project archive offer different usage contexts. In your website design plan, keep framing approval and file optimisation as distinct checks; passing one does not establish the other.