Image Types and Usage in Web Design

Have you ever wondered what the difference is between JPEG, GIF, and PNG images we use on the web? As a designer – and especially a web designer – it’s important to know the difference between the different image formats and how to use them in each situation. This article will cover how to use them for each situation to keep file sizes small and image quality high.

The Differences

To best use a tool, you first need to understand how the tool works. To understand how to use image types better, we need to look at how their compression algorithm works. I know, I know, you’re not a numbers geek and who really cares? It’s like driving a car though; you can drive it better when you know how all the little parts interact. Plus, when something goes wrong, you know how to fix it!

About JPEG

JPEG was developed by the Joint Photographic Experts Group. As you might have guessed, it works well for natural image types (photography). Natural image types, like photography, have smooth variations of colors which means the JPEG format also works well for images that contain gradients and varying tones and colors.

An important point about JPEG’s is that they are generally a lossy format, unless you use another variation that is lossless. Those variations are not common though and don’t have widespread support. If you need to store image data in a lossless format, it’s best to use a format like TIFF or PSD.

Now for the technical part. The process of a JPEG divides the image into 8×8 pixel blocks and runs them through a DCT (Discrete Cosine Transform) calculation followed by quantization (JPEG 2000, a newer version, uses a wavelet transform instead of DCT). To keep things simple, it basically looks at blocks of the image and determines the small variations in color, then discards some of those variations based on the level of compression you’ve chosen. Because this method discards data, it is a lossy compression method. When you set your compression very high, you will end up with a pixelated image (as we’re all familiar with).

About GIF

GIF (Graphics Interchange Format) was developed by CompuServe and uses the LZW (Lempel-Ziv-Welch) compression method, which is lossless. This method of compression builds a color table for the image where each color value is assigned to pixels. This compression method makes this image format ideal for line art, logos or other simple images without gradients or varying color.

One interesting note about this compression method is that it looks at the pixel change horizontally. That means images where pixel color changes that occur more frequently horizontally will be larger than images where pixel color changes occur more frequently vertically.

GIF’s can do two additional things that JPEG’s can’t. First, a GIF can use transparency. In a GIF pixels are either 100% transparent or 100% opaque. GIF is also a multi-image format so you can use animation.

About PNG

PNG (Portable Network Graphics) was created to essentially replace, or at least improve upon the GIF format. PNG uses the DEFLATE compression method – the same algorithm used in zip and gzip. I won’t go into how this compression method works because it’s a little too complicated for this article, but it’s a lossless compression. Because of this, the PNG format tends to result in larger image sizes than JPEG when used for photographic type images. When used for line art type images, PNG results in much smaller file sizes than JPEG and almost always smaller sizes than GIF.

Unlike GIF, PNG is the same as JPEG in the respect that it is a single image format; meaning PNG doesn’t support animation. However, it does support a major advantage that neither JPEG or GIF support: alpha transparency. Pixels in a PNG image could be 50% transparent as opposed to the GIF format which would require those pixels to be either 100% transparent or 100% opaque. As you can imagine, this would allow for better blending and smoother graphics than GIF. PNG also implements several other improvements over the GIF format, but they aren’t necessary to get into.

Needless to say, PNG is a much better format to use than GIF in almost all situations.

As you probably know, there are two main types of PNG.

  • PNG8 (8-bit) – essentially the same as a GIF in terms of color limitations (256 colors max) but allows for alpha transparency
  • PNG24 (24-bit) – allows for a much broader range of colors.

Using JPEG, GIF, and PNG

Below are two example images I will use to show how and when to use each image format.

Examples

Using JPEG

As you can see, the image below is photographic in nature with colors and tones that vary wildly. Obviously, not all images will use this many colors – but this image is great to use as an example of using the JPEG format.

JPEG Example

