Resize an image — aspect ratio, fit modes, and the math nobody explains

The short version

1. Decide the target. A single number — the max width in pixels — is usually enough. 2000px for blog hero, 1080px for Instagram, 1280px for YouTube thumbnails.
2. Lock aspect ratio unless you have a specific reason not to. The tool does this by default.
3. Pick a fit mode if the target has both a width and a height that doesn't match your source ratio. "Cover" crops to fill; "contain" letterboxes to fit; "fill" stretches (almost never what you want).
4. Use Lanczos for downscaling (our default). Use AI upscaling — not classic resize — for scaling up.
5. Compress after resizing, not before. Chain through our compressor for 2x the size savings.
6. Download. Single file single image, batch ZIP of resized files.

That recipe produces an image at exactly the dimensions you need, sharp, with no accidental squish and no file 3x bigger than necessary. The rest of this post explains the five decisions baked into that recipe, the math nobody writes down, and when to break the defaults.

The aspect-ratio math nobody explains

The source of 90% of "my image looks weird after resize" complaints is aspect ratio mismatch. Every image has a ratio — width divided by height. A 1920x1080 photo has a ratio of 16:9 (1.778). A 4000x3000 iPhone photo has a ratio of 4:3 (1.333). A 1080x1080 Instagram square has a ratio of 1:1.

Two cases you'll hit:

• Target matches source ratio. 1920x1080 to 1280x720. Both are 16:9. The math works cleanly — every pixel in the output corresponds to a weighted average of pixels in the input. No decisions, no distortion. This is what you want when possible.
• Target doesn't match source ratio. 1920x1080 to 1280x800. Source is 16:9, target is 16:10. They don't fit. You have to either crop pixels off the source, letterbox the result with empty bars, or squish the image to force fit. One of those three happens — the question is which, and most tools don't ask.

The simplest way to avoid the second case: pick a target width only, and let height come out however the ratio dictates. That preserves the original ratio, produces no crop, no bars, no stretch. 90% of "resize for web" jobs are this case.

The other 10% are "fit this photo into a square Instagram post" or "make this into a YouTube thumbnail." For those you need fit modes.

Inside, contain, cover, fill — the four fit modes

Image-processing libraries (sharp, ImageMagick, CSSobject-fit) all use the same four-name vocabulary for what to do when source and target ratios don't match. Most online resizers hide which one they're using. Ours exposes it. Visual metaphors:

• Contain (letterbox). Fits the whole source inside the target, adds bars where the ratio doesn't match. Nothing cropped. Like watching a widescreen film on a 4:3 TV — black bars top and bottom. Good when every pixel of the original matters and blank space is acceptable.
• Cover (center-crop). Fills the target completely, crops whatever doesn't fit. No bars, but edges of the source are lost. Like the way a phone wallpaper zooms to fill. Good for social posts and hero images where framing the subject matters more than keeping the whole frame.
• Inside. Shrinks to fit inside the target, but never upscales. If the source is already smaller than the target, it's left alone. Good for bulk batch jobs where some inputs are already small.
• Fill (stretch). Forces the source to the exact target dimensions, squishing if ratios don't match. Produces distorted output. Almost never what you want unless you're deliberately making an art effect.

Our default is cover when you enter both a width and a height that don't match the source ratio, with a one-click switch to "contain" or "fill." The preview shows what each one produces before you download. Most tools silently pick one and don't tell you — if your resized photo looks weirdly cropped or squashed, that's the hidden fit mode.

Social media preset table

Every platform re-encodes uploads to its own preferred size. If you upload something bigger, it downscales with whatever algorithm it uses that day — often worse than what you'd produce locally. Feed them the exact size they want and you keep control of the sharpness.

Our resizer ships all ten of these as one-click presets. Pick one, drop your source, we cover-crop by default with a re-position-the-crop slider if the auto-center misses the subject.

Print DPI math — pixels for physical sizes

If the image is heading to print instead of a screen, forget pixel dimensions and think in inches (or centimetres) times DPI. The formula:

pixels = inches x DPI

300 DPI is the standard for print. Walk the numbers:

