Image Compressor

About Image Compressor

How Image Compression Works

The tool uses lossy compression via the HTML5 Canvas API. It re-encodes your image at the quality level you choose, which controls how aggressively similar pixel values are merged. Lower quality means more merging, which means smaller files but more visible artefacts.

Worked example: A 1920x1080 photograph from a modern phone typically starts around 2.5 MB as a JPEG. Re-encoding at quality 80 through this tool produces a file around 400 KB - an 84% reduction. The Canvas API converts the image to a fresh JPEG bitstream using the libjpeg-style quantisation matrix that browsers ship with, scaled by the quality value. At quality 80, the matrix keeps high-frequency detail nearly intact while aggressively quantising low-frequency blocks, which is why photographs survive this setting with no visible loss.

Quality Level	Typical File Size Reduction	Visual Impact	Best For
90-100%	10-30% smaller	No visible difference	Photography portfolios, print-quality images
75-89%	40-60% smaller	Nearly identical to original	Blog images, product photos, general web use
50-74%	60-80% smaller	Slight softness in fine details	Thumbnails, social media, email attachments
25-49%	80-90% smaller	Noticeable JPEG artefacts around edges	Quick previews, bandwidth-limited situations
1-24%	90-95% smaller	Heavy artefacts, blocky appearance	Placeholder images, extreme size constraints

For most web use, 75-85% quality is the sweet spot. The file size drops dramatically while the visual difference is hard to spot without zooming in.

Output Format Comparison

Format	Compression Type	Relative File Size	Transparency	Best For
JPEG	Lossy	Small	No	Photographs, complex images with many colours
PNG	Lossless	Large	Yes	Screenshots, graphics with text, transparency needed
WebP	Lossy or lossless	Smallest (20-30% smaller than JPEG)	Yes	Web use where browser support allows (97%+ globally)

WebP produces the smallest files at equivalent visual quality. If your website supports it, converting to WebP at 80% quality often gives better results than JPEG at 85%.

Web Performance Impact

Images are typically the heaviest assets on a web page. Compressing them has a direct impact on page load speed, which affects both user experience and search rankings.

Scenario	Before Compression	After (80% JPEG)	Saving
Hero banner (1920x1080)	~2.5 MB	~400 KB	~84%
Product photo (800x800)	~1.2 MB	~180 KB	~85%
Blog post image (1200x630)	~800 KB	~120 KB	~85%
Thumbnail (300x300)	~200 KB	~25 KB	~88%

Google recommends keeping individual images under 200 KB for optimal page speed. A page with ten 2 MB images takes noticeably longer to load than one with ten 150 KB images, especially on mobile connections.

When to Use Each Approach

Goal	Best Approach
Reduce file size without changing dimensions	This image compressor - adjust quality slider
Make images smaller in both dimensions and file size	Resize first with the image resizer, then compress
Convert to a more efficient format	Use this tool and select WebP as the output format
Crop to remove unnecessary parts	Crop first with the image cropper, then compress
Batch optimise for a website	Compress each image individually at 75-85% quality

Common Compression Mistakes

Mistake	Why It Matters	What to Do Instead
Re-compressing an already compressed JPEG	Each compression pass adds artefacts, quality degrades cumulatively	Always work from the original source file when possible
Using PNG for photographs	PNG uses lossless compression and produces much larger files for photos	Use JPEG or WebP for photographs, PNG for graphics with transparency
Setting quality too low for important images	Artefacts are especially visible around text, sharp edges, and gradients	Use the before/after preview to check quality before downloading
Not resizing before compressing	A 4000x3000 image compressed to 80% is still much larger than a 1200x900 at 80%	Resize to the dimensions you actually need first

The compression happens entirely in your browser using the Canvas API. No images are uploaded to any server, so your files remain completely private. The tool works offline once the page has loaded.

What Is a Reasonable Image Weight for Web Use?

The HTTP Archive 2025 Web Almanac reports the median home page ships around 1,059 KB of images, with inner pages averaging 911 KB. That is for the whole page, not a single image. Google's guidance is that no single image should exceed 200 KB on a production page, and the LCP image (the largest visible image above the fold) should ideally load inside 2.0 seconds at the 75th percentile after Google tightened the "good" LCP threshold in its March 2026 Core Web Vitals update (down from 2.5 seconds).

Image Role	Target File Size	Typical Dimensions	Format
Hero / LCP image	100-300 KB	1920x1080 or 1600x900	WebP 80 or JPEG 82
Blog post body image	40-120 KB	1200x630 or 1024x576	WebP 75 or JPEG 78
Product thumbnail	15-40 KB	400x400 or 300x300	WebP 75 or JPEG 75
Avatar / profile picture	5-20 KB	128x128 or 96x96	JPEG 80 or WebP 80
Email attachment	Under 1 MB	Keep original where possible	JPEG 85
Social media upload	200 KB - 1 MB	Per-platform spec (see aspect ratio calculator)	Platform usually re-encodes

Why WebP Has Become the Default Web Format

WebP now has 97%+ global browser support according to caniuse.com, up from around 90% when Safari 14 shipped with macOS Big Sur in September 2020. For new projects, WebP at quality 75-80 produces files 25-34% smaller than JPEG at the same perceived quality, per Google's WebP Study. The remaining 3% of browsers are mostly legacy Internet Explorer, old Safari on pre-Big Sur Macs, and embedded devices.

Format	Year Introduced	Browser Support	Typical Savings vs JPEG 85	Notes
JPEG	1992	100%	Baseline	Universal fallback, no transparency
PNG	1996	100%	Often larger (lossless)	Best for graphics, transparency
WebP	2010	97%+	25-34% smaller	Lossy or lossless, supports alpha
AVIF	2019	~95%	40-50% smaller	Slowest to encode, best compression

This tool outputs JPEG, WebP, or PNG. For the best balance of file size and compatibility, WebP is the right default for web delivery, with JPEG as a fallback for older clients. PNG should be reserved for screenshots, logos, line art, or anything that needs lossless preservation. If you also need to shrink dimensions, the image resizer pairs well with this compressor.

How Lossy JPEG Compression Actually Works

JPEG compression runs three steps: colour space conversion to YCbCr, 8x8 discrete cosine transform on each block, then quantisation using a matrix scaled by the quality parameter. The human eye is less sensitive to colour detail than brightness, so JPEG downsamples the chroma channels (4:2:0 chroma subsampling in most encoders) and keeps full luminance resolution. The quality slider essentially controls how coarse the quantisation steps are: quality 100 keeps all DCT coefficients, quality 50 throws away roughly half the frequency information, quality 1 keeps only the DC component and low-frequency terms.

This is why JPEG excels on photographs, where natural gradients dominate, and struggles on text or line art, where sharp edges produce high-frequency content that gets blurred during quantisation. If your image has crisp edges or flat colour areas, use PNG or WebP lossless instead.

Target Size Mode vs Quality Mode

Quality mode lets you pick a specific quality level (1-100) and see the resulting file size. Target size mode works the opposite way: you enter a maximum size in KB and the tool runs a binary search across the quality range to find the highest quality setting that still fits under your limit. A binary search over 100 quality levels converges in 7 iterations, so even large images take only a second or two.

Target size mode is useful when you have a hard limit (a 1 MB email attachment cap, a CMS that rejects files over 500 KB, a stock-photo submission spec). Quality mode is useful when you care more about visual fidelity than hitting an exact size. If the smallest achievable output (quality 1) still exceeds your target, the tool warns you - at that point the image needs to be resized smaller, not compressed harder.

Web Performance Impact

Images are typically the heaviest assets on a web page. Compressing them has a direct impact on page load speed, which affects both user experience and search rankings under Google's Core Web Vitals scoring.

Scenario	Before Compression	After (80% JPEG)	Saving
Hero banner (1920x1080)	~2.5 MB	~400 KB	~84%
Product photo (800x800)	~1.2 MB	~180 KB	~85%
Blog post image (1200x630)	~800 KB	~120 KB	~85%
Thumbnail (300x300)	~200 KB	~25 KB	~88%

Google recommends keeping individual images under 200 KB for optimal page speed. A page with ten 2 MB images takes noticeably longer to load than one with ten 150 KB images, especially on mobile connections where median page weight already sits at 2.56 MB per the 2025 HTTP Archive data.

Common Compression Mistakes

Mistake	Why It Matters	What to Do Instead
Re-compressing an already compressed JPEG	Each compression pass adds artefacts, quality degrades cumulatively (generation loss)	Always work from the original source file when possible
Using PNG for photographs	PNG uses lossless compression and produces much larger files for photos	Use JPEG or WebP for photographs, PNG for graphics with transparency
Setting quality too low for important images	Artefacts are especially visible around text, sharp edges, and gradients	Use the before/after preview to check quality before downloading
Not resizing before compressing	A 4000x3000 image compressed to 80% is still much larger than a 1200x900 at 80%	Resize to the dimensions you actually need first with the image resizer
Using WebP without a JPEG fallback on legacy systems	Older email clients and some enterprise software can't display WebP	Pick JPEG for email attachments and legacy compatibility
Exporting PNG and then compressing quality	The quality slider has no effect on PNG - it is lossless by design	Convert to JPEG or WebP first if you need smaller files

Privacy and How This Tool Handles Your Files

Every operation happens locally in your browser using the Canvas API. No image ever leaves your device - the file is never uploaded to a server, never stored, never logged. Once you close the tab, the compressed image is gone unless you downloaded it. This is important for anything confidential (ID scans, medical documents, internal work materials) that shouldn't travel to a third-party server. The tool also works offline once the page has loaded.

Sources

• HTTP Archive Web Almanac 2025 - Page Weight
• web.dev - Largest Contentful Paint (LCP)
• caniuse.com - WebP browser support
• Google - WebP Compression Study
• ITU-T T.81 - JPEG Standard
• MDN - HTMLCanvasElement.toDataURL()