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. We’re filing this under “Basix”, but the information should be interesting for anyone looking to get a deeper understanding of image formats.

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 the .JPG Format

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. Lossy compression is simply a form of encoding that discards (loses) some of it’s data… which is why if you save a JPG 100 times, it will slowly become more deteriorated over time. There are “lossless” versions of JPGs, but 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).

In layman’s terms: 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. The data that’s discarded is removed from the file altogether, which results in a small file. Consequently, this lowers the quality of the image as well; You probably know that if you set the compression very high, you will end up with a degraded, pixelated image… whereas lower compression settings will result in a higher-quality image.

About the .GIF Format

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. The format supports up to 8 bits per pixel – which allows a single image to reference a palette of up to 256 distinct colors. You can use less colors (you may have seen GIF images using only a handful of colors), which can result in some interesting, even artistic, results.

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 (for better or worse).

About the .PNG Format

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 respects with the exception of very small files (like this used in background patterns). The PNG format drew early fire from web-designers as not being compatible with some older web-browsers, but that issue can largely be resolved through a few great scripts nowadays, like the DD_Belated script.

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. You may already be familiar with these methods, but if you haven’t really studied them, this is well worth a review.

Using JPG

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.

A Simple JPG

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.

JPG 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.

65% JPG Compression

We know that this JPG looks decent for the web; Let’s look at some file-size / quality comparisons for the other formats:

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.

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 Compression (Notice the limited color palette)

When you try to save a GIF, like the above image, as a JPEG it can result in pixelation, or image distortion. It will always result in much larger file sizes as well when you’re dealing with photography and other rich images. 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 Compression…

Compared with Low Quality JPG Compression

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 Selection Example

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 (Edit – this has since been fixed in new versions of Photoshop).

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 Example

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!

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′s are great in most cases where you need transparency – they are a big higher in file-size, but work well in cases like brand-logos where quality is important and you don’t want to use a lossy format.

Other Formats

WebP (The Google Web Image Format):

This is a relatively brand new format, announced just a couple weeks ago by Google itself. From their press release:

“To improve on the compression that JPEG provides, we used an image compressor based on the VP8 codec that Google open-sourced in May 2010. We applied the techniques from VP8 video intra frame coding to push the envelope in still image coding. We also adapted a very lightweight container based on RIFF. While this container format contributes a minimal overhead of only 20 bytes per image, it is extensible to allow authors to save meta-data they would like to store.

While the benefits of a VP8 based image format were clear in theory, we needed to test them in the real world. In order to gauge the effectiveness of our efforts, we randomly picked about 1,000,000 images from the web (mostly JPEGs and some PNGs and GIFs) and re-encoded them to WebP without perceptibly compromising visual quality. This resulted in an average 39% reduction in file size. We expect that developers will achieve in practice even better file size reduction with WebP when starting from an uncompressed image.”

The goal here is simple: to speed up images on the web using more modern algorithms. The question is this: Will is be adopted? Google is a massive company with some real power to push this format to the masses, but as we’ve seen with some of it’s products (I’m looking at you Wave!), even great ideas can fall flat.

SVG Format

“Scalable Vector Graphics” is a format that never quite caught on as a widely used image type. The idea behind this format is to allow for “vector graphics” on the web. The format uses XML as a basis for describing a 2D image on the web. Browser support for SVG is inconsistent, but if you really want to include scalable graphics, it’s worth reading up on this format.

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. The value of super-small file sizes for images seems to be passing as broadband expands across the internet, but speed will always be a useful site characteristic and understanding these image formats is the first step to optimizing your own images on the web.

If you have any questions or comments, feel free to post them below!