Image Compressor

Introduction:

Image compression reduces the bytes needed to store or share a raster image. The result depends on the source pixels, the output format, the amount of resizing, and whether extra metadata is kept. A 12-megapixel phone photo, a transparent logo, and a sharp screenshot can all start at the same file size and still need different compression choices.

Smaller image files matter when a CMS rejects an upload, an email attachment feels too heavy, a product page needs to load faster, or a chat app downscales images without much control. The useful question is not only how small the file became. It is whether the image still fits the destination, keeps the right dimensions, preserves needed transparency, and avoids carrying camera details you did not mean to share.

Lossy formats such as JPEG and lossy WebP reduce size by storing an approximation of the picture. That tradeoff can work well for photos because small changes in texture or color are often hard to notice at normal viewing size. PNG follows a lossless path, so it keeps exact pixel values and transparency but may stay large, especially for photographs.

A good compressed image should pass two checks. The bytes should fit the target use, and the preview should still look right at the size where people will see it. If small type, product edges, skin texture, or transparent artwork matters, a bigger file can be the better file.

Technical Details:

Raster file size is driven by pixel count before any encoder setting is applied. A 4000 × 3000 image has 12 million pixels; reducing the long edge to 1600 pixels cuts the number of pixels sharply while keeping the same subject. This is why resizing often saves more bytes than moving a quality slider by a few points.

Format choice changes what the encoder is allowed to discard. JPEG has broad compatibility and strong photo compression, but it cannot preserve transparency. WebP can produce compact browser-friendly output and can preserve transparency when the browser supports that encoding path. PNG keeps a lossless pixel record, which is useful for logos, interface art, screenshots, and transparent edges, but the quality and target-size controls do not make PNG behave like a lossy format.

EXIF is metadata stored with many camera images. It can include capture settings, date, camera model, dimensions, density, orientation, and sometimes location-like information. Orientation matters because many phone photos rely on an EXIF rotation tag instead of physically storing upright pixels. Stripping EXIF can reduce privacy leakage and file weight; keeping it can preserve camera context for archive or editing workflows.

Formula Core:

The summary treats byte change as a ratio of compressed size to original size. Positive values mean the result is smaller. Negative values mean the selected settings produced a larger file.

If Original Size is 4.80 MB and Compressed Size is 1.20 MB, Size Change is 75.0% smaller. If a PNG logo grows from 220 KB to 260 KB after conversion settings are changed, the same ratio is negative and the result is reported as larger.

Resize controls run before encoding. Keeping aspect ratio is important because it prevents faces, text, and product images from being stretched while still lowering the number of pixels the encoder must store.

The target-size search is best-effort. For JPEG and WEBP, the compressor tries a small quality search and stops when it finds a close candidate or runs out of passes. The visible Target Size result still marks the target as met only when the final Compressed Size is no larger than the requested KB budget. PNG bypasses this search, so its target status is shown as ignored.

Animated GIF sources have an extra limit. Browser canvas compression normally returns one still frame, so the byte result may be smaller while the animation is lost. Treat the Animation note as a stop sign before replacing an animated source file.

Everyday Use & Decision Guide:

For a first pass on a web photo, choose Balanced web image and check the receipt before changing anything else. That preset uses WEBP, strips supported EXIF, fixes orientation, and fits the image inside a 2560 × 2560 pixel box. It is a good starting point for CMS uploads, article images, and general page assets.

Use Privacy-safe share when the image came from a phone and will be sent to another person or posted publicly. It keeps supported EXIF off, targets a smaller 400 KB budget, and fits the image inside a 1600 × 1600 pixel box. Use High-fidelity archive copy only when the camera metadata and a lighter compression touch matter more than the smallest file.

• Tiny upload asset is useful when a form has a strict size cap and a softer result is acceptable.
• Output format should stay on PNG or WEBP when transparency matters. JPEG flattens transparent pixels against JPEG background.
• Quality changes JPEG and WEBP output. PNG ignores it, so lower quality will not rescue a large lossless logo.
• Target size is a search request, not a guarantee. Trust Compressed Size and the Target Size note after the run.
• Fix orientation should stay on for most phone JPEGs unless the photo has already been rotated and saved correctly.

The most common wrong assumption is that a high savings percentage means the image is ready. It only means fewer bytes. Open Optimized Image, move Compare split across faces, text, edges, shadows, and gradients, then check Compression Metrics for dimensions and format.

When the output must be shared with a designer, developer, or content team, use JSON or the metrics table as the settings record. That makes it easier to repeat the same format, resize mode, quality, and EXIF choice later.

Step-by-Step Guide:

Follow this path when you need a smaller image and a clear record of what changed.

1. Add one file in Source image by dropping, pasting, or browsing. The drop zone should show the filename, dimensions, and source size. Extra files are ignored after the first image.
2. If you want a safe starting point, choose Compression preset. Use Use demo only to inspect the workflow before adding your own image.
3. Choose Output format. Pick WEBP for compact web delivery, JPEG for broad photo compatibility, or PNG when lossless pixels and transparency are required.
4. Set Resize mode before fine-tuning quality. Use Fit to width and height for a known display box, Scale by percent for proportional shrinking, or Long edge for a simple social or messaging size.
5. Adjust Quality for JPEG or WEBP, or enter Target size when the output must fit under a KB budget. If PNG is selected, expect both controls to be ignored.
6. Set Keep EXIF and Fix orientation. Keep EXIF off for ordinary sharing; leave orientation fixing on for phone photos unless it creates an unexpected rotation.
7. If the alert says Unable to compress this image, try a smaller browser-readable PNG, JPEG, WebP, GIF, or BMP file, or switch output format. If the source is animated GIF, check the Optimization Notes before downloading because the result may be a still frame.
8. Review Compression Receipt, Optimized Image, Compression Metrics, and Optimization Notes. Download the image only after the byte result, dimensions, output type, and visual preview all fit the destination.

A finished run should leave a browser-generated file that is smaller when possible, correctly oriented, and visually acceptable for the place it will be used.

Interpreting Results:

Read Compressed Size, Compressed Dimensions, Output Type, and Size Change together. The size tells you whether the file fits a budget. The dimensions tell you whether it still has enough pixels. The output type confirms whether the browser returned the requested format or used a fallback.

• Target met means the final file is no larger than the requested Target size. Best effort missed means the search found a result, but it is still over budget by the shown amount.
• Metadata stripped is usually the safer sharing result. EXIF kept can preserve camera details, including location-like fields when the source contains them.
• Strong, Moderate, Small, and Larger describe byte reduction only. None of those labels prove the image looks good.
• Savings Breakdown separates optimized bytes from removed bytes. If the chart shows added bytes, change format, lower quality, or reduce dimensions before using the file.

The final check is visual. Open the preview outside the page or inspect the downloaded file when the image contains small type, transparency, product edges, or faces. A smaller file can still be the wrong delivery file.

Worked Examples:

CMS article photo

A phone landscape starts with Original Dimensions = 4032 × 3024 and Original Size = 4.86 MB. Choose Balanced web image. A typical result might show Compressed Dimensions = 2560 × 1920, Compressed Size = 1.18 MB, Output Type = image/webp, and Size Change = 75.6% smaller. That is a strong page-asset result if the compare view still keeps horizon lines and foreground detail clean.

Phone image for private sharing

A portrait JPEG needs to stay near 400 KB before it is sent. Choose Privacy-safe share, leave Keep EXIF off, and keep Fix orientation on. If the receipt reports Compressed Dimensions = 900 × 1600, Compressed Size = 392.44 KB, Target Size = Target met at 392.44 KB, and Metadata = Metadata stripped, the size and privacy checks are both in good shape. Still inspect hair, eyelashes, and text before sending.

Transparent logo that refuses the target

A logo begins at Original Dimensions = 2400 × 2400 and Original Size = 682.17 KB. With Output format = PNG, Quality = Ignored for PNG, and Target Size = PNG output ignores the target-size search, the final Compressed Size may stay around 640 KB. The corrective path is to reduce dimensions while keeping PNG, or switch to WEBP if the destination accepts transparent WebP.

Animated GIF warning

An animated reaction GIF is added as the source and a much smaller JPEG result appears. The Optimization Notes row for Animation reports Still frame. That byte win is not a replacement for the original animation. Use the compressed still only if a single frame is acceptable, or keep the animated file outside this compression workflow.

FAQ:

Glossary:

Alpha channel

Transparency information stored with the visible pixel colors.

EXIF

Image metadata that can store dimensions, density, capture settings, orientation, date, camera model, and sometimes location-like details.

Lossless

Compression that preserves exact pixel values.

Lossy

Compression that reduces bytes by discarding or approximating some visual information.

Target size

The requested KB budget used by the JPEG and WEBP quality search.

WebP

A browser image format that can provide compact output and can support transparency.

References:

• Image file type and format guide, MDN Web Docs, Apr 7, 2026.
• HTMLCanvasElement: toBlob() method, MDN Web Docs, Feb 12, 2026.
• EXIF, MDN Web Docs, Jul 11, 2025.
• Choose the right image format, web.dev, Aug 13, 2024.