Pixels, aspect ratios, and the three fit modes
An image resizer changes an image’s pixel dimensions — the number of pixels wide and tall — by resampling the original into a new grid, either preserving the aspect ratio or forcing the image into a target shape.
Resizing is the single highest-leverage image optimisation there is, and it is routinely skipped. A modern phone camera produces images around 4000 pixels wide; the column they are displayed in is often 800. Serving the full-size file means the browser downloads roughly twenty-five times the pixel data it will ever draw, then spends CPU time discarding most of it.
It is also the step where images get quietly ruined — stretched avatars, cropped heads in social cards, logos scaled up into a blur. This page covers the three fit modes, the presets, and the one rule about scaling up that is worth internalising.
The three fit modes and what each one does
Direct answer: give width or height alone and the other dimension is calculated to preserve the aspect ratio. Give both and the fit mode decides what happens to the difference.
- Contain
- Scales the image so it fits entirely within the target box, preserving the aspect ratio. Nothing is cropped. The default, and correct whenever the whole image matters.
- Cover
- Scales until the box is filled completely and crops the overflow. Preserves the aspect ratio of what remains. This is what you want for banners and social cards where the frame is fixed.
- Fill
- Forces the image into the exact dimensions, distorting it if the ratio does not match. Almost always a mistake outside of deliberate effects.
- Single dimension
- Entering only a width (or only a height) is the safest way to resize: the ratio is preserved automatically and no cropping decision is needed.
- Processing
- Resampling runs on our server using a high-quality image library, then the result is returned to your browser and not retained afterwards. Uploads are capped at 10 MB.
- Built-in presets
- Ready-made dimensions for common platform formats — stories and video at 1080×1920, Pinterest pins at 1000×1500, marketplace gig images and more — so you are not looking up specifications while you work.
What happens when the ratio does not match
One source image, one target box, three very different results. This is the decision the fit mode is making for you.
Example 1: A landscape photo into a square frame
Source: 3000 × 2000 (3:2 landscape)
Target: 1080 × 1080 (square)Contain → 1080 × 720, whole image kept
Cover → 1080 × 1080, sides cropped away
Fill → 1080 × 1080, image squashedCover is right for a social square when the subject is centred. Contain is right when nothing may be lost — but the platform will then pad or crop it anyway, so decide the framing yourself.
Example 2: Preparing a 2× retina asset
Displayed at 600 px wide
High-density screens need 2×Width: 1200 px
Height: leave blankLeaving the height blank keeps the ratio exact. Doubling the display width is enough for essentially every current device; 3× rarely justifies the extra bytes.
Example 3: The upscaling problem
Source: 400 × 300 logo
Target: 1600 × 1200Soft, blurred edges.
No detail is recovered.Resampling can only interpolate between pixels that already exist. Scaling up invents nothing. For logos and icons, get an SVG or a larger original — no resizer can fix this.
Sizes worth targeting
Platform specifications change, so treat these as starting points and verify against the platform’s current guidance for anything commercially important.
| Purpose | Common dimensions | Notes |
|---|---|---|
| Blog body image | 1200 × 675 (16:9) | Wide enough for most content columns at 2× on a phone. |
| Open Graph / social share card | 1200 × 630 | The near-universal default. Keep text away from the edges — platforms crop differently. |
| Vertical story or short-form video cover | 1080 × 1920 (9:16) | Leave clear space top and bottom for platform interface overlays. |
| Pinterest pin | 1000 × 1500 (2:3) | Taller pins get cropped in the feed. |
| Profile avatar | 400 × 400 | Square. It will be displayed as a circle almost everywhere, so keep the subject centred. |
| Ecommerce product photo | 1600 × 1600 | Square, generous size for zoom on the product page. |
Preview a share card before it goes live with the meta tag generator so you see the crop the platform will actually apply.
Common resizing mistakes
Resizing in HTML or CSS instead of the file
Setting width="800" on a 4000-pixel image still downloads the full file. The browser scales it for display only — you get all of the bytes and none of the benefit.
Cropping faces out of social cards
Different platforms crop the same image differently. Keep the important content within the middle 80% of the frame.
Losing transparency
Resizing preserves the format, so a transparent PNG stays transparent. It is the format conversion that flattens it — mind the order if you also plan to convert the file.
Resizing after compressing
Compressing then resizing throws away the work: the artefacts introduced by compression get resampled along with everything else. Resize first, compress second.
Ignoring orientation metadata
Phone photos carry an EXIF rotation flag. If a portrait photo comes out sideways, the original was landscape with a rotation flag — rotate it properly in an editor before resizing.
How this page is maintained
The three fit modes, the single-dimension behaviour and the 10 MB upload limit were read from this tool’s implementation. Platform dimensions are given as widely used starting points and should be checked against each platform’s current specification before a commercial campaign.
Written and reviewed by the ToolsRacks editorial team. Last reviewed: .