You export a logo from Figma. It's a flat icon with maybe six colors and a transparent background. The preview looks perfectly fine — clean, crisp, simple. Then you check the file size: 340 KB. You try a photo taken on your phone. That's 4.2 MB. The PNG your designer sent over for the hero section? 2.8 MB. Meanwhile, the JPEG version your colleague made looks nearly identical at 190 KB.
So what's going on? Why are PNG files so unreasonably large — and does it have to be this way?
The answer comes down to a few specific, fixable things: the lossless guarantee PNG makes, the way design tools export by default, and a handful of hidden overhead sources most people never see. Once you understand what's actually inflating your PNG files, you know exactly where to apply pressure to shrink them.
PNG files are large because the format stores every pixel exactly as-is — no quality shortcuts allowed. On top of that, most design tools export with unnecessary metadata, an oversized alpha channel even when there's no transparency, and suboptimal compression settings. The result is files 3–10× larger than they need to be. The fix: strip metadata, pick the right color type, and recompress with a proper optimizer — or switch to WebP entirely.
1. What PNG actually is
PNG — Portable Network Graphics — was created in the 1990s as a patent-free replacement for GIF. Its defining principle is simple and absolute: every pixel decoded from a PNG file must be bit-for-bit identical to the original. No rounding, no approximation, no information discarded. This is called lossless compression, and it is simultaneously the reason PNG exists and the reason PNG files are so large.
Lossless compression means the format can rearrange and encode data more efficiently, but it cannot throw any of it away. JPEG, by contrast, is a lossy format — it identifies image data the human eye is unlikely to notice and discards it. The result is dramatically smaller files, at the cost of very subtle quality changes that are usually imperceptible at normal quality settings.
PNG doesn't get that option. Every single pixel value — red, green, blue, and alpha — must be preserved exactly. That's the constraint the entire file format is built around, and it's why PNG files are inherently larger than their lossy counterparts for the same visual content.
2. Why PNG file size matters for your site
Images are consistently the largest contributor to page weight on the web — often 50–80% of the total bytes a visitor downloads. A single oversized PNG on your homepage can add 2–3 seconds to your load time on a standard mobile connection. That has direct, measurable consequences:
Google's Core Web Vitals — specifically Largest Contentful Paint (LCP) — directly penalizes pages with large unoptimized images. If your hero image is a 2 MB PNG, you are paying an SEO penalty on every page load. Image optimization is one of the highest-ROI performance improvements available, and PNG is where most sites have the most room to improve.
3. The real reasons PNG files are so large
There are several distinct causes. Most large PNGs have more than one of them stacked on top of each other.
PNG's core design stores complete, exact pixel data. For a 1920×1080 RGBA image, that's 1920 × 1080 × 4 = 8,294,400 bytes of raw data before compression even starts. DEFLATE compression (PNG's algorithm) can reduce this, but it can't approach the size a lossy format achieves by approximating similar-looking data.
Design tools export almost everything as RGBA — 4 bytes per pixel — even when there is no transparency at all. That invisible alpha channel (storing 255 for every pixel) adds 25% to the raw data footprint before any compression. For a flat logo with 8 colors, the file should be indexed (1 byte per pixel). Exporting it as RGBA uses 4× more raw data as input to the compressor.
Every design tool and camera embeds metadata into exported images. Figma adds software tags. iPhones embed GPS coordinates, camera model, shutter speed, focal length, and color profiles. Adobe tools embed full XMP data blocks. None of this affects how the image looks on screen — but it can add 10–30 KB of pure overhead to every file.
PNG uses DEFLATE (the same algorithm as ZIP) to compress pixel data. DEFLATE has compression levels from 1 (fast, large output) to 9 (slow, small output). Most design tools default to level 6 or below for export speed. Running the same file through a dedicated optimizer at level 9 — or using Google's Zopfli, which squeezes even further — recovers another 5–20% without changing a single pixel.
Photographs have millions of subtle color variations and noise patterns that lossless compression handles extremely inefficiently. A photographic PNG is almost never the right choice — the same image as a JPEG at quality 85 looks virtually identical and is 5–10× smaller. Using PNG for photos isn't just suboptimal; it's a fundamental format mismatch.
Exporting a 2400×1600 PNG for a hero image displayed at 1200×800 means the browser downloads exactly twice as many pixels as it renders — before any compression is even considered. Dimension mismatch is often responsible for more excess file size than poor compression settings, and it's the first thing to fix.
Design tools frequently embed a full ICC color profile — a 2–3 KB binary blob that precisely describes the color space of the image. For web delivery, a 3-byte sRGB chunk conveys the same information. The iCCP chunk is one of the most common sources of hidden bloat in professionally-exported PNGs, and stripping it (or converting to sRGB) is always safe for web use.
4. Step-by-step: how to make PNG files smaller
These steps are ordered by impact. Do them in sequence — each one compounds with the next.
Before touching compression, check whether your image dimensions match the space it occupies. For a slot that renders at 800px wide, your PNG should be 800px (or 1600px for retina). Anything beyond that is pure download waste. Resize down in your design tool before export, or use a tool like Sharp/ImageMagick in your build pipeline.
If it's a photograph with no transparency — switch to JPEG or WebP. If it's a logo or icon made of geometric shapes — switch to SVG. Only keep it as PNG if it genuinely needs lossless pixel preservation (screenshots, UI elements with transparency, assets that will be edited further). The format decision is more important than any compression setting.
Remove tEXt, iTXt, gAMA, cHRM, iCCP, bKGD, pHYs, and sBIT chunks. These carry zero visual information and are ignored by web browsers for rendering purposes. Most dedicated PNG optimizers do this with a single flag (—strip all in OxiPNG). This step alone routinely saves 5–30 KB per file.
If your image has no transparent pixels, convert from RGBA (4 bytes/px) to RGB (3 bytes/px) — a free 25% reduction in raw data. If it uses fewer than 256 distinct colors, convert to indexed mode (1 byte/px) — a further 3–4× reduction in input data before DEFLATE even runs. A good optimizer does this automatically.
Palette quantization — reducing the color count to 256 or fewer perceptually-chosen colors — cuts file size 50–80% with changes the human eye rarely notices at quality settings of 80+. This is what tools like pngquant do. Run quantization before lossless recompression for best results.
Pass the file through a dedicated lossless recompressor — OxiPNG, Zopfli, or optipng at maximum settings. These try more filter combinations and compression strategies than design tool exporters do. Combined with the previous steps, this typically delivers another 5–15% on top of what quantization already achieved.
For any lossy step (quantization), compare input and output at 100% zoom — especially in areas with gradients, skin tones, or subtle shadows. A file size number alone is not sufficient QA. If you see banding or color shifts, increase the quality setting and rerun.
5. Common mistakes that make PNG files even bigger
Photos stored as PNGs are almost always 5–10× larger than their JPEG equivalents at comparable visual quality. PNG's lossless guarantee is completely wasted on photographs — the camera sensor already introduced far more imprecision than JPEG compression at quality 85 ever would.
Running an optimizer on a PNG that was already exported at a low compression setting by your design tool creates two competing compression decisions. Export at maximum quality and zero compression from your tool, then apply all optimization in a single dedicated pass.
Compressing a 2000×2000 PNG perfectly and displaying it in a 200×200 slot still means 100× more pixels than the browser renders. No compression algorithm can recover the savings that a simple resize delivers. Always resize before compressing.
A flat logo with 6 colors and a gradient-heavy illustration need completely different compression strategies. Flat graphics should become indexed PNGs; illustrations may need dithering; screenshots should stay lossless. One setting for all images means suboptimal results everywhere.
Image assets change. New team members upload raw exports. Your CMS accepts user uploads without processing. A one-time fix drifts over time. Build compression into your deployment pipeline so every image that reaches your CDN has already been processed.
6. Real-world examples
These examples show exactly what's happening at each stage of optimization on common PNG use cases.
7. PNG vs. other formats: file size comparison
Understanding when PNG is genuinely the right tool requires comparing it against its alternatives on real content categories.
| Content Type | PNG | JPEG (q85) | WebP Lossless | WebP Lossy | SVG | Best Choice |
|---|---|---|---|---|---|---|
| Photograph, no transparency | 3.8 MB | 380 KB | 2.9 MB | 280 KB | N/A | WebP Lossy |
| Logo / flat icon | 61 KB | N/A (no alpha) | 40 KB | 28 KB | 4 KB | SVG |
| UI element with transparency | 274 KB | — | 195 KB | 110 KB | N/A | WebP Lossy |
| Screenshot / UI recording | 890 KB | 210 KB | 670 KB | 160 KB | N/A | PNG (lossless) |
| Animated content | APNG ~4 MB | — | — | WebP anim 900 KB | N/A | WebP Animation |
The pattern is clear: PNG wins only in narrow cases where lossless preservation genuinely matters — screenshots, assets for further editing, UI elements where exact color must be preserved. For everything else, a format better suited to the content type will be dramatically smaller with equivalent or superior visual quality.