Starting a website?

Purpose-Built Templates

ZU2B Blueprints

Business in a Box

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free
FAQ • Support

Why a Cropped Image Looks Soft Even Though It Wasn’t “Stretched”

Field Note #131
🔬 Generalized 🟢 Beginner ⏱ 5 Minutes ✓ Observation from Experience
You crop a small detail out of an image — a face out of a full-body character render, say — and resize it up to the size you actually need it displayed at. Nothing about the process was wrong: no distorted aspect ratio, no accidental stretching. It just looks a little blurry, softer than the rest of your site’s imagery.

What’s actually happening
Cropping a small region out of an image and then enlarging it back up to a usable size means you’re upscaling — asking the computer to invent pixel detail that was never actually captured in the original. A source image that’s only, say, 125×125px doesn’t contain enough real detail to produce a sharp 240×240px result; the software has to guess and interpolate the missing information, which shows up as softness.
This is easy to miss because the math “works” — you get a correctly-sized, correctly-proportioned file — but resolution and pixel count aren’t the same thing as visual sharpness.

How to tell the difference
Compare the source image’s actual pixel dimensions to your target output size. If you’re asking for something noticeably larger than the source (roughly more than 20-30% larger), expect visible softening — the smaller the source relative to the target, the worse it gets. A crop taken from a 1024×1024 original and scaled down to 240×240 will look sharp; a similar crop taken from a 125×125 original scaled up to 240×240 will look soft, even though both end at the same final size.

The fix
Always crop from the largest resolution version of an image you actually have access to — even if a smaller, pre-cropped version seems more convenient at the time. If you only have a small source and need a sharp result, there often isn’t a clean fix short of finding or regenerating a higher-resolution original; no amount of sharpening filters fully recovers detail that was never there.

How to avoid it next time
Before cropping anything meant for reuse at a specific display size, check the source’s native dimensions first. If a small, convenient thumbnail and a large, unwieldy original both exist for the same image, crop from the large one — you can always scale a sharp image down, but you can’t scale a soft one back up.

Tagged in :

More from the field