Compress, batch, inspect.
Drop your images here. JPEG, PNG, WebP. Dial quality, watch savings stack. Your files never leave the tab.
PNG is lossless. Size change comes from re-encode + metadata strip.
Image compression reference: formats, quality levels, and size budgets
The tool above compresses JPEG, PNG, and WebP images in the browser at a quality level you set with the slider. The tables below collect the data you actually consult while picking that quality level: expected output ratios by format, quality recommendations by image role, browser support for the Canvas encoder, file-size budgets for common placements, and what metadata gets preserved or stripped on the way through.
Format selection by image content
Match the source's visual character to the encoder that handles it cleanly. Lossy codecs win on continuous-tone photos and lose on sharp synthetic edges.
| Content | Recommended format | Reason |
|---|---|---|
| Photograph (product, landscape, portrait) | JPEG or WebP | Lossy DCT codec; high ratio at acceptable visual cost |
| UI screenshot with text | PNG | Lossless; preserves sharp edges and 1-pixel strokes |
| Illustration with flat color regions | PNG | Lossy ringing visible on flat fills |
| Hero image with text overlay | WebP | Handles both photo regions and sharp glyphs |
| Image with transparency | PNG or WebP | Only formats with an alpha channel here |
| Animated source | WebP (animated) | Komprs handles static frames in v1; animation deferred |
| Icon below 32×32 | PNG | Predictable rendering at integer pixel scale |
| Social card (OG image, 1200×630) | JPEG | Broadest platform compatibility |
| Photograph at thumbnail size (≤ 300 px) | JPEG @ 70 | Diminishing returns above quality 70 at small dimensions |
| Email inline image | JPEG | Outlook and some Gmail clients shift PNG colors |
Quality slider reference
The slider controls JPEG and WebP lossy quality. Output ratios assume an unoptimized JPEG source from a camera or screenshot tool.
| Quality | Output / original (JPEG) | First visible artifact |
|---|---|---|
| 95 | 85 to 95% | Effectively visually lossless |
| 90 | 65 to 80% | Soft gradients still smooth |
| 85 | 50 to 65% | Web-photo sweet spot; minor banding in sky gradients |
| 82 | 45 to 58% | Slight ringing on high-contrast text edges |
| 80 (default) | 40 to 55% | Subtle mosquito noise around faces at 1:1 zoom |
| 75 | 32 to 46% | Banding becomes visible in gradients |
| 70 | 27 to 38% | Edge ringing on type; lower bound for hero use |
| 65 | 22 to 32% | Acceptable for thumbnails only |
| 60 | 17 to 26% | Blocking artifacts obvious |
| 50 | 11 to 18% | Heavy blocking; placeholder territory |
| 40 | 8 to 13% | Severe blocking |
| 30 | 5 to 9% | Use only as a blurred LQIP placeholder |
PNG output is lossless; the quality slider does not change pixel data. Output size reductions on PNGs come from stripping EXIF, ICC, and ancillary chunks. Expect 5 to 20% reduction on PNGs already saved by a recent editor, more on PNGs that retained large embedded color profiles.
File-size budgets by placement
Targets are based on Lighthouse LCP guidance and CrUX p75 mobile thresholds. The hard ceiling is the value at which the placement starts measurably hurting performance metrics.
| Placement | Format @ quality | Target | Hard ceiling |
|---|---|---|---|
| Above-fold hero, 1920×1080 | WebP @ 80 | 150 KB | 250 KB |
| Above-fold hero, 1200×630 | JPEG @ 82 | 90 KB | 180 KB |
| Inline blog photo, 1200×800 | JPEG @ 80 | 100 KB | 200 KB |
| Product gallery photo, 1500×1500 | WebP @ 80 | 120 KB | 220 KB |
| Product thumbnail, 300×300 | JPEG @ 72 | 18 KB | 35 KB |
| OG / Twitter card, 1200×630 | JPEG @ 82 | 90 KB | 200 KB |
| Email inline, 600 px wide | JPEG @ 80 | 35 KB | 80 KB |
| Author avatar, 96×96 | WebP @ 85 | 5 KB | 12 KB |
| Favicon source, 512×512 | PNG | 12 KB | 25 KB |
| Logo with transparency, UI use | PNG-8 or WebP lossless | 8 KB | 20 KB |
| Listing card photo, 600×400 | JPEG @ 78 | 45 KB | 90 KB |
Browser support for Canvas encoding
HTMLCanvasElement.toBlob(type, quality) and OffscreenCanvas.convertToBlob({type, quality}) accept these MIME types where supported.
| Format | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
image/jpeg | All versions | All versions | All versions | All versions |
image/png | All versions | All versions | All versions | All versions |
image/webp | 23+ | 105+ | 14+ | 79+ |
image/avif (encode) | 102+ | Not supported | Not supported | Chromium-based |
OffscreenCanvas | 69+ | 105+ | 16.4+ | 79+ |
createImageBitmap | 50+ | 42+ | 15+ | 79+ |
Worker-thread OffscreenCanvas | 69+ | 105+ | 16.4+ | 79+ |
Komprs detects OffscreenCanvas and Worker at runtime. On Safari before 16.4 the encoder falls back to main-thread HTMLCanvasElement.toBlob. A WebP-unsupported runtime falls back to re-encoding as the source format with an inline notice on that file.
MIME types, extensions, and file signatures
Sufficient bytes to validate format without a library. Komprs reads the MIME type from the File object and verifies the magic bytes before queueing.
| Format | MIME type | Extensions | First bytes (hex) |
|---|---|---|---|
| JPEG | image/jpeg | .jpg .jpeg .jpe | FF D8 FF |
| PNG | image/png | .png | 89 50 4E 47 0D 0A 1A 0A |
| WebP | image/webp | .webp | 52 49 46 46 ?? ?? ?? ?? 57 45 42 50 |
| GIF (not supported) | image/gif | .gif | 47 49 46 38 |
| HEIC (not supported) | image/heic image/heif | .heic .heif | offset 4: ftypheic / ftypheix / ftypmif1 |
| AVIF (not supported) | image/avif | .avif | offset 4: ftypavif |
| SVG (not supported) | image/svg+xml | .svg | <?xml or <svg (text) |
| BMP (not supported) | image/bmp | .bmp | 42 4D |
What Canvas re-encoding strips and preserves
Re-encoding through <canvas> drops every container property that isn't pixel data. This is a privacy benefit and a color-fidelity hazard worth knowing about.
| Property | Behavior after re-encode |
|---|---|
| EXIF metadata (camera model, GPS, capture time) | Stripped |
| ICC color profile | Stripped (image converted to sRGB) |
| XMP / IPTC metadata | Stripped |
| Orientation tag (EXIF) | Applied, then stripped (image rotated upright) |
| Alpha channel | Preserved for PNG and WebP; dropped for JPEG (composited on white) |
| Bit depth | 24-bit RGB or 32-bit RGBA only; 16-bit-per-channel sources downcast |
| Animation (animated WebP, APNG) | First frame only |
| Wide-gamut color (Display P3, Adobe RGB) | Converted to sRGB |
| Progressive JPEG encoding | Browser chooses; Canvas does not expose the flag |
| Chroma subsampling | Browser chooses (typically 4:2:0); not configurable |
Stripping ICC profiles can shift colors on sources tagged with a wide-gamut profile. For color-critical work (print catalog masters, brand assets sent to a colorist), keep an unstripped original and use Komprs only on the web-bound copy.
Quality picks by use case
When two values are listed, the JPEG pick is the conservative choice and the WebP pick is the byte-saving choice. Both produce visually equivalent output at these settings on typical input.
| Use case | JPEG quality | WebP quality | Notes |
|---|---|---|---|
| Lighthouse-optimized hero | 78 | 75 | Encode both, ship the smaller |
| E-commerce product photo | 82 | 80 | Color accuracy matters on fabric and metal |
| Blog inline photograph | 80 | 78 | Default for editorial content |
| Article featured image | 82 | 80 | Slight bump over inline |
| Documentation screenshot | 90, or use PNG | 88, or use lossless WebP | Sharp text needs the headroom |
| Avatar / profile picture | 85 | 82 | Bytes don't matter at this size; quality does |
| Thumbnail at or under 300 px | 72 | 70 | Diminishing returns above 75 |
| LQIP placeholder | 30 | 30 | Generate alongside the full-quality version |
| Email inline photo | 80 | n/a (use JPEG for mail) | WebP support in mail clients is uneven |
| Social-share OG card | 82 | n/a (use JPEG for share) | Some scrapers reject WebP |
Decision grid: source format and intent to output
| Source | Intent | Output format | Quality | Expected size, 2400×1600 input |
|---|---|---|---|---|
| DSLR JPEG | Hero | WebP | 80 | 110 to 180 KB |
| Phone JPEG | Product photo | JPEG | 82 | 180 to 260 KB |
| iPhone HEIC | Web inline | Convert to JPEG first, then re-encode | 80 | 200 to 320 KB |
| Screenshot PNG | Documentation | PNG | n/a | 60 to 90% of original |
| Flat-color PNG | Illustration | PNG | n/a | Near-original; Canvas does not quantize palettes |
| PNG with alpha | UI asset | PNG or WebP lossless | n/a | Metadata stripped only |
| Photograph with alpha | Composited card | WebP (lossy) | 80 | 130 to 200 KB |
| Transparent logo | UI use | PNG-8 or WebP lossless | n/a | Often 60 to 85% of original |
Related concepts
- Lighthouse LCP (Largest Contentful Paint)
- The Core Web Vitals metric that drives the hero-image byte budgets above.
- Responsive images (
srcset,<picture>) - Serve different sizes per viewport from one compressed master.
- Image CDN
- Runtime resize and re-encode service. Sometimes redundant with pre-compressed assets.
- MIME type sniffing
- Detecting format from the leading bytes rather than the filename extension.
- Lossless vs. lossy compression
- Lossless preserves every source bit; lossy discards perceptually weak data for ratio.