yensdesign - Tutorials, Web Design and Coding

Hi guys! We continue the optimization series with this new part focused in select the right format of our images to spend less resources and speed up our websites.

After knowing how to begin our optimization process with the article titled Minimize HTTP Requests we are going to learn how to pick the right format of our images: GIF, JPEG or PNG.

Actually we have published these articles:

• Minimize HTTP Requests
• Selecting the Right Format for your Images
• Optimizing JPEG images
• Optimizing PNGs images
• Optimizing GIFs images

So let’s dive into the second part of these series: Selecting the Right Format for your Images.

Why Optimize Images?

As you have viewed in last article about Minimize HTTP Requests we were trying to reduce the number of HTTP Requests by putting together all the images into a single image. This will reduce the number of images so the number of HTTP Requests.

So now we have less number of images, we need to minimize the file size in disk of these images to reduce a bit more the loading time of our websites.

We are going to see how to reduce the file size by selecting on of these 3 common formats:

• GIF
• JPEG
• PNG

Let’s see what format we need to reduce the file size.

GIF

GIF is a palette type of image that contains a palette of 256 indexed colors. For every pixel of the image there is a corresponding color index. GIF is a “non lossy” format that doesn’t lose quality so when we modify an image and save it, we don’t lose quality.

GIF also supports transparency and animations. But the transparency is a boolean type, a pixel can be fully transparent or fully opaque. Actually people is still using the animation to show some loading icons while ajax responses are loading.

Today we can create GIFs without risks because this format is no longer subject to patent issues.

JPEG

JPEG doesn’t have the 256 colors restriction but doesn’t have transparency.

JPEG can contain millions of colors and it has great compression but it’s a “lossy” format wich means you will lose quality with every edit, so I suggest you store the original image before doing changes to preserve the quality original image.

JPEG is recommended to show photos in our websites.

Let’s take a look at the PNG format.

PNG: PNG8 and Truecolor PNG

PNGs is a “non lossy” format that can be divided in two types:

• PNG8
• truecolor PNG.

PNG8 is a palette image format of 256 colors like GIF.

How does PNG8 compare to GIF?

• Pros: It usually has a smaller file size and supports alpha variable transparency.
• Cons: It doesn’t support animations.

In the other hand truecolor PNGs (PNG24 or PNG32), can have millions of colors like JPEG.

How does truecolor PNG compare to JPEG?:

• Pros: It is a “Non lossy” format and supports alpha variable transparency.
• Cons: Bigger file size.

So truecolor PNGs can be used for printing material, help manuals… and of it’s an ideal intermediate format between several edits of a JPEG file.

Conclusion

So now we have a little more idea about what are the advantages for each format we can conclude that:

• GIF is the format for animations.
• JPEG is the format for photos.
• PNG8 is the format for everything else: backgrounds, icons… etc

And that’s all guys, I hope you enjoy this new tutorial.

Just say you that in the next optimization article we will be inmersed in the optimization process for each kind of image: GIF, JPEG and PNG.

See you soon and thanks for all guys! Don’t forget follow us on twitter and visit our forums!

Download 220-701 guide to learn how to get started with AJAX including 642-832 articles, 640-822 tutorials and other useful resources.