Matching a size without losing quality
Scaling up costs detail. Filling a background does not. Knowing the difference solves most cases.
Updated 2026-08-06
There are three ways to hit a target size, and each gives something up.
| Method | What it costs | When to use it |
|---|---|---|
| Crop | Whatever falls outside | You want to choose the composition |
| Fit inside | Nothing (adds margins) | The whole photo has to stay |
| Fill | Sharpness and edges | No margins are acceptable |
Why scaling up softens
Going from 720x720 to 1080x1080 means inventing about 270,000 pixels that were never captured. The browser blends neighbours to fill them and edges smear in the process. Detail that was not recorded cannot be recovered by any method.
Filling a background leaves every original pixel untouched and adds new area around it. The photo itself is bit-for-bit unchanged. When you only need to satisfy a spec, this always wins.
Downscaling is safe, but method matters
Dropping a 6000px photo straight to 1080 makes fine lines and patterns look ragged. Halving repeatedly is much cleaner. CropKit splits the reduction into steps automatically whenever the ratio exceeds 2x.
Format and quality
- For photographs, JPG at around 90 percent quality is the balance point.
- For images with a lot of text or flat shapes, PNG is better. JPG leaves artefacts around letterforms.
- WebP is 20 to 30 percent smaller than JPG at matching quality, and it supports transparency, which makes it the best default for the web.
- If you need a transparent background, JPG is out. Transparency saves as white.