anggaarie.com

Different Formats
Their are four primary formats to choose from when optimizing images for the web. Each format is different in how it stores and compresses image information. These four main formats include PNG-8, PNG-24, GIF, and JPEG. Below we will discuss the different formats and what images they work best with.

GIF
The GIF format is a bit-mapped image format and is the most commonly used format for web graphics. It supports up to 256 colors, transparency, and animation. Typically the PNG-8 format compresses better for most web images, although for really small images, or images that require transparency or animation, GIF is an ideal choice.

JPEG
The JPEG format works will for photographs and other large images with many colors because of it's lossy compression algorithm. The degree of compression can be adjusted, allowing a select-able tradeoff between storage size and image quality. This often allows large images to be compressed more than any other format with little or no perceptible loss image quality

PNG-8
The Portable Network Graphics is a bit-mapped image format that uses a loss-less data compression algorithm. It was designed to be a replacement for the patented GIF's. This format does not support transparency, translucency, or animation. I end up using this format for the majority of my images and it is the best choice for most web graphics.

PNG-24
PNG-8 and PNG-24 are the same format, however when transparency, translucency, or more than 256 colors are used, 24 bits are used to represent each pixel instead of 8. This greatly increases the size of the image and make it a poor choice. If only transparency is required than use the GIF format instead. I also try to avoid translucency by flattening my images so that I can use an image format with less overhead.

Choosing the Right Format
Adobe Photoshop has a nice feature within the File -> Save for Web function. It allows a nice 4-up view where you can compare the file size of three different image settings and compare the quality with the original. First I'll compare the different formats GIF (with 256 colors), JPEG (high quality), or PNG-8 (with 256 colors) and decide which format is best suited for the given image based on the resulting image size. If JPEG is the best choice I try to further compress the image by reducing the quality to an acceptable level. Otherwise I try to compress the image further by reducing the number of colors used by the image. Often times you can reduce the number of colors considerably without any noticeable effect to the human eye.

Don't Forget to Read