liveBook · Manning

PNG

As explained in Web Design Playground, Second Edition

PNG is a lossless raster image format that supports indexed, grayscale, and truecolor images, including alpha transparency.

PNG is a lossless raster image format for web graphics. It supports indexed, grayscale, and truecolor images, including alpha transparency, making it a strong fit for illustrations, logos, and icons with mostly solid colors. section 6.17 section 6.2

Choose PNG when:

  • Your graphic needs transparency, such as a logo or icon placed over a page background. section 6.17
  • A simple image can use 8-bit color, limited to 256 colors, for a smaller file. section 6.13
  • A more complex graphic needs the full 24-bit palette; optimization tools can still reduce its file size. section 6.13

A web-ready logo

Save a simple logo as <code>atomic-logo.png</code>, then place it on a page with <code>&lt;img src="atomic-logo.png" alt="Atomic logo"&gt;</code>. A transparent background lets the page show through around the artwork. section 6.2 section 6.17

How Web Design Playground, Second Edition covers it

How deep it goes
Explains PNG use, color-depth choices, and optimization, but stops short of describing encoding internals.
Examples
Uses an atomic-logo.png example, simple logos and icons, 8-bit color, 24-bit palettes, and PNG optimization tools.
What you can do after
Apply it via PNG color-depth choices, image optimization tools, and the HTML img element.
How it connects
Connects PNG with JPEG, GIF, SVG, image compression, transparency, and the HTML img element.
Cover of Web Design Playground, Second Edition
liveBookmanning.com
Read Web Design Playground, Second Edition on liveBook Get the book at manning.com

Also explained in

Compare how 2 books explain PNG →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.