Image Compressor
Shrink JPEG, PNG and WebP images locally with quality controls, max-width limits, and optional target file size. Compare before and after, then download.
Before
After
When do you need to compress images for the web?
What this tool does
This image compressor shrinks JPEG, PNG, and WebP files in your browser with quality sliders, max-width limits, and optional target file size mode. Compare before and after side by side, see the savings percentage, then download the optimized file. Nothing uploads — compression uses the Canvas API locally.
Why you need it
Large images are the most common cause of slow page loads and poor Core Web Vitals scores. A 4MB hero photo can drop to 200KB with acceptable quality loss, cutting load time dramatically. CMS and email platforms often enforce file-size caps that block uploads.
Because compression runs entirely in your browser, sensitive screenshots, client work, and unreleased product photos never leave your device — unlike cloud-based optimizers that receive your files.
Bandwidth-constrained users feel oversized images most: mobile connections, metered data plans, and slow rural links all pay a real cost for every extra kilobyte. Search engines also factor page speed into ranking signals, so shaving load time with smaller images is one of the few SEO improvements that also improves the actual user experience rather than trading one for the other.
How to use it
- Drop or select a JPEG, PNG, or WebP image. Processing starts locally — nothing is uploaded.
- Adjust quality, set a max width, or enter a target file size to hit a budget.
- Compare the before and after preview side by side to check visual quality.
- Download the compressed file when you are satisfied with size and clarity.
Practical examples
- Blog hero image: Set max width 1920px, quality 80%, export WebP for a 70% size reduction vs the original PNG.
- Email attachment: Target 200KB to stay under corporate mail server limits while keeping a product photo readable.
- CMS upload limit: A site caps uploads at 500KB — compress until the savings panel shows you are under budget.
- Thumbnail grid: Max width 400px at quality 75% for a product catalog without visible artifacts at small display size.
- Presentation deck: Batch-shrink screenshots to keep a slide file under a conference Wi‑Fi upload limit without visible quality loss on projector screens.
How it works
The tool loads your image into an HTML canvas element, optionally scales it to the max-width constraint, then re-encodes using the browser's native toBlob() API with your chosen format and quality parameter. JPEG and WebP support lossy quality from 0–100; PNG is lossless but can still shrink when dimensions are reduced. Target-size mode iterates quality downward until the output meets your KB budget.
Re-encoding may strip EXIF metadata depending on format and browser. The before/after panel shows file sizes and percentage saved so you can judge the tradeoff visually.
JPEG uses lossy chroma subsampling and block-based compression, which is efficient for photographic gradients but introduces blocky artifacts at low quality. WebP applies a more modern codec that typically beats JPEG at equivalent visual quality for the same file size, though very old browsers may lack support. PNG's lossless compression makes it the right default for screenshots, logos, and images with flat color or transparency, even though it rarely beats JPEG or WebP on photographic content.
Common mistakes
- Over-compressing photos: Quality below 60% on detailed images introduces visible block artifacts — use the preview before downloading.
- Using PNG for photos: PNG is lossless and large for photographic content — switch to JPEG or WebP for photos; keep PNG for graphics with transparency.
- Skipping resize: A 6000px-wide image at quality 80% is still huge — combine max-width with quality reduction.
- Compressing already-compressed files: Re-saving a heavily compressed JPEG degrades quality further — start from the highest-quality original available.
- Ignoring display size: Shipping a 3000px-wide image to a 400px thumbnail slot wastes bandwidth even at high compression — resize to the actual rendered dimensions first.
FAQ
Are my images uploaded to a server?
No. Compression uses the Canvas API in your browser. Original and output files stay on your device.
Which format should I export?
JPEG for photos, PNG when you need transparency, WebP for the best size-to-quality ratio on modern browsers.
Will compression ruin image quality?
Lowering quality reduces file size and can introduce artifacts. Use the preview and target-size mode to find an acceptable balance.
Can I batch compress many files?
This tool processes one image at a time for focused control. Repeat for each asset or use automation for large batches.
Does it strip EXIF metadata?
Re-encoding may remove some metadata depending on format. Remove sensitive EXIF before sharing if location data is a concern.