Web Designer’s Guide to PNG Image Format

Nov 23 2010 by Catalin Rosu | 50 Comments

Web Designer's Guide to PNG Image Format

Once upon a time, there was the mighty GIF image format, the most popular type of image compression for web graphics. Then, it was announced that software programs using GIF would require a license (this was because of the Unisys patent for the LZW compression method used in GIF). This change sped up the development for its successor: the PNG format. PNG, which stands for Portable Network Graphics, gained popularity and, nowadays, it’s probably the most used image format when it comes to web design, alongside JPEG.

In this guide, we will cover everything you, as a web designer, need to know about the PNG image format.

Understanding Digital Image Formats

There are many digital image formats available for you to use, but only some of them are optimized for web use. For example, the TIFF image format is not designed for web use; it’s used for printing. Examples of image formats for the web are JPEG, PNG, GIF, and SVG.

Why are certain image formats suitable for the web, while others aren’t? Because images on the web must be optimized and highly compressed so that they don’t get too huge.

Some digital image formats, especially those designed for print (such as TIFF) are so unnecessarily high in resolution, metadata, and color-richness — which all become irrelevant when viewed in computer¬† monitors — that they are too big in file size for web use.

Compression Methods

There are two general kinds of image compression methods: lossy and lossless.

Lossy compression is when the compression algorithm being used results in some loss in data. This means that you will not get the exact same image as the original if you try to decompress it. The data loss, in most instances, is done in such a way that you don’t lose too much quality; at least not enough that people will notice.

On the other hand, lossless compression is the opposite of lossy. Lossless compression involves compression algorithms that when decompressed, will get you exactly the same image as the original. An example of lossless compression is when you are zipping up a document using the ZIP format. When you unzip your document, it will be the same as the original.

PNG uses a lossless compression algorithm. On the other hand, JPEG uses a lossy compression algorithm. What this essentially means is that, by saving your original images using JPEG, you might witness some quality loss (the same goes for PNG in certain situations, as you’ll see later on).

Compression Methods

Some Technical Stuff about PNG

Aside from using lossless compression, PNG is a bitmapped image format, which just means it’s a raster image format. If you skipped Design 101, raster images, unlike vector image formats such as SVG, cannot be rescaled without losing quality. However, raster images are better than vector images for complex images such as photographs.

PNG was designed for quickly transferring images on the web and for displaying images in computer screens, so it only uses the RGB color model. The CMYK color model, which is typically for print purposes, is not available when saving images in PNG format. In short: the PNG image format is not optimal for graphics that will be printed.

PNG-8 and PNG-24

There are two PNG formats: PNG-8 and PNG-24. The numbers are shorthand for saying "8-bit PNG" or "24-bit PNG." Not to get too much into technicalities — because as a web designer, you probably don’t care — 8-bit PNGs mean that the image is 8 bits per pixel, while 24-bit PNGs mean 24 bits per pixel.

To sum up the difference in plain English: Let’s just say PNG-24 can handle a lot more color and is good for complex images with lots of color such as photographs (just like JPEG), while PNG-8 is more optimized for things with simple colors, such as logos and user interface elements like icons and buttons.

Another difference is that PNG-24 natively supports alpha transparency, which is good for transparent backgrounds. This difference is not 100% true because Adobe products’ Save for Web command allows PNG-8 with alpha transparency.

PNG-8 and PNG-24

The Short Story: When to Use PNGs

When you need to preserve transparency and large amounts of color, as well as achieve full or partial transparency, the PNG image format is the best.

Since it’s a lossless format, images saved using the PNG format aren’t going to be small all the time, but because PNG stores a lot of additional data, you can easily optimize images for web usage to reduce file sizes.

PNG vs. GIF vs. JPEG

Let’s compare the advantages and disadvantages of using PNG versus the two other popular web image formats.

PNG vs. GIF

Short answer: Always use PNG over GIF unless you are making an animated GIF or when you want to use images with transparent backgrounds on older versions of IE (however, there’s a workaround for supporting PNG transparencies in IE6 and below, using JavaScript PNG fix libraries). I’m not alone on this, Jeff Atwood, founder of StackOverflow and the Coding Horror blog, will agree.

PNG has some important advantages over GIF that web designers will care about, such as:

There are, of course, many other advantages, but those are the ones that matter to web designers.

Here’s a visual comparison of PNG versus GIF. Note that for the sample image below, you would not use PNG-24 because it has simple colors and will also weigh more than GIF. However, the PNG over GIF notion still stands: If you save a photographic image (such as a photo of your mom and dad), PNG-24 will have a better result than GIF.

