THAT Blog: Digital & Inbound Marketing | Web Design WPB

Portable Network Graphics

Written by Ronald Busky | Sep 22, 2010 11:18:17 AM

Now that ie 6 is fading from use its time to use .png images more.
Why? Becasue Png is clearly the best format to use for images when building websites.

Out of all the file formats available pngs match color better, have the smoothest color gradation and support multiple kinds of transparency. In fact they are so versatile, anything you can imagine graphically is possible using png. Its only shortcoming is that in certain older browsers (ie6) there were some display issues which required complex workarounds. Luckily most agencys have opted to no longer support IE6 which has made both designers and developers happy.

All file formats have their advantages and disadvatanges. lets recap some of the pros and cons of each.

Gif
The OG web file format. back in the day it was all gifs. Some of the corniest animations in the history of webdesign were done using animated gif, a technology that may have been a precursor to modern day motion graphics.
Pros: supports limited transparency, Animated gif allows you to run a looping or non looping sequence of imgs.
Cons: in order to save file space gif reinterprits color gradients using a fine mesh of small dots (dithering) which creates a wider range of colors with a reduced palette to approximate in-between colors. the results are often questionable especially with color photographs.

Jpeg
The most common format for digital images and probably the most reliable choice. Superior quality which can be be reduced by the user in exchange for file size - its versatility is unmatched however it has one serious shortcoming; No support for transparency. the term JPEG is Short for Joint Experts Photographic Group who created the format back in the 80s.
Pros: JPegs when saved with minor compression look almost perfect and the size of the image is greatly reduced.
Cons: No Transparency.

PSD
Photoshop documents are amazing. Full support for layers, text, transparency, effects and are basically the backbone of the digital imaging world. Created by Adobe, Photoshop is the defacto standard for image manipulation and high end color photography.
Pros: The quality of color and pixel clarity is perfect using photoshop. You wont find a tool that is more accurate.
Cons: Unfortunately .psds cant be used as image files online - they are more of a source file from which you export to any number of file formats including png, gif, jpeg, bmp, eps, etc.

PNG
Portable Network Graphics file format was created as the free, open-source successor to the GIF. PNG files have it all. layers, text, transparency, effects, and you can even use the source file as images online. This allows others to pull down intact layered originals to make changes, If working in a collaborative environment this speeds up the process and insures you have access to the latest version from anywhere. The source files can be heavy so if bandwith is an issue you can export a flattened png with transparency intact.
Pros: Too many to list.
Cons: Compression options arent quite as flexible as jpeg.

bottom line you can use many types of formats and settings to accomplish your project but when it comes down to quality and performance png is the best option.