The image below shows JPEG compression from a quality setting of 100% down to 0%. At 100% quality, the image appears to be lossless, but data is still being discarded from the original image. The human eye can’t see the data loss as it is miniscule. At 50% the image quality takes a noticeable drop, but, as you can see, the file size is over 100K smaller. That’s a huge difference with somewhat minimal visible quality loss. At 25% the image really starts to look bad and hasn’t saved much extra file size. At 0%, the image looks horrible and, although the image is a much smaller file size than the 100% setting, the tradeoff isn’t worth it.

JPEG Compression Examples

This image would probably look best at ~65% quality which would reduce the image size by almost 100K. To determine the best settings to use for a JPEG, slowly reduce the slider until you can start to see the image quality really degrade. Then move the quality back up about 5-10% or so.

JPEG Compression at 65 Percent Quality

GIF results in a 63.77K file size and a horrible looking image.

PNG8 results in a file size of 53.52K because of the more advanced compression methods, but looks the same as the GIF.

PNG24 results in a 253.9K file size and looks close to the original, but isn’t worth the large file size.

The best possible option for this type of image is JPEG at ~65% quality; small file size (39.77K) with very little visual quality loss.

JPEG vs GIF

Using GIF and PNG8

As you can see below, the image does not use varying colors or tones, but instead solid colors. This image is 5.72K (GIF) and uses a total of 8 colors. This makes GIF and PNG8 great formats for line art, simple color logos, etc. PNG8 would be a better choice here as it results in a smaller file size (3.54K) due to the better compression method it uses.

GIF Example

When you try to save a GIF, like the above image, as a JPEG it can result in pixelation. It will always result in much larger file sizes as well. The image below is set at maximum compression and results in a file size of almost 8K for JPEG vs 5.72K for GIF and 3.54K for PNG8.

GIF vs JPG Example

Unlike JPEG and PNG24, GIF and PNG8 allow you to select how many colors can be used (up to 256). In the case of images such as logos and simple line art, you can achieve a smaller file size by selecting fewer colors. Be careful that you don’t select too few colors though as it can make the image look much worse.

GIF Color Section

The image below is a PNG8 with transparency (GIF looks the same) as it looks in Photoshop. When using transparency with GIF or PNG8, you’ll want to set the matte of the image to whatever color the background will be – for better blending and a cleaner looking image. As mentioned earlier, this is because GIF doesn’t support alpha transparency and Photoshop doesn’t support alpha transparency with the PNG8 format even though it does support it.

PNG8 Example

Thankfully Fireworks allows us to use Alpha Transparency with the PNG8 format (C’mon Photoshop!). As you can see in the image below, the black gradient is still limited in the variation of tone making the gradient look a little choppy. The great thing about using alpha transparency with PNG8 is you still get the small file size but edges blend smoothly and even minor gradients look great.

Another major advantage of the PNG8 format is that IE6 supports the use of alpha transparency with it natively! That means for simple images that need alpha transparency (shadows, logos, etc.) you don’t need to hack IE6 when using PNG8 and alpha transparency!

PNG8 Alpha Transparency
PNG8 Alpha Transparency in Fireworks

Unfortunately you can’t save an image as PNG8 with alpha transparency in Photoshop so you’ll need to jump into Fireworks to do this.

In the Optimize pallet select the PNG8 format with alpha transparency selected, then click “Rebuild” in the lower right corner.

You don’t need to select a matte color and you can adjust the number of colors to fit your needs and to reduce the file size. In the example to the right, I’ve saved these settings as “PNG8 Alpha-T” so that I don’t need to reselect each option each time I want to save a PNG8 image with alpha transparency.

That’s about all there is to it! Now we just need to figure out why Photoshop doesn’t offer this feature.

Using PNG24

Using PNG24 is basically the same idea as using GIF or PNG8, except that it will result in a larger file size because it supports a much broader range of color variations. If you have images with more complex gradients that need transparency or greater color depth, PNG24 is the best choice. Unfortunately, IE6 doesn’t support PNG24 natively; so you will have to “hack” it to work properly.

PNG24 Example

Conclusion

In your free time I encourage you to dig a little deeper into these image formats and all they have to offer. You’ll learn a lot and know exactly what you can do with these image formats or which one to use for every situation.


25

Comments