Images for the Web

PNG Image Format: Lossless Graphics and Transparency

PNG keeps exact pixels and alpha transparency, which makes it strong for screenshots, logos, UI graphics, and diagrams but heavy for photos.

5 min read

A minimal browser window illustration showing an image divided into four labeled formats: JPEG, PNG, WebP, and SVG.

PNG is a lossless raster format. It keeps every pixel intact, including alpha transparency, so it is reliable for screenshots, interface graphics, logos, diagrams, and images with hard edges.

The cost is size. PNG refuses to discard detail, which makes it a poor choice for most photos.

Lossless pixels

Lossless means the decoded image matches the stored image exactly. PNG does not soften edges, blur text, or invent compression blocks the way a low-quality JPEG can.

That makes PNG a good fit for:

  • screenshots with small text
  • product UI captures
  • logos exported as raster files
  • icons with transparent backgrounds
  • diagrams and badges
  • images with flat color regions

If the exact pixel matters, PNG is safer than JPEG.

How PNG compression works

PNG does not save pixels naively. Before compression, it filters each row so repeated patterns become easier to store. Then it uses DEFLATE compression, the same family of compression used by ZIP files.

Flat areas, repeated colors, and sharp regions compress well. Photographs do not. A photo has too much small variation for PNG to pack efficiently without losing detail, and PNG does not allow that loss.

Alpha transparency

PNG supports full alpha transparency. A pixel can be fully opaque, fully transparent, or anywhere between those states.

That matters for soft shadows, antialiased logo edges, stickers, UI overlays, and assets that need to sit on different backgrounds.

JPEG cannot store alpha transparency. WebP can, but PNG remains a safe exchange format for many design and CMS tasks.

When PNG gets too large

A PNG photo can be many times larger than a JPEG or WebP version of the same image. If the image is a real-world photo, a large product shot, or a hero background, PNG is the wrong output.

Convert heavy photo-like PNG files to JPEG or WebP:

  • PNG to JPEG when transparency is not needed.
  • PNG to WebP when you want smaller web delivery and alpha support can remain.

Then run a visual check with Image Compressor if the output still needs a smaller file size.

PNG vs SVG

PNG is still a pixel grid. If a logo or icon began as vector artwork, SVG is a better web asset because it scales without needing 1x, 2x, or 3x raster exports.

Use PNG when you need a raster screenshot, a transparent bitmap, or a design-tool export that must preserve exact pixels. Use SVG when the asset is made from shapes and should scale at many sizes.

Next in the format series: WebP image format.

Read More From Our Blog

Read the blog →

Explore Our Tools

Browse all tools