How to Resize an Image Online: The Complete Guide

Resize, crop, or compress: which one you need

Resizing is changing the number of pixels in an image: 4032 wide becomes 1200 wide. Cropping trims the frame to an area or aspect ratio without scaling the pixels inside. Compression changes how pixels are encoded, not the dimensions; conversion changes the file format (JPG, WebP, AVIF).

• Image is larger than the screen needs — resize
• You need a square avatar or a 16:9 preview — crop
• Dimensions are fine but the file is heavy — compress
• You need a modern web format — convert

The operations combine, and order matters: crop to the target aspect ratio first, then resize to the target width, then compress. The last two steps have their own free tools:

How many pixels a screen actually needs

A phone camera outputs 4032×3024 — 12.2 million pixels. A Full HD monitor shows 1920×1080 in total, which is 2.1 million. An image inside an article column needs 1200–1600 px wide even on a Retina display. The browser throws the rest away at render time — after the user has downloaded them.

The rule: pixels = on-screen width × display density

A 600 CSS-pixel block on a 2× density display needs a 1200 px image. More is wasted bandwidth; less looks soft. The srcset and sizes attributes let you serve different versions of one image to different screens:

<img src="photo-800.jpg"
     srcset="photo-800.jpg 800w, photo-1200.jpg 1200w, photo-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 600px"
     width="1200" height="900" alt="Product photo" title="Product photo">

A typical smartphone gives the page 390–430 CSS pixels of width: a full-screen image at 3× density tops out around 1290 px. Even for full-screen mobile display, 1600 px is enough with headroom.

What about DPI?

DPI only matters for print: 300 DPI is the typography standard. Screens look at pixels: two 1200×900 files at 72 DPI and 300 DPI look identical in a browser and weigh the same. Changing DPI “for web quality” does nothing.

What resizing does to weight and speed

We ran one real iPhone photo — 4032×3024, JPG, 729 KB — through a resize with default settings (sips, macOS). The results:

A heavy above-the-fold image is the typical LCP element of a page. Google treats LCP as good up to 2.5 seconds, and on a slow mobile connection an extra half-megabyte of image turns into visible seconds of waiting. Resizing is the cheapest way to remove that weight: no format change, no sharpness loss, one action.

Half of all “slow” sites are fixed not by refactoring but by resizing their ten heaviest images.

Comparing the options: online, Photoshop, CLI, CSS

For batch scenarios in a terminal, ImageMagick handles it in one command:

magick input.jpg -resize 1200x -quality 82 output.jpg
# whole folder at once:
magick mogrify -resize 1200x -quality 82 -path ./out *.jpg

Sizes for social media and Open Graph

Social networks rescale uploaded images to their own dimensions — and when the aspect ratio does not match, they crop from the center, cutting off what matters. Preparing the file to the platform spec beforehand is safer:

The resizer covers most of these with its 1:1 and 16:9 crop presets: pick a preset, move the frame over the right area — and both size and ratio match on the first try. Keep in mind that platforms recompress every upload with their own codecs, so a file at exactly the right size keeps its quality better than a 4000-pixel original after their automatic squeeze.

Common resizing mistakes

• Upscaling a small image: missing pixels get interpolated and the result goes soft — find a larger original instead
• Overwriting the original with a downsized copy: removed pixels cannot be recovered, keep the source file separately
• Resizing screenshots with small text: text becomes unreadable long before a photo loses its look — crop the relevant area instead
• Stretching without keeping proportions: distorted faces and logos are instantly visible — keep the aspect lock on
• One size “for everything”: screens differ, serve 2–3 versions via srcset
• Resizing before cropping: fix the aspect ratio first, then the size — otherwise the frame has to be recalculated

One rule covers all six mistakes: the original goes to the archive, the web gets a copy sized for its exact placement.

How to resize in our tool

The resizer runs in your browser, free and with no sign-up. Four steps:

• Drop your image into the tool window
• Set a width in pixels — height follows the aspect ratio — or switch to crop mode and pick a 1:1, 16:9 or 4:3 preset
• Check the preview and the resulting file size
• Download the result — original format, PNG, JPG or WebP

Frequently asked questions

Does downscaling lose quality?

Practically no: the algorithm averages neighboring pixels, and the difference is invisible on screen. Upscaling is what hurts — missing pixels have to be interpolated, and the image goes soft. Keep the original and always resize downward.

What size should I pick for a website?

The width of the block on the page multiplied by the display density. Full-width hero — 1600–2560 px, an in-text image — 1200 px, a thumbnail — 400–800 px. When unsure, 1600 px covers most cases. The browser inspector shows the exact block width: right-click the image and pick “Inspect”.

How is resizing different from compression?

Resizing removes pixels; compression encodes the remaining ones more tightly. Our measurement above saved 68% from resizing alone; compression and a format change add savings on top — run your file through both tools and compare.

Do I need to install anything?

No. An online resizer changes dimensions in the browser in seconds, free and with no sign-up. Installation only pays off for batch-processing hundreds of files — then take ImageMagick from the table above.

How do I resize many files at once?

The online tool processes files one at a time. For dozens or hundreds of files, the mogrify command from ImageMagick is faster — see the comparison section above; it sweeps a whole folder in one run.

What size does a link preview (Open Graph) need?

1200×630 px — the og:image standard that messengers and social networks use when unfurling a link. The ratio is 1.91:1; below that, platforms may fall back to a small thumbnail instead of a large preview.

Does image size affect SEO?

Yes, through speed: page weight and LCP are part of Core Web Vitals, which Google factors into ranking. Resizing heavy images is step one of optimizing almost any photo-heavy page.

Takeaways and sources

• Screens need fewer pixels than cameras produce: 1200–1600 px covers most scenarios
• Resizing our test photo to 1200 px cut 68% of its weight with no visible difference
• Crop is about composition, compression is about encoding; combine all three
• CSS width is not resizing: the full file still downloads

Speed thresholds and how browsers handle images — in the primary sources: