Image Resize & Compress

· Free browser tool

The Image Resize & Compress tool shrinks an image’s dimensions and file size before it ever reaches a web page, so oversized photos stop dragging down load times and Core Web Vitals scores. Heavy images are one of the most common causes of slow Largest Contentful Paint, and the fix is almost always the same: serve the picture at the size it is actually displayed and in an efficient format like WebP or a well-compressed JPEG.

This free, browser-based tool draws the image to a canvas at the target width and height, re-encodes it at the quality you choose, and shows the new dimensions, new file size, and exact percentage saved side by side with the original. Every step runs locally on your device, so the image is never uploaded to a server.

Image Resize & CompressFree · client-side
Drop an image here, or browse
PNG, JPEG, WebP, GIF or BMP · processed entirely on your device

How to resize and compress an image the right way

Pick a target width that matches where the image is displayed, choose a format, and watch the file-size saving update live. The three points below cover the decisions that have the biggest impact on weight and quality.

Resize to display size before you compress

The single biggest saving comes from dimensions, not quality. A 4000-pixel photo served into a 800-pixel column carries roughly twenty-five times the pixel data it can ever show, and the browser still has to download and decode all of it. Set the max width to the largest size the image is actually rendered at, keep the aspect-ratio lock on so it never distorts, and let the longest-edge presets snap common targets like 1024 or 1600 pixels. Resizing first means the quality slider then works on a far smaller, already-right-sized canvas.

Choose the format that fits the image

Format decides how efficiently the pixels are stored. WebP typically produces files twenty to thirty percent smaller than an equivalent JPEG and is supported by every current browser, which makes it the strong default for photographs and screenshots. JPEG remains the safe, universal choice for photos where transparency is not needed. Reserve PNG for logos, icons, and graphics with flat colour or a transparent background, where its lossless encoding keeps edges crisp. The tool re-encodes to whichever you pick and reports the resulting size immediately.

Tune quality by watching the file size, not guessing

Lossy formats expose a quality slider, and the sweet spot for web photos sits between 75 and 90 percent, where the file shrinks sharply while artefacts stay invisible at normal viewing size. Push below 60 percent and blocking becomes visible in skies, gradients, and fine detail. Because the preview and the saved-percentage figure update on every change, the reliable method is to lower quality until the number stops improving meaningfully or the preview starts to degrade, then stop. PNG is lossless, so the slider is disabled for it.

Image resize and compress frequently asked questions

Q1Does this tool upload my images anywhere?

No. The image is read with the browser’s FileReader, drawn to a canvas, and re-encoded entirely on your own device using client-side JavaScript. Nothing is sent to a server, logged, or stored, and the tool keeps working after the page has loaded even with no connection. That makes it safe for unpublished campaign art, screenshots, or any image you would rather not hand to a third-party uploader.

Q2What is the difference between resizing and compressing?

Resizing changes the pixel dimensions of the image, for example from 4000 wide to 1200 wide, which removes pixel data the page does not need. Compressing keeps the dimensions but stores the remaining pixels more efficiently, trading a little fidelity for a smaller file. This tool does both: it resizes the canvas first, then compresses by re-encoding at your chosen quality, so the two savings stack.

Q3Should I use WebP, JPEG, or PNG?

Use WebP as the default for photos and screenshots, since it is well supported and usually smaller than JPEG at the same quality. Keep JPEG when you need the most universal compatibility for a photograph. Choose PNG only for logos, icons, line art, or anything needing a transparent background, because PNG is lossless and keeps hard edges sharp but produces much larger files for photographic content.

Q4Why is my compressed file sometimes larger than the original?

Re-encoding an already-optimised image can add weight rather than remove it, especially when you save a small JPEG as PNG or push the quality slider near 100 percent. The tool shows the change as a clear percentage, and a red figure means the output grew. When that happens, lower the quality, switch to WebP or JPEG, or reduce the dimensions until the saving turns green.

Q5What quality setting should I use for web images?

For most web photographs, a quality of 75 to 90 percent gives a large file-size reduction with no visible loss at normal viewing size. Detailed graphics and images with text tolerate less compression, so keep those nearer the top of that range. The honest method is to drag the slider down while watching the live preview and the saved-percentage figure, then stop the moment the image starts to look soft.

Hristo Bogdanov, Head of SEO at SEO Domains

Hristo Bogdanov

Head of SEO @ SEO Domains · CEO & Co-founder of SEO.bo

Hristo has spent 15+ years building aged-domain acquisition and screening workflows for SEO professionals, brand owners, and domain investors, and builds the free tooling SEO Domains publishes for practitioners.