ALLONLINE STORIES · VOL. III · TRANSPARENCY EXPLAINED

PNG

Transparency became information. How an open format turned alpha, scanline filters and lossless compression into one of the most reliable ways to transport digital graphics.

1996 → today16–18 min interactive readLossless by designPer-pixel alpha

01 · Every pixel countsPNG prioritizes exact reconstruction, reliable colour and an open chunk-based structure.

02 · Real transparencyRGBA separates colour from coverage so the same graphic can compose over any background.

03 · Compress without forgettingFilters and DEFLATE look for patterns without approximating the original values.

04 · Choose the right PNGPalette, truecolor, Adam7, metadata and alternatives depend on the real destination.

Scroll into the layers

01 · WHY PNG

PNG does not guess what you can stop seeing. It preserves what you exported.

Born in 1996 as an open alternative for web graphics, PNG found a precise role: interfaces, screenshots, illustrations and assets where edges, colour and transparency need to survive intact.

OPENPNGlossless · alpha · colour

EXACTPixels can be reconstructed without loss.

TRANSPARENTAlpha can vary from pixel to pixel.

STRUCTUREDChunks separate image data, colour and metadata.

02 · ANATOMY

A PNG is a sequence of chunks with very clear rules.

The signature identifies the file. IHDR defines its essential properties. One or more IDAT chunks contain compressed image data. IEND closes the structure. Palettes, colour profiles, text and other auxiliary pieces can live between them.

PNG SIGNATURE

The eight-byte signature identifies the file before any chunk is interpreted.

03 · RGBA

Transparency is not an effect. It is per-pixel information.

In truecolor with alpha, every pixel can store red, green, blue and an independent alpha channel. Separating them explains why PNG can preserve soft edges without painting a background into the image.

RGBA

4 active channels · full colour + transparency

04 · ALPHA COMPOSITING

The same pixel can live on any background.

Alpha describes coverage or opacity. The browser blends the pixel colour with whatever is behind it, so a semi-transparent edge can look natural on white, black, colour or an image.

PNG

Alpha72%

05 · FILTERS

Before DEFLATE, PNG tries to make each scanline more predictable.

Each row can use None, Sub, Up, Average or Paeth. The filter removes no information: it temporarily transforms values so patterns and small differences appear and compress better afterwards.

SUBstores differences from the previous pixel in the row

06 · DEFLATE

Lossless means rebuilding exactly the same values.

After filtering, PNG uses DEFLATE: repeated-sequence matching combined with statistical coding. The goal is to describe the same data with fewer bits, not approximate it.

07 · PALETTE VS TRUECOLOR

Sometimes 32 colours are smarter than millions.

PNG can store indexed colour through a palette or direct colour per pixel. For icons, pixel art and graphics with few tones, a compact palette can reduce the file substantially without making it lossy.

Palette colours32

INDEXEDVery efficient for graphics with limited colour

08 · ADAM7

An interlaced image can reveal itself in seven passes.

Adam7 distributes pixels across seven maps. Early passes provide a sparse structure; each later pass fills the gaps until the complete image is reconstructed. It changes arrival order, not the final result.

Pass 1 / 7Explore passes

09 · APNG

PNG also learned to move.

APNG adds multiple frames, duration, blending and disposal to the PNG ecosystem. It is useful for animation with transparency, although web delivery should still compare weight and support with WebP and other modern formats.

FRAME 01 → 04

10 · COLOUR AND METADATA

A PNG can carry more context than you can see.

Ancillary chunks can describe gamma, chromaticities, ICC profiles, sRGB intent and text. That information can improve consistency between applications, but it also adds bytes and complexity that should be kept deliberately.

Reliable colour does not mean storing everything. Keep only what your workflow needs.

11 · WHEN TO USE IT

PNG wins when every pixel matters. It loses when every byte matters more.

Interfaces, rasterized logos, screenshots, text-heavy graphics and transparency are natural PNG territory. A large photograph usually compresses much better with formats designed for perceptual loss.

IDEALUI and screenshots

Text, icons and hard edges stay crisp because compression does not approximate pixels.

Prioritize correct dimensions and lossless compression.

✓UI + screenshotsCrisp edges and text.

✓AlphaSmooth, predictable transparency.

△PhotographyLossless is usually too heavy.

△Huge imagesMore pixels mean more memory and bytes.

12 · WORKFLOW

Optimizing PNG means choosing structure before chasing a KB number.

Trim dimensions, decide whether alpha is needed, reduce the palette when appropriate, keep only useful metadata and check whether WebP fits the destination better.

01Size to the real display dimensions.
02Decide whether you need alpha, truecolor or a palette.
03Optimize filters, palette and metadata.
04Compare with WebP when the goal is web delivery.

From transparency to action

Keep every pixel. Remove only what is unnecessary.

Compress PNG, inspect alpha, extract palettes or compare a WebP output. Every tool runs directly in your browser.

Compress PNG Check transparency Extract palette PNG to WebP

AllOnline Stories · Understanding transparency changes how you export it.

PNG