What is a Portable Network Graphics (PNG) file?
PNG is an image file format built for the web in the mid-1990s as a free replacement for GIF, whose compression was patented at the time. It stores images losslessly, which means the file can be opened, saved and opened again without any change to the pixels, unlike JPEG, which throws information away each time it compresses. It supports an alpha channel, so parts of an image can be fully or partly transparent, and it handles millions of colors.
There are two common flavors. PNG-8 stores up to 256 colors in a palette and produces small files for flat graphics such as icons and simple logos. PNG-24 stores full color and, with its alpha channel, is the version used for anything with gradients, soft edges or transparency. The format does not do animation in its standard form, does not store CMYK color and was never intended for print.
Its place in the family is clear. JPEG is for photographs, where small losses are invisible and file size matters. SVG is for vector artwork that must scale without blurring. GIF survives for short animations. WebP and AVIF are the newer formats that do most of what PNG and JPEG do in smaller files. PNG is for the pixel-exact image with a transparent background.
Why it matters
Why a PNG matters
Image format decisions are brand decisions and performance decisions at the same time. A logo saved as a JPEG grows a halo of artifacts around every edge, which is the fastest way to make a brand look cheap on its own website. The same logo as a PNG with transparency sits cleanly on any background, which is why every brand guideline specifies it. Screenshots, charts, interface elements and text rendered as images all need the same exactness.
The cost is size. A PNG of a photograph can be many times larger than the equivalent JPEG, and large images are the most common reason web pages load slowly. Page speed affects search rankings and whether visitors stay, so using PNG where it is not needed is a quiet tax on the whole site. Knowing when to use it and when not to is part of making a website that looks right and loads fast.
In practice
How a PNG works in practice
- 01
Designers export PNGs from their tools for anything that needs transparency or exact pixels: logos, icons, interface graphics, diagrams. PNG-8 is chosen for flat color, PNG-24 for gradients and soft edges. Files are then compressed with tools that reduce size without visible change, which can cut a PNG by half or more. Where the artwork is vector, SVG is used instead, because it scales to any size and is usually smaller.
- 02
On the web the PNG is often the source rather than the thing served. Modern content systems and image services convert uploads to WebP or AVIF for browsers that support them and fall back to the PNG for those that do not, which keeps the quality and loses the weight. Master files stay layered in the design tool, the exported PNG is the deliverable, and every image gets alt text, because the format decides how the picture is stored, not whether anyone can understand it.
- 03
For brand kits the PNG set is standard: the logo in full color and single color, on transparent backgrounds, at several sizes, alongside the SVG and the print formats. Partners who cannot open a vector file can always open a PNG.
- 04
Export settings decide whether a PNG is clean. Graphics for screens are exported at twice their displayed size, so they stay sharp on dense displays, and in sRGB, because a PNG that carries another profile shifts color between browsers. Transparent edges are checked against a dark background as well as a white one, since a logo cut out on white often carries a pale fringe that shows only on black. Metadata is stripped, and the file is named with its variant and size.
Watch out
What people get wrong about PNGs
Saving photographs as PNG, which makes enormous files for no visible gain. Using PNG for print, where the lack of CMYK support leads to color shifts on press. Taking a screenshot of a logo from a website and using it as the logo, complete with the wrong size and a baked-in background. Treating lossless as a reason not to compress, when a PNG optimized properly looks identical and loads twice as fast. And exporting a vector logo as a PNG for a job that needed it to scale, then wondering why it blurs on a billboard.