• 4x6 inch photo print. 4 x 300 = 1200 pixels; 6 x 300 = 1800 pixels. Target: 1200 x 1800.
• 5x7 inch print. 1500 x 2100.
• 8x10 inch print. 2400 x 3000.
• Letter-size (8.5x11) document with photos. 2550 x 3300.
• A4 flyer. 8.27 x 11.69 inches — 2480 x 3508.
• Business card (3.5x2). 1050 x 600.
• US postcard (4.25x6). 1275 x 1800.

The "DPI" setting in Photoshop or our resizer is metadata — it tells the printer how to interpret the pixels. It doesn't add or remove pixels. If you send a 600x400 image with DPI set to 300, the printer prints it at 2x1.33 inches, not the size you hoped. The pixel count is what determines print size. Always do the math.

Newspaper and poster printing often accepts 150 DPI (big viewing distances forgive less resolution). Professional magazine or fine-art print wants 300+. Anything under 200 DPI at the target size will look soft to anyone holding the print close.

When to NOT resize — the compress-first trap

"I just need to make this JPEG smaller for email" sends people straight to a JPEG compressor. That's usually the wrong order. A 4032x3024 iPhone photo at 1.5 MB, compressed to q=80, is still often 600 KB. The same photo resized to 2000x1500first is 370 KB before the compressor touches it, then 170 KB after q=80. You get twice the filesize reduction by resizing first because filesize scales with the square of the dimension ratio.

Halve both dimensions, cut pixels by 4x, cut JPEG filesize by roughly 4x before any quality setting kicks in. Quality setting then kicks in on a smaller working surface, so the artifacts are less visible at the same q.

1. Decide the max display size. Retina-2x of the biggest the image will ever display at. 2000px wide is plenty for most blog content.
2. Resize to that target with Lanczos resampling. Our resizer.
3. Compress to JPEG q=82 with 4:2:0 chroma. Our compressor.

This chain produces the smallest file your eye still calls identical to the source. Doing it in the other order (compress first, resize second) wastes bytes on the compress pass and blurs the output on the resize pass.

Upscaling warning — classic algorithms blur

Everything above is about scaling down, where classical resampling works well because there's more information than needed. Scaling up is the inverse problem — inventing pixels that don't exist — and classic algorithms (bilinear, bicubic, Lanczos) all produce the same result: a blurry, slightly soft version of the input. They can't invent detail because they only interpolate between existing pixels.

If you need a 640x480 image at 1920x1080, classic resize will give you a blurry mess. What you want is AI upscaling — a neural network trained on millions of images that hallucinates plausible high-frequency detail. Topaz Gigapixel ($99) and Adobe Super Resolution are the paid references; we ship the same class of model free and in-browser at our image upscaler. Try that first if you're enlarging; fall back to classic resize only if you specifically want the "smooth blur" look.

Our resizer refuses to upscale by more than 2x with classic algorithms and suggests switching to the AI upscaler when you try. Too many online resizers happily 4x an image into a softer-than-source blur and send you on your way.

Batch workflows — 200 product photos in one pass

E-commerce and real-estate users usually land on a resizer because they have 200 photos from a shoot that all need to fit a 1024x1024 square for a Shopify catalogue. Our resizer handles this as a first-class flow:

1. Drop the folder. All photos, any orientation, any source size.
2. Pick the preset. 1024x1024 square, cover-crop centered.
3. Optional: uniform background. For catalogue shots, pad the contain-fit result with a white or brand-color background so all items align visually.
4. Optional: chain to compress. Cap each output at ~150 KB.
5. Download the ZIP. Filenames preserved, same order.

We tested on 200 photos averaging 3 MB source; the session finishes in about 90 seconds on a mid-range laptop. Everything runs in the browser tab — no server, no upload progress bar.

How our tool compares (honestly)

Image resizers are abundant. What differs is whether the tool uploads, which resampling algorithm it uses, whether it exposes fit modes, and whether it handles batch at all. Honest scoresheet:

Honest summary: Photoshop for pixel-level resampling control and color management, ImageMagick/sharp for scripted pipelines, Squoosh for learning how resampling affects output. For everyone else — batches of real photos, sensible defaults, in-browser privacy, no subscription, social presets baked in — our image resizer is the shortest path.

Works well / doesn't work

Works well

• Downscaling photos to web-appropriate dimensions (1500-2000px wide)
• Cropping to social-media presets (Instagram, YouTube, X, LinkedIn, Pinterest)
• Batches up to ~500 photos per session
• Privacy-sensitive files (runs in your browser tab; no upload)
• Preparing images for print at known dimensions (DPI math)
• Chaining to the compressor for the resize-first-compress-second flow

Doesn't work (well) yet

• Upscaling — classic resize blurs; use our AI upscaler for that
• Content-aware / subject-aware cropping — on the roadmap; currently cover-crop centers the image
• Seam carving (non-uniform resize that preserves subjects) — niche; not planned
• DPI calculator UI — you still enter pixels; an inches-times-DPI input is planned

Tips for the best result

• Enter only a width when you can. Let height derive from the ratio. No crop, no bars, no decisions.
• If the target is a specific W x H, pick a fit mode deliberately. Cover for social, contain for archival, inside for mixed batches, fill almost never.
• Use Lanczos for downscaling. It's our default. Bicubic is fine; bilinear is noticeably softer.
• Don't upscale with classic resize past 2x. Use AI upscaling instead.
• Resize before compressing. Chain through our compressor. Compounding savings.
• For print, do inches x DPI first. A 4x6 at 300 DPI is 1200 x 1800. The DPI metadata itself doesn't change pixel count.
• For batch jobs, use a preset. It's faster and reproducible — you can redo the batch identically next month.

Common questions

What's the best resolution for web images?

2000px on the long edge covers retina displays up to ~1000px actual display width, which is most blog and marketing contexts. For full-width hero images on 4K monitors, 2560px. Beyond 3000px you're wasting bytes the browser downsamples anyway.

Will resizing lose quality?

Downscaling well-done is visually lossless; Lanczos is sharp enough that nobody will spot it. Upscaling classic-stylealways loses quality because the algorithm can only blur between existing pixels. Use AI upscaling if you need more pixels than the source has.

Should I resize or compress first?

Resize first, always. Filesize scales with the square of the dimension ratio — cutting dimensions in half cuts raw bytes by 4x before the compressor touches anything. Then compress the resized result for a second round of savings. Doing it in the opposite order wastes the compress pass on pixels you're about to throw away.

What's the difference between cover and contain?

Cover fills the target completely and crops what doesn't fit; contain fits the whole source inside and letterboxes with bars. Cover is what Instagram and phone wallpapers do; contain is what a theater presenting a widescreen film on a 4:3 screen does. Pick based on whether every pixel matters (contain) or filling the frame matters (cover).

Does resizing change DPI?

Physical DPI is metadata — a tag on the file that tells a printer how to interpret the pixels. Resizing changes pixel count; it doesn't change the DPI metadata unless you specifically edit it. For print, what matters is pixels = inches x DPI. A 4x6 at 300 DPI is 1200 x 1800 pixels, full stop.

Are my files private?

Yes. Resizing runs in your browser tab via WebAssembly — the file never leaves your machine. Different from tools like iLoveIMG, online-resize-image.com, or cloudconvert, all of which upload. Matters for personal photos, ID scans, or NDA-covered client work.

Can I resize a batch of 200 photos at once?

Yes. Drop the folder, pick a preset (or enter custom dimensions plus a fit mode), and download a ZIP. Our resizer handles up to ~500 photos per session cleanly on a mid-range laptop; browser-side means the speed scales with your own machine, not with how busy a server queue is.

Ready?

Image resizer →. Drop your photos, pick a width (or a social preset), download the result. Free, in your browser, no upload, no watermark, no sign-up. If the file is heading to web, chain through our compressor afterwards — resize-first-compress-second is a real, measurable win. If you're scaling up instead of down, skip the classic resampler and use our AI upscaler instead; classic resize only blurs when you enlarge.