TIP : File Formats for Web Graphics

Sometimes I find a beautiful site with only one problem- the designer chose the wrong image format. It's another one of those ridiculous things that can make me crazy... but they aren't doing it on purpose... right? I thought I would put the subject to someone who understands the math/programming side of it better, Patrick. Here's what he has to say about JPEGs, GIFs, and PNGs with a couple of visual aids – alison


Early on in the web, programmers and designers wanted to start using photos and other images for web content. However - these files were big and typical connections were slow, and compromises had to be made. Programmers and mathematicians have been working on these problems for years, and the result is a field known as image compression. In short, some data is thrown out, the file size shrinks, and web browser guesses at what used to be there. These are typically referred to as "lossy formats" because some of the original data is lost, and it's gone forever. Once the data is gone, you can't get it back. There are no magic tricks in existence that can make a blurry thumbnail look as clear as a professional photo. This all sounds bad, but luckily the lossy formats such as JPEG, GIF, and PNG were each designed to cause the least noticeable distortion for their specific purpose.


(Keep in mind that data will be lost when working in these formats. When you are working on master images or on images for print, you should use lossless formats such as TIFF, PSD, .AI, or .EPS that keep every pixel of the original file there.)


Here are some examples of the same images - compressed 4 different ways.

Click on the image below for an HTML page of examples.

JPEG files were originally intended as a way to cram photos into smaller file sizes. They're good for images with a lot of varying details, and a wide range of colors. However - this is all based on math designed to approximate everything and keep throwing out more details until the file is small enough. Quality is based on a sliding scale in applications such as Adobe Photoshop, and the farther you pull the slider towards a "small file" - the less accurate the color, and the blurrier the image.

Good for:

• Smallest size for photos

• Small file size for large-dimensioned files

Problems:

• Color Inaccuracy - Colors change slightly when files are saved. If you are trying to use the exact same color in two areas or in two different files - there's a likely chance they will not match. It will also be nearly impossible to match the JPEG’s background to an HTML background color, so the edges of the JPEG rectangle will show.

• Block Artifacts- Another interesting distortion that's common in JPEGs is the appearance of squares. The math is based on splitting the whole scene up into smaller squares, so as the file is more compressed, the squares appear as distortion in the picture. This is especially noticeable on vector based graphics like logos, or anything with a solid contrasting background color.

• Generational loss - Each time a JPEG is modified and saved - it gets blurrier. The result is very similar to repeated generations of copies on an old copier.

PNG uses math to find patterns in images to reduce the file size. The file will recognize large areas of solid color and other patterns to compress them toa smaller file size. You can also mark a background color as "transparent", where the background of a web page will show through.

When saving a PNG file, you can choose the number of colors used, and a best fit will be found. The more color variation, the less accurate the colors will be. At this point dithering is used. Dithering is when pixels are alternated between two or more colors to approximate another color in between them. (Inkjet printers rely on dithering to get the appearance of all the colors in a photo out of a simple 3 to 5 color ink cartridge, so if you look under a magnifier, you can see some of the alternating colors. )

Good for:

• Solid shapes - edges are more accurate and sharper than with JPEG

• Illustrations & detailed drawings - thin lines and other details remain sharp

• Color matching - if you have several images such as company logos and borders that need consistently matching colors - PNG is the right choice

Problems:

• Once a certain amount of color variation is reached - JPEG will make smaller files

• PNG is not well supported on older photo editing packages such as Adobe Photoshop (pre CS3), so consider GIF instead.

• Some older versions of Internet Explorer from before 2005 do not work well with PNG

GIF is very similar to PNG, but is an older format with some minor differences. It can only use between 2-256 colors, not a full spectrum (PNG can). In general, it works well with older software packages where PNG is not fully supported. GIF can also be used for low quality, looped, animations. The animations are just a sequence of images with no sound, which can be created by Photoshop, Adobe Flash, and video editing programs. However, they can be useful for simple tasks, like animated advertisements and don't require plugins such as Adobe Flash.

Good for:

• Solid shapes - edges are more accurate and sharper than a JPEG

• Illustrations & detailed drawings - thin lines and other details are not blurred out

• Color matching - if you have several images such as company logos, backgrounds, and borders that need consistently matching colors - GIF/PNG are the right choice

• Higher compatibility with older graphics applications and web browsers than PNG

Problems:

• 256 color limit (not typically good for photos)

• PNG makes smaller files in most cases

In conclusion, web graphics have a lot of complexities behind them. However, in most cases, using a PNG is the right thing to use today for everything except photos. JPEGs were designed specifically for photos, and remain the best solution for photos today.

If you would like to research the topic further - Lynda (of lynda.com) wrote Designing Web Graphics, one of the earliest books on the subject. Most of what she covers there is still relevant today, and she has some excellent tricks to get the best quality out of your graphics.