PNG files leave your design tool looking fine. They arrive in your browser weighing three times what they should. The gap between those two moments — the export and the delivery — is where most teams lose page speed, Core Web Vitals points, and conversion rate, often without knowing why. The problem isn't that PNG compression is hard. It's that the wrong techniques get applied, or the right ones get applied in the wrong order. A logo compressed with photo settings. A photograph stored as PNG when it should never have been. Metadata from a camera's GPS sensor silently riding along with every hero image.
This guide covers every technique that actually works — ranked, explained, and ready to apply today.
The best PNG compression technique for most web images is a two-pass approach: run pngquant first (lossy palette quantization at quality 85–100) to cut colors, then pass the result through OxiPNG (lossless DEFLATE recompression) to squeeze the compressed stream further. Always strip metadata first. This combination typically achieves 60–80% file size reduction with no visible quality loss.
1. What is PNG compression?
PNG compression is the process of reducing a PNG file's size by encoding its pixel data more efficiently. Every PNG file is built from chunks — self-contained data blocks that include image pixels, metadata, and color profiles. The pixel data inside a PNG is compressed using DEFLATE, the same algorithm used in ZIP files, applied to a pre-processed, filtered version of the pixel stream.
There are two fundamentally different approaches, and mixing them up is where most people go wrong:
- Lossless compression re-encodes the DEFLATE stream more aggressively and strips unnecessary chunks, without changing a single pixel value. The decoded image is bit-for-bit identical to the original.
- Lossy compression reduces the number of colors in the image — mapping millions of shades down to the 256 most perceptually important ones through palette quantization. Pixel values change, but the visual result is indistinguishable from the original at quality settings of 80 or above.
Understanding this split explains why some techniques save 8% and others save 75%. Lossless recompression is a tune-up. Lossy quantization is a rebuild. Both have their place — and the best results come from applying both, in the right order, to the right images.
2. Why PNG compression matters for your site
Images are the single largest contributor to page weight on most websites. PNG is the format most commonly misused — chosen out of habit for photographs, exported at maximum quality, and served with metadata intact. The downstream effect is real and measurable.
Google's Largest Contentful Paint (LCP) — the Core Web Vitals metric directly tied to perceived load speed and search ranking — is most frequently caused by an unoptimized above-the-fold image. A 1.2 MB hero PNG that should be a 90 KB WebP is not an edge case; it's one of the most common audit findings on real production sites.
Compressing PNG files correctly is one of the highest-ROI optimizations available because it requires no code changes, no infrastructure work, and no trade-off in visual quality when done well.
3. Step-by-step PNG compression guide
Follow these steps in order. Each one builds on the previous. Skipping to step 4 without doing step 1 is one of the most common reasons compression results are disappointing.
Before compressing anything, ask: should this even be a PNG? Photographs belong in JPEG or WebP. Logos and icons with geometric shapes belong in SVG. Only images that need lossless preservation and transparency should stay as PNG. Changing format is almost always more effective than compressing harder within the wrong one.
Compression cannot fix a 2000×2000 image served in a 400×400 container. Resize first, then compress. For retina displays, serve a 2× version (800×800) via HTML srcset — not a 5× oversized original. Resizing to display dimensions alone routinely produces 80–95% file size reductions that no compression algorithm can match.
Remove tEXt, iTXt, iCCP, gAMA, cHRM, bKGD, pHYs, and sBIT chunks. These are invisible to browsers but can add 5–30 KB per file. Phone photos carry GPS coordinates; design tool exports carry Adobe XMP blocks and color profiles. Stripping them is always safe for web use and is also a user privacy requirement for platforms that accept image uploads.
Design tools default to RGBA (4 bytes per pixel). If your image has no transparent pixels, convert to RGB (3 bytes). If it uses fewer than 256 distinct colors, convert to indexed/palette mode (1 byte per pixel). This single step — changing from RGBA to indexed — reduces the raw data entering the compressor by 75%, producing dramatically better DEFLATE results downstream.
Use pngquant at quality 85–100 to map the image to a 256-color palette. This is where the largest savings come from — typically 50–70% reduction. Enable Floyd-Steinberg dithering for images with gradients; disable it for flat graphics with large solid areas (dithering adds noise that DEFLATE cannot compress). Always inspect the output at 100% zoom before shipping.
Pass the quantized output through OxiPNG or a Zopfli-based compressor. This re-runs the DEFLATE stage at maximum effort — testing all five PNG filter types per row, exploring more LZ77 back-reference paths, and stripping any remaining metadata. Adds another 5–15% on top of the quantization savings with zero additional quality cost.
Compare the output against the original at 100% zoom — check gradients, text, edges, and skin tones. Then verify the file size meets your budget: hero images should be under 100–150 KB, UI icons under 8 KB, product thumbnails under 40 KB. If a file still exceeds budget after compression, the answer is usually a format switch (to WebP) rather than more aggressive compression.
# Pass 1: Lossy quantization (quality 85–100, maximum effort)
pngquant --quality=85-100 --speed=1 --output=step1.png input.png
# Pass 2: Lossless recompression + strip all metadata
oxipng --opt max --strip all --out output.png step1.png
For lossless-only workflows (screenshots, text-heavy images)
# Lossless recompression with metadata strip — no pixel changes
oxipng --opt max --strip all --out output.png input.png
# With Zopfli for ~3–8% additional savings (slower)
oxipng --opt max --strip all --zopfli --out output.png input.png
Serving the compressed file correctly
Compression is wasted if the file isn't served correctly. Set these attributes on every image tag to prevent layout shift and ensure the browser picks the right size for the display:
<img
src="hero-400.png"
srcset="hero-400.png 400w, hero-800.png 800w"
sizes="(max-width: 600px) 400px, 800px"
alt="Descriptive alt text"
width="800"
height="450"
loading="lazy"
>
4. Common PNG compression mistakes
These aren't rare edge cases. They appear across thousands of production sites and each one represents recoverable file size that's actively slowing your pages down.
Photographs have millions of colors and continuous gradients — exactly what PNG's lossless approach handles worst. A 500 KB JPEG and a 2.5 MB PNG of the same photo look identical on screen. If you're storing photos as PNGs, switch formats. No amount of PNG compression will close that gap.
Every design tool defaults to RGBA exports. If the image has no transparent pixels, that alpha channel stores 255 (fully opaque) for every pixel — 25% extra data that encodes nothing. A good optimizer catches this, but checking color type at export time is faster and more reliable.
An iPhone photo embedded in a PNG can carry 10–30 KB of EXIF data: GPS coordinates, camera model, shutter speed. Design tool exports carry Adobe XMP blocks and full ICC color profiles. None of this affects browser rendering. Stripping it is always safe — and for platforms hosting user-uploaded images, it's a user privacy requirement.
Compressing a 2000×2000 PNG perfectly and displaying it in a 200×200 container is not optimization. The browser downloads 100× more pixel data than it renders. Resize to display dimensions first, then compress. This step alone often outperforms every compression technique combined.
A flat logo with 8 colors and a gradient-heavy illustration respond completely differently to quantization settings. Flat graphics need indexed mode with no dithering. Complex images need higher color counts with Floyd-Steinberg dithering. A single preset applied to all images produces suboptimal results across the board.
A file size number is not a quality check. Lossy quantization at aggressive settings can produce visible banding in gradients, color shifts on skin tones, and edge artifacts on anti-aliased text. Check the output at 100% zoom — especially on smooth gradients, fine typography, and images with precise brand colors.
Image assets change. New team members upload unoptimized PNGs. A CMS accepts uploads without processing. A design tool update changes export defaults. A one-time optimization erodes under real production conditions. Automated compression in your build pipeline or upload pipeline is the only approach that holds.
5. Real-world examples
These examples show what each technique achieves on the image types it's actually suited for. The numbers are representative of typical results — your specific images will vary based on content complexity and color distribution.
Original: 48 KB RGBA export from Figma, 512×512, 12 distinct colors. After converting to indexed mode (1 byte/pixel) + OxiPNG lossless recompression: 6.2 KB. No visual change detectable at any zoom level.
Original: 210 KB RGBA PNG, complex gradient background, semi-transparent elements. After pngquant at quality 90 + OxiPNG: 52 KB. Gradient banding imperceptible at 100% zoom with Floyd-Steinberg dithering enabled.
Original: 890 KB full-page screenshot with pixel-precise text rendering. Lossless only: OxiPNG strips metadata and recompresses → 640 KB. Lossy quantization avoided — text anti-aliasing requires precise color values that quantization degrades visibly.
Original: 3.2 MB RGBA PNG, no transparency used. Correct fix: convert to WebP lossy at quality 85 → 180 KB. A PNG compressor would have produced ~2.6 MB at best. Format choice, not compression level, is the lever here.
6. PNG compression technique comparison
Use this table to match technique to image type. The right combination depends on content, use case, and whether the image is a candidate for format conversion.
| Technique | Best For | Typical Savings | Quality Impact | Tools |
|---|---|---|---|---|
| Metadata stripping | All PNGs — always run first | 5–30 KB / file | None | OxiPNG, ImageOptim |
| Color type reduction (RGBA → RGB or indexed) | Logos, icons, flat graphics | 25–75% | None | OxiPNG, pngquant |
| Lossless DEFLATE recompression | Screenshots, text, master files | 5–25% | None | OxiPNG, Zopfli |
| Lossy palette quantization | UI graphics, illustrations, icons | 50–80% | Imperceptible at q80+ | pngquant, Rebrixe |
| Two-pass (quantize + recompress) | Most web images requiring transparency | 60–80% | Imperceptible at q85+ | pngquant + OxiPNG |
| Convert to WebP | Any image where PNG isn't required | 25–80% over optimized PNG | None (lossless) / Imperceptible (lossy) | cwebp, Rebrixe, Sharp |
| Convert to JPEG | Photographs without transparency | 70–90% over equivalent PNG | Minimal at q82–88 | Any image tool |
| Convert to SVG | Logos, icons, geometric vector art | 70–95% (size + infinite scaling) | Better — vector is sharper | Illustrator, Inkscape, SVGO |
7. Compress your PNG files now
All the techniques described in this guide — metadata stripping, color type reduction, lossy quantization, and lossless DEFLATE recompression — are built into the Rebrixe PNG Compressor. It runs entirely in your browser. Your images never leave your device.
Compress your PNG files — free, instant, private
Lossless and lossy modes. Metadata stripped automatically. No signup required. Runs entirely in your browser — your files stay on your device.
Launch the PNG Compressor →Need a different format? We have dedicated compressors for every common image type: