<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[png.now]]></title><description><![CDATA[png.now]]></description><link>https://pngnow.hashnode.dev</link><generator>RSS for Node</generator><lastBuildDate>Thu, 12 Nov 2026 07:29:01 GMT</lastBuildDate><atom:link href="https://pngnow.hashnode.dev/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[Why is this PNG so big? Lossless optimization, PNG-8 palettes, and when to leave PNG behind]]></title><description><![CDATA[PNG has a reputation for being "the big format". Sometimes that is fair: a photo saved as PNG really will be several times larger than a decent JPG. But a…]]></description><link>https://pngnow.hashnode.dev/why-is-this-png-so-big-lossless-optimization-png-8-palettes-and-when-to-leave-png-behind</link><guid isPermaLink="true">https://pngnow.hashnode.dev/why-is-this-png-so-big-lossless-optimization-png-8-palettes-and-when-to-leave-png-behind</guid><category><![CDATA[images]]></category><category><![CDATA[PNG]]></category><category><![CDATA[webdev]]></category><category><![CDATA[performance]]></category><dc:creator><![CDATA[png.now]]></dc:creator><pubDate>Tue, 10 Nov 2026 17:40:30 GMT</pubDate><content:encoded><![CDATA[<p>PNG has a reputation for being "the big format". Sometimes that is fair: a photo saved as PNG really will be several times larger than a decent JPG. But a lot of oversized PNGs are not big because of PNG itself. They are big because of how they were saved.</p>
<p>I build png.now, a toolkit focused on PNG files, and the most common question we get is some version of "how do I make this smaller without making it worse?" This explainer covers how PNG compression works, where the waste usually hides, and when the right answer is a different format.</p>
<h2>How PNG compression works, briefly</h2>
<p>PNG is lossless. Every pixel you put in comes back out exactly. It gets its size savings in two stages:</p>
<ol>
<li><strong>Filtering.</strong> Each row of pixels is transformed using one of five filters, which describe each pixel relative to its neighbours. On smooth or repetitive images, this turns the data into lots of small, similar numbers.</li>
<li><strong>DEFLATE compression.</strong> The filtered data is compressed with DEFLATE, the same algorithm used in ZIP files.</li>
</ol>
<p>Because both steps have choices, such as which filter for which row and how hard DEFLATE should try, two PNGs containing identical pixels can differ a lot in file size. Many export tools pick fast settings rather than small ones.</p>
<h2>Where the waste usually hides</h2>
<h3>1. The wrong colour type and bit depth</h3>
<p>PNG supports several colour types: greyscale, greyscale with alpha, truecolour (RGB), truecolour with alpha (RGBA), and indexed colour (a palette of up to 256 colours). It also supports bit depths from 1 to 16 bits per channel.</p>
<p>A logo with eight flat colours saved as 16-bit RGBA stores far more information per pixel than it needs. The same image as an 8-bit palette PNG holds exactly the same pixels in a fraction of the space. Common offenders:</p>
<ul>
<li>Screenshots saved with an alpha channel that is fully opaque everywhere</li>
<li>16-bit exports from design or scientific tools when 8 bits would look identical</li>
<li>Greyscale images stored as RGB</li>
</ul>
<h3>2. Metadata and extra chunks</h3>
<p>A PNG file is a series of <strong>chunks</strong>. The essential ones hold the image header, palette and pixel data. Optional chunks can hold text (<code>tEXt</code>, <code>iTXt</code>, <code>zTXt</code>), EXIF data (<code>eXIf</code>), embedded colour profiles (<code>iCCP</code>), gamma and colour information, timestamps, and application-specific data.</p>
<p>Design tools sometimes write large chunks of editor data into exported PNGs. An embedded ICC profile can add a noticeable amount on a small icon. For web graphics, most of this can go. For print or colour-critical work, you may want to keep the colour profile.</p>
<h3>3. Non-optimized compression</h3>
<p>Even with the right colour type and no extra chunks, the default compression from many apps leaves savings on the table. Lossless optimizers try different filter strategies and stronger DEFLATE settings to find the smallest encoding of the same pixels. Well-known open-source tools include <code>oxipng</code> and <code>optipng</code>. The result is pixel-for-pixel identical, just smaller.</p>
<h3>4. Photographic content</h3>
<p>This is the case where PNG genuinely is the wrong format. Photos have noise and fine gradients that filtering and DEFLATE cannot compress well. No amount of lossless optimization will get a photo PNG down to JPG or WebP sizes.</p>
<h2>Lossless vs. lossy PNG optimization</h2>
<p>There are two families of PNG optimization, and it is worth being clear which one you are using.</p>
<p><strong>Lossless optimization</strong> keeps every pixel identical. It changes colour type when that is safe, strips unneeded chunks, and recompresses. Savings vary from almost nothing to quite a lot, depending on how the file was originally saved.</p>
<p><strong>Palette quantization</strong> converts a truecolour image into an 8-bit palette of up to 256 colours, often with alpha preserved. Tools like <code>pngquant</code> do this. It is technically lossy, because colours are merged, but on flat graphics, icons and many screenshots, the difference is very hard to see, and the file can shrink dramatically. On photos or smooth gradients, you may see banding.</p>
<p>The safe workflow: try lossless first. If the file is still too large and the image is a graphic rather than a photo, try a palette version and compare them side by side.</p>
<h2>When to leave PNG behind</h2>
<p>PNG is the right choice for screenshots with text, logos, icons, line art, UI assets, and anything that needs exact pixels or transparency in a widely supported format. It is the wrong choice for:</p>
<ul>
<li><strong>Photos on the web</strong>: use JPG, WebP or AVIF.</li>
<li><strong>Large graphics where size matters most</strong>: WebP lossless is usually smaller than an optimized PNG of the same image, and WebP and AVIF both support transparency.</li>
<li><strong>Animations</strong>: APNG works in modern browsers, but for long or complex animations a video format is usually much smaller.</li>
</ul>
<p>When converting, keep in mind that transparency only survives if the destination supports it. JPG does not, so transparent areas get filled with a background colour.</p>
<h2>A practical checklist</h2>
<ol>
<li><strong>Is it a photo?</strong> Convert to JPG, WebP or AVIF.</li>
<li><strong>Is the alpha channel actually used?</strong> If not, drop it.</li>
<li><strong>Does it need more than 256 colours?</strong> If not, try a palette PNG.</li>
<li><strong>Does it need 16 bits per channel?</strong> For the web, almost never.</li>
<li><strong>What metadata is inside?</strong> Inspect the chunks and strip what you do not need.</li>
<li><strong>Run a lossless optimizer.</strong></li>
<li><strong>Compare the result with the original</strong> at 100% zoom before replacing it.</li>
</ol>
<h2>How we approach this at png.now</h2>
<p>We built png.now around that checklist rather than around a single "compress" button. It has a Lossless PNG Optimizer, a PNG-8 Palette Optimizer, a Chunk Inspector that shows what is inside the file, a Metadata Viewer &amp; Remover, a Transparency Editor, and a PNG Image Diff for checking that an optimized file still matches. When PNG is the wrong format, the converter turns PNG into JPG, WebP, AVIF, PDF, GIF, BMP, TIFF and ICO, preserving transparency where the destination supports it.</p>
<p>Whatever tool you use, the order matters: inspect first, change the colour type and metadata second, recompress last, and always compare. If you want to see what is hiding in one of your own PNGs, the chunk inspector on <a href="https://png.now">png.now</a> is a quick place to start.</p>
]]></content:encoded></item></channel></rss>