PNG-8, file size: 3.73 KB PNG-24, file size: 5.68 KB GIF, file size: 4.20 KB

Optimization Tip: There are a lot of tools you can use to optimize your images. Below, I used pngcrush for the PNG images and Smush.it for the GIF image. No apparent loss in quality, and PNG-8 still wins over GIF.

PNG-8, file size: 3.69 KB PNG-24, file size: 5.41 KB GIF, file size: 3.71 KB

PNG vs. JPEG

JPEG will be tinier in file size versus PNGs when we’re talking about photographic images. This is because it uses a lossy compression algorithm specifically designed for photographic, rich-color images.

So for web use, if you’re putting up a photographic image on a web page (such as a picture of your cat), always choose JPEG over PNG. Using PNG over JPEG in this situation will result in a bigger file size (often 5-10 times more than JPEG).

Here is a PNG vs. JPEG (quality: 70) comparison using a photographic image. Note that we use PNG-24, not PNG-8, because it’s the proper format for photographic images.

PNG-24, file size: 66.6 KB JPEG, file size: 14.41 KB

Further optimization with pngcrush and Smush.it:

PNG-24, file size: 64 KB JPEG, file size: 14.2 KB

Optimization tip: You (as the web designer) will criticize your images more than your website users, so a good advice is to be a little more "brutal" when saving your web images. Find a good balance between file size versus quality. Lower your quality settings until it becomes unbearable.

When to Use Each Format

Here is a simplistic summary of the file format comparisons:

  • Use PNG-8 over GIF for images with simple colors (logos, icons, buttons)
  • Use PNG-8 over JPEG for images with simple colors (logos, icons, buttons)
  • Use PNG-24 over GIF for photographic images
  • Use PNG over JPEG when using alpha transparency
  • Use JPEG over PNG for photographic images
  • Use GIF for background transparency for older browsers (IE6 and below)
  • Use GIF for animated GIFs

PNG-8 Color Reduction Optimization

When choosing the PNG-8 image format, you may see a decrease in the number of colors in the image. This is why it is good for simple artworks such as logos, icons, and UI elements such as buttons.

Pick PNG-8 in instances where there is a limited color palette. This will help you achieve a smaller image file size without any visible difference, allowing you to build faster, leaner and more responsive web designs.

An optimization trick you can perform is reducing the number of colors of your PNG image. This will drastically reduce its file size, and you can do it with little-to-no apparent loss in quality.

Most software applications that can save PNG files will have the ability to allow you to manually enter the number of colors to include. For example, Photoshop’s Save for the Web & Devices feature (which you can get to by going to File > Save for Web & Devices) gives you a dropdown menu for setting the number of colors for the PNG format. Reduce the number of colors until you see a visible difference in quality.

Below, you can see the optimization of the RSS icon we used earlier through the reduction of the number of colors. Reducing the number of colors from 256 to 16 results in very little noticeable loss in quality and results in a file size that is 62% smaller — over half of the file size was shaved off!

PNG-8 256 colors, file size: 3.73 KB PNG-8 64 colors, file size: 2.18 KB PNG-8 32 colors, file size: 1.75 KB PNG-8 16 colors, file size: 1.41 KB

PNG-24 Posterization Optimization

This optimization technique helps you optimize the PNG-24 format and this is how it works: it reduces the amount of colors by combining similar colors.

In Photoshop, here is how you can do this optimization trick: Open the image in Photoshop. Choose Image > Adjustments > Posterize and then decrease the levels until it results in visible quality loss. Then just use the Save for the Web & Devices feature to save the image in PNG-24 format.

PNG-24 Original, file size: 29.5 KB PNG-24 Posterized, file size: 23.9 KB

Summary

For web designers, the importance of reducing images sizes is a way to increase the overall speed of a web page. Optimized, smaller images in a web design means:

  • Faster web pages that load more quickly
  • Less bandwidth consumption
  • Less data required to transfer to site visitors, which means lower data activity

You may be wondering if PNG is the best image format — this is an inevitable question. The answer is: it depends. As shown in this guide, there are many variables that will affect what image format you will choose. Certain situations will find PNG-8 favorable over PNG-24, while others will produce better results when using JPEG.

PNG has certain advantages over GIF, such as lower file sizes and being an open format. However, PNG transparency in IE6 isn’t supported so you might have to use GIFs (or a JavaScript library that emulates PNG alpha transparency in IE6, such as IE PNG Fix). The same can be said for when you’re dealing with animated images, which GIFs can do.

Regarding PNG versus JPEG: the choice depends a lot on what type of image you’re optimizing. Specifically, PNG does extremely well with limited color schemes, solid colors and supporting transparency (which JPEG does not support). For complex, photographic images, JPEG is the way to go.

The main thing to take away here is that you should use a combination of image formats. You shouldn’t strictly use PNG, or JPEG, or GIF. Furthermore, you shouldn’t be afraid to optimize each image manually so that you can achieve better results and smaller file sizes. You should always use an image optimizer, which will squeeze out every last excess byte.

There are two things that will help you pick the right format: experimenting and experience. The more you save images for the web, the quicker you will be in recognizing situations in which PNG, JPEG, or even GIF should be used.

References and Resources

Related Content

About the Author

Catalin Rosu, a.k.a. Red, is a web designer and developer with over 5 years experience in the industry. You can find articles or tutorials on CSS tips and tricks by visiting his blog at red-team-design.com. You can connect with him on Twitter as @catalinred.

50 Comments

Sam Blowes

November 23rd, 2010

I believe you missed a valid to use the .gif format.

If you have a image that only has few colors:
You can choose the amount of colours that a gif image has and a result you have a file which is far smaller than a png-8 or 24

Lee

November 23rd, 2010

While I’ve been a massive fan of PNG for years every time I see a post about the PNG format it makes me smile. I was recently talking to some friends who do a bit of web design and was shocked to hear how many don’t realise which formats they should use and when, they all just go with JPG every time.

Jacob Gube

November 23rd, 2010

@Sam Blowes: You can do that with PNG too (at least in Adobe products like Photoshop and Fireworks).

Rochelle Dancel

November 23rd, 2010

I’m a big fan of the PNG for all of the reasons above. However, whilst my clients are still reliant on older browsers (including the IE browser that shall not be named) mainly because their in-house intranets and other systems are built on these browsers, I’m still going to have to resort to GIFs for transparent graphics.

I’ve tried to push for PNG fixes on two previous projects, however, the developers on both of these argued that the jscript interfered with other bits of script on the site, so I have yet to be convinced otherwise.

Andy

November 23rd, 2010

“or when you want to use images with transparent backgrounds on older versions of IE”

The author has apparently missed the fact that you can have transparent PNG-8 images on IE since version 4.01 without applying any hack.

The best way of doing it would be to save a PNG-24 image then run it through a tool like PNGOUT, which will convert it to a PNG-8 image. The image will render like a GIF image in older versions of Internet Explorer, while it’ll progressively enhance itself (by using alpha transparency etc.) in more capable browsers (Firefox, Opera, Safari, Chrome, newer versions of IE etc).

Taimur Asghar

November 23rd, 2010

finally i got answer, that why sometimes my illustration and manipulations have larger size in PNG then in JPEG. thanks for information :)

Hitesh Chavda

November 23rd, 2010

Great Guide to PNG format
Thanks man.

Kevin Dees

November 23rd, 2010

There is also another IE PNG fix that allows for positioned and repeated background images. It was developed by Drew Diller and is really great if you plan to be some complex design work and still need to degrade into IE6.

The hack is called DD_belatedPNG -> http://www.dillerdesign.com/experiment/DD_belatedPNG/

Graham

November 23rd, 2010

Fatastic article Catalin – it is great to know when to use which format and how to compress them.

This was very useful thank you.

BadCat

November 23rd, 2010

Some other things perhaps missed in this post about PNG.

* PNG format itself comes with more options than you suggest, in fact PNG-24 with alpha is actually PNG-32, I believe. More here about color depth etc:
http://en.wikipedia.org/wiki/Portable_Network_Graphics

* Animated PNG: Requires JS, but hey so does transparent PNG in IE6. http://animatedpng.com/

* PNG8 with varying levels of Alpha transparency: In png-8 with the proper tools and tricks. (as opposed to Gif’s 1 bit transparency or PNG 8 index transparency) Check it out: http://blogs.sitepoint.com/2007/09/18/png8-the-clear-winner/

* Last up – Adobe Fireworks own flavor of PNG (it’s the working file of Fireworks that includes, layers, colors, animation and more) but it’s not a true Flattened PNG for Web use. More here: http://forums.adobe.com/message/2971091

thanks for the post.

JF

November 23rd, 2010

Thanks, great post. I read a couple of posts on image format, but this one is very well explained. This article combined with the Codding horror post on PNG format are must read !

Kurt

November 23rd, 2010

Great article – Thanks!

Stefan

November 23rd, 2010

Why do I have, besides png-8 and png-24, a png-32 in my Fireworks and what’s the difference to png24?

Young

November 23rd, 2010

I also recently was asked the difference between PNGs and JPEGs by a non-web person, so I think (hope) people are getting more aware. I definitely had some misconceptions that this article cleared up – for example I thought GIFs would always come out smaller than PNGs – so thanks for that!

Also, “use GIF for animated GIFs” – can we change that to “don’t ever use animated GIFs”? :)

Amish

November 23rd, 2010

What ever happened to the concept of animation in PNG?
I remember hearing about MNG and APNG, but those don’t seem to have come around.

Also, wasn’t there some big noise about Compuserve enforcing its ownership of GIF in the past? I think it may have helped PNG come into existence.

Red

November 23rd, 2010

Thanks you for commenting and, as you probably read, this article is not a technical detailed one.

The purpose of this article is more about how to use the PNG for web design, advantages and disadvantages.

Jacob Gube

November 23rd, 2010

@Amish: Here’s some info on Animated PNGs (APNG). It’s not widely supported (the demo image doesn’t work in Google Chrome 7).

As for your question of “What ever happened…” – browsers are just slow to adopt some things, especially unofficial or non-standardized/unvetted stuff like APNG (e.g. no W3C specs). It should work in FF and Opera, but I doubt IE will support it (unless it gets taken up by a standards body). WebKit (Safari/Chrome) do not have support for it yet as well.

Charity M. Colvin

November 23rd, 2010

lovely article thanks. I sent this out to my development team to use and reference. They are always asking me why I use .png files and I never can seem to find the right words but you say them so eloquently that all I have to do is copy & paste the link. Thanks Catalin and good job Jacob on yet another great find! :)

nosher

November 23rd, 2010

Excellent article, but whatever happened to animated png files?

Red

November 24th, 2010

@nosher regarding APNG, as isn’t a cross browser solution, I don’t see it practical for webdesign – I think it’s more like an experimental method for now.

Also, @BadCat, adding javascript fix for this matter wouldn’t be the most recommended thing a web designer could do. You should avoid using this for large projects, unless you want to make things more complicated than they have to be.

Jacob Gube

November 24th, 2010

@Charity M. Colvin: Thanks. Catalin has been a regular SR reader actually, so he is very familiar about our community and what articles ya’ll like. We’re already into talks regarding future guides and articles.

And I just wanted to underscore that fact: Catalin — like many SR writers — are also SR readers; so if you have something interesting you’d like to write about, that you know will fit the style and tastes of the SR community, you should email me!

@nosher: Oh come on. I just wrote about it 2 comments up from your comment. I feel ignored. :(

Alex

November 24th, 2010

Very useful guide, thanks!

Bryan

November 24th, 2010

I’ve heard png’s can contain gamma correcting information. True?

Jesse Kaufman

November 24th, 2010

What I do with PNGs is save everything out as PNG-24 from Photoshop using “Save for web” … Then, I run it through pngout (using the ImageOptim app on my Mac), which chooses whether PNG-8 or PNG-24 is best and adjusts the color palette automatically … so far, I haven’t noticed any difference visually between before and after pngout processing, but the filesize savings are HUGE … plus, you don’t have to think about whether you should be using PNG-8 or PNG-24 or if you need to limit your color palette (UNLESS you have a full-color image you’re wanting to reduce to fewer colors, of course … pngout compresses as much as possible without changing the appearance)

I run all my JPEGs through an optimizer, but really all it does is strip out any EXIF data, color profile (browsers assume sRGB if no profile is embedded), etc … very small savings, but every little bit counts … plus, there’s really no need for EXIF data on, say, a photo of a product on an eCommerce website

Just my $0.02 ;) … the more time i can save by not having to think about file format details (just have to decide PNG or JPEG), the better :)

Jesse Kaufman

November 24th, 2010

Oh, and before I forget, thank you for this article :) … while it’s old news to me, personally, it’s GREAT to see accurate, to-the-point articles on the more technical side of things … even better that the author really nailed the topic well :)

Red

November 25th, 2010

@Alex, @Jesse thank you!

@Bryan, the gamma correction is a PNG additional info which is usually removed by the PNG optimizing tools. This PNG gamma “correction” a.k.a “gAMA chunk” usually lead to color matching problems for some browsers.

Rosa

November 25th, 2010

Excellent article – thank you!

Cesar Noel

November 26th, 2010

I have been looking for this article. Very informative and I will glady adapt this on my training materials for Web designers

Scott

November 26th, 2010

PNG’s are great. The opacity ability in particular is something I make use of all the time. Good article.

Red

November 26th, 2010

@Rosa, @Cesar and @Scott thanks for reading and I’m glad you found it useful.

Christopher A

November 26th, 2010

The one PNG advantage over .gif that seems lost on me is:

“No license required”

Individual creators or users don’t have to buy a license to use the .gif format. Whatever license is required, in my understanding, is built into your tool – Photoshop, the browser, etc. Some company somewhere had to license that format to include it in their software, but if I were to choose to never save another .gif in my life, it’s not like I’d be saving any money on a license. Right?

Also, while I like the idea of the PNG for alpha transparency, my own experience is that it’s pretty hard to achieve a small file size when using alpha on an image. Maybe I’m not processing my PNG’s correctly, but my few experiments with it end up with pretty large files if the transparent image looks good at all. I’d love to know of a good tutorial on doing this better if there’s one out there.

raybak

November 27th, 2010

I only use png for transparencies to reduce size I use gif for graphics (butons) and jpeg for photographs.

Jacob Gube

November 27th, 2010

@Christopher A: It’s an advantage because what if GIF licensing suddenly changes? Open formats like PNG have the advantage of not being controlled by a private licensor. It’s like saying that one of HTML5′s advantage over Flash (owned by Adobe) is that HTML5 is open format. Is that not an advantage? But not only that, the open format is actually better (PNG > GIF).

People use proprietary software because the alternative open format has limitations; but given a choice, for example, between Microsoft Word versus some uninvented word processing app that’s as good or better, but is open source (No offense,OpenOffice fans, I just don’t think it holds a candle to MS Word), which would be the logical choice?

Chris

November 28th, 2010

Good Article. I’ll be bookmaking it for later.

Joshua Chase

November 29th, 2010

Another awesome breakdown. I tend to use PNG a lot more lately for transparent images and love them. I also use ImageOptim to reduce the file size by stripping out all the meta information. Good stuff, great write up!

Susan

November 29th, 2010

Has anyone else noticed issues with PNGs in HTML emails sent through Outlook 2010? Ours were showing up as black blobs so we went back to using GIFs…very frustrating.

Curtis Scott

November 29th, 2010

Great point Jacob, I never thought it like that before. Bookmarked for reference later. Thanks!

marianney

November 29th, 2010

great comprehensive article, thank you! some of this stuff i knew about PNG’s, but I was afraid to use them mostly due to browser support, but now that we are mostly moving away from IE6, I am going to move forward with using PNGs as much as possible. the optimization tips were also very useful.

Ranjit

November 30th, 2010

Really, its very interesting. Thanks to SR

Marcell Purham

November 30th, 2010

Great article on PNG! Very informative. I usually save my images on a png then use it as a sprite image for all my elements. Great tip for the compress part also.

luke price

December 1st, 2010

great post, I will use the PNG transparency hack! thanks

Jenny Lu

December 1st, 2010

Very interesting, Thanks.

Andy

December 1st, 2010

@Jesse Kaufman: You’d get better compression by NOT saving it with “Save for Web..”. Just save it normally, then run it through PNGOUT.

Marc

December 6th, 2010

Lots of good tips on imageoptimisation, can’t wait to shave a few Kb off the images I use.

Samori Gorse

December 8th, 2010

@Stefan : PNG32 is the same as PNG24 but with support for alpha transparency.

Guruh

December 16th, 2010

Now I know the reason why sometimes PNG’s file larger than JPEG’s file. Good article and thanks for sharing

Adrianna Gonzalez

December 17th, 2010

Very useful! thanks for the breakdown!

neha

July 22nd, 2011

nice article…….it helped me a lot….

justintime

October 13th, 2011

Oddly I ended up here after troubleshooting failed print of pngs. Very informative/techy article, thanks.

You just convinced me to use jpg unless there is need for transparency. Web – most designers think of their work too much and go with with png just to ‘be safe’ that their ‘beautiful’ design will be seen in its glory.

Andination

September 3rd, 2012

Nice article, thank you! But if you build Websites with a lot of PNG with alpha transparency, you cannot always use JPG. This solution might do the trick for you, using jQuery, a plugin and the canvas element (HTML5): http://headers-already-sent.com/artikel/shrinkimage-1/

Leave a Comment

Subscribe to the comments on this article.