Why the same image needs two different crops

A hero needs atmosphere. A product detail needs evidence. Choosing the right source and crop matters as much as making the file smaller.

An image is a content decision, an accessibility decision and a delivery decision.

Choose the crop for the question the image needs to answer. A wide hero can introduce a product; a close view can show its finish or a practical detail. Keep the original file and create suitable versions, rather than stretching one small crop across every use.

A beautiful crop can remove the useful detail

A photograph looks excellent at the top of the homepage. On a product page, the same crop hides the edge a customer wants to inspect. On a phone, the important detail disappears behind the title. The image is attractive, but it is no longer doing its job.

Image work is a design and content decision before it is a compression task. The first question should be 'What does the customer need to see here?' rather than 'How small can we make this file?'

Atmosphere and evidence need different framing

A room photograph can help someone imagine a material in context. A close-up can help them judge texture, an edge or a fixing detail. A wide crop suitable for the first task may be unsuitable for the second. Neither image is automatically better; they answer different questions.

For a service website, the same principle applies to team photographs, process illustrations and genuine project captures. Select the image for the point being made. Avoid a decorative photograph where the customer needs an explanation or verifiable detail.

Suppose a materials supplier has one high-quality photograph of a textured panel, showing both the full panel and its surface detail.

Where it goes wrong

A single wide crop is reused on the homepage, in a small card and in the detail gallery. The surface is too small to inspect, while the card cuts off the panel edge.

What to do instead

Keep the original. Prepare a context crop for the homepage, a clear card view and a detail view that lets the customer inspect the texture. Check each use on a phone.

The customer gets the right information at each stage. These are suggested image roles, not a claim about a particular supplier's products.

Protect the original, especially when it is small

Keep the best available source, together with permission to use it. A downloaded thumbnail may already have lost the detail needed for a larger presentation. Converting it to WebP or choosing a high quality setting does not restore that detail.

Ask for the original before committing to a large image treatment. If it cannot support the intended size, use a smaller presentation, a different source or a new image. Cropping and resizing should be deliberate, recoverable choices rather than repeated exports from an already reduced file.

Review the image where customers will see it

Check the phone layout as well as the desktop design. Does the subject remain complete? Does text cover the useful part? Can someone open a detailed view when a small card is not enough? A portrait photograph may need room to stay portrait-shaped rather than being forced into a wide slot.

The technical delivery matters too: provide an appropriate file size and dimensions, and describe informative images in context for people who cannot see them. Decorative images can remain decorative. Alternative text should explain useful meaning, rather than carry a list of search keywords.

Questions to ask your agency

  • What should a customer learn from this image?
  • Do we have the original and permission to use it?
  • Which detail must survive the phone crop?
  • Does the gallery offer a genuinely useful larger view?

Common questions

Can you make a blurry thumbnail sharp by changing its format?

A different format can improve delivery efficiency, but it cannot recover missing source detail. Inspect the original dimensions and quality before promising a large, crisp result.

Does every image need a long description?

No. The text alternative should match the image's role. Useful information needs an appropriate description; a purely decorative image may use an empty alternative.

Source notes

Platform guidance behind this topic:

From explanation to implementation

This guide is published by NAVIFLARE, a website, CRM and AI workflow practice. Source notes identify the platform guidance; worked examples explain a method rather than claim a client result.

Explore website care and continuous improvement

Bring the original images and the pages where they are used. We can discuss which crops, detail views and delivery sizes will help customers understand the offer.

Discuss your website imagery

Keep reading.

Back to all insights

Let’s talk about
your website.

A couple of details are enough to get started.