画像圧縮

How image compression actually shrinks a file

A raw photo is a grid of pixels, each storing a color. Saved uncompressed, even a modest photo would be many megabytes. Compression makes the file smaller by exploiting two facts about human vision: we notice changes in brightness far more than tiny changes in color, and we rarely miss subtle detail in busy areas. Formats like JPEG and WebP use lossy compression — they group the image into blocks, throw away the least visible information, and store what remains more compactly. The quality setting decides how aggressively that discarding happens. This tool draws your image onto an HTML canvas and re-encodes it at the quality and format you choose, all inside the browser, so the picture never leaves your device.

What the quality slider really does

The quality value runs from 0.1 to 1.0 and maps directly to the encoder's quality parameter. At 1.0 the encoder keeps almost everything; at 0.1 it discards aggressively, producing tiny files with visible blocky artifacts. The relationship is not linear — file size drops steeply as you move down from 1.0, then flattens. In practice, dropping from 0.92 to 0.75 often cuts the file roughly in half while remaining indistinguishable to the eye, whereas going below about 0.5 starts to show smearing around edges and text. The sweet spot for web photos is usually 0.7 to 0.8.

A worked example

Say you upload a 2.4 MB JPEG that is 4000×3000 pixels for use as a 1200-pixel-wide blog header. Two things are wasting space: the file is encoded at high quality, and it is more than three times wider than it will ever display. Set Max width to 1200 and the tool scales the image down to 1200×900 — that alone removes about 91% of the pixels. Then choose WebP at quality 0.75. The canvas re-encodes the resized image and reports the new size, perhaps around 90 KB, a reduction the tool shows as roughly −96%. The same source exported as JPEG at the same quality would typically land a bit larger, which is why WebP is the default.

Choosing the right format

One thing to note: because PNG is lossless, the quality slider has little or no effect on a PNG export — PNG does not throw away detail, so re-encoding a photo as PNG can actually make it larger than the JPEG you started with. Use PNG for graphics with flat color and crisp edges, not for photographs.

Common use cases

• Speeding up a website. Oversized images are the most common cause of slow pages. Compressing and resizing before upload directly improves load time and search ranking.
• Meeting upload limits. Forms, job portals, and email attachments often cap file size; a quick pass at quality 0.7 usually gets you under the limit.
• Saving storage and bandwidth. Batch-shrinking photos before archiving or sharing them reduces cloud storage costs and mobile data use.

Tips and common mistakes

• Resize before you compress. Lowering the pixel dimensions to the size you will actually display saves far more than the quality slider ever can. Set a max width that matches your layout.
• Don't re-compress an already-compressed image repeatedly. Each lossy save discards more detail, and the losses accumulate — a photo saved through JPEG five times looks visibly degraded. Always start from the original.
• Watch for transparency loss. Converting a transparent PNG to JPEG fills the transparent areas with a solid color, because JPEG has no alpha channel. Use WebP or PNG if you need transparency.
• Compare before committing. The side-by-side preview shows the original and the compressed result. Zoom into faces, text, and smooth gradients — the first places artifacts appear — before downloading.

Privacy

The compression happens entirely in your browser using the canvas API. Your image is decoded, resized, and re-encoded on your own device, and nothing is uploaded to a server — you can confirm this by going offline and watching the tool still work. The downloaded file is generated locally from that in-browser canvas.