Practical example
Resize a 4000-pixel camera image to its 1200-pixel display width before comparing WebP and JPEG quality around text and edges.
Image Compressor
Drop an image here or click to choose a file
Compression runs in your browser via canvas — the image never leaves your device.
About the Image Compressor
This tool compresses and resizes images entirely in your browser using the canvas API. Pick an output format (JPEG, WebP, or PNG), adjust the quality slider, optionally cap the width, and download the result.
Because everything runs locally, your photos never touch a server — there is no upload, no queue, and no privacy trade-off. It works offline once the page is loaded.
How to compress an image
- Drop an image onto the upload area or click to choose a file.
- Pick the output format — WebP usually gives the smallest files.
- Adjust quality and, if needed, set a maximum width to downscale.
- Compare the before/after sizes and download the compressed image.
Tips
- Resizing usually saves more than quality reduction — do not ship 4000px images into small layouts.
- Quality 75-85 is the sweet spot for photos; artifacts appear quickly below 60.
- Use PNG only for graphics with sharp edges or transparency — photos as PNG are huge.
- Keep the original file; lossy compression cannot be undone.
Compression checks before publishing images
Smaller files speed up pages, but format choice, dimensions, and visible artifacts deserve a quick review.
Resize before compressing
Do not ship a 4000px image into a 400px slot. Cutting dimensions saves more than any quality slider.
Pick the right format
WebP usually beats JPEG at the same quality; PNG is for graphics with sharp edges or transparency.
Inspect artifacts at 100%
Aggressive quality settings show banding and blocking around text and gradients. Zoom in before publishing.
Keep the original
Lossy compression is irreversible. Store the source file so you can re-export with different settings later.
A practical example, an edge case, and a maintainer note
Edge case
Removing metadata can discard orientation, color profile, copyright, or accessibility workflow information—not only location data.
Maintainer note
I measure the rendered result at target dimensions; a smaller file is not a win if text becomes blurry or colors shift.
Related tools
You may also find these tools useful.
Image to Base64 Converter
Convert images to Base64 data URIs locally in your browser, with CSS and HTML snippets.
Encoding & Security
›
QR Code Generator
Create QR codes from text or URLs and download them as SVG or PNG.
Generators & Validators
›
Color Contrast Checker
Check WCAG contrast ratios between text and background colors with a live preview.
Developer Misc
›
CSS Background Pattern Generator
Create CSS background patterns with dots, grids, stripes, diagonal lines, and checkerboards.
Developer Misc
›
Image Compressor FAQ
Are my images uploaded anywhere?
No. Compression happens in your browser with the canvas API. The file never leaves your device.
Which output format should I choose?
WebP usually gives the best size-to-quality ratio. Use JPEG for maximum compatibility and PNG for transparency or sharp-edged graphics.
Why did my PNG get bigger after compression?
Canvas re-encodes PNG losslessly and may beat or lose to the original optimizer. For photos, switch to WebP or JPEG instead.
Does transparency survive compression?
In WebP and PNG, yes. JPEG has no alpha channel, so transparent areas are flattened onto white.