Call Today
}
Hours

Mon – Fri, 8am to 5pm

The difference between PNG formats

by | Mar 18, 2015 | Design, Photoshop, Web Design | 13 comments

Knowing the different types of file formats is really important when creating professional design work. Choosing the wrong format for your design files can be disastrous. It can mean the difference between a project turning out well, and a project not turning out as expected. The difference between PNG formats is no exception.

Different PNG Formats

There are 3 formats: PNG 8, 24, and 32. PNG8 refers to a colormapped image. PNG8 means that it can have up to a total of 256 colors. This is similar to a gif file without transparency.

png-24

PNG 24

PNG 24 refers to true color or RGB images. These images can contain up to 16.8 million colors, which is substantially larger than PNG8. I like this type of file, because of its color range and the transparency. You can overlay multiple png files, and creating them as like this will allow you to create them without a background. This looks much cleaner than flat jpg files that have backgrounds. They behave similarly to transparent gif files, but contain much more color information and looks much more crisp. You also have smoother transitions from opaque to transparent. This will make your files that have transparency much more natural looking.

PNG 32

PNG32 refers to 32 bit RGB + alpha. This is typically not supported by most browsers. PNG32 can be created in Fireworks, but I don’t think it is necessary to have the added file size. I see no need to create PNG32 files for web design work. PNG24 files have a great deal of colors and show transparency as well. I don’t see that it is necessary to create bloated files. It will only take longer to load, which is the last thing that we want for our websites.

Conclusion

It is imperative that we use the proper file formats when creating professional design work. PNG 24 images allow us to create beautiful, transparent files that blend well with the rest of the site. You can combine these with different CSS, such as multiple backgrounds to create overlapping images that look great. They will also look like they belong together and will blend together much better.

Divi WordPress Theme