Basic understanding of web formats

There are only three graphic file formats that are used on the web: JPEG, GIF and PNG.

The most important thing to understand is when to use each type. JPEG, GIF and PNG use very different forms of encoding and compression of the data that give them quite different uses.

GIF and PNG files work best on text, text-art, cartoons, drawings, ilustrations, any art which needs transparent backgrounds.
GIF is limited in the total number of colors to 256 or less. PNG is more advanced and can handle true color images, but doing so significantly increases file size.

JPEG on the other hand works best on photographs. JPEG does not handle sharp edges and can produce artifacts due to his lossy compression.

But let’s learn more about each format.

GIF (Graphics Interchange Format)

The Graphics Interchange Format (GIF) is an 8-bit-per-pixel bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability.

The format uses a palette of up to 256 distinct colors from the 24-bit RGB color space. It also supports animations and allows a separate palette of 256 colors for each frame. The color limitation makes the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for more simple images such as graphics or logos with solid areas of color.

GIF images are compressed using the Lempel-Ziv-Welch (LZW) lossless data compression technique to reduce the file size without degrading the visual quality. This compression technique was patented in 1985. Controversy over the licensing agreement between the patent holder, Unisys, and CompuServe in 1994 inspired the development of the Portable Network Graphics (PNG) standard; since then all the relevant patents have expired.
[read more…]

JPEG (Joint Photographic Expert Group Image)

In computing, JPEG (pronounced JAY-peg; IPA: /ˈdʒeɪpɛɡ/) is a commonly used method of compression for photographic images. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves 10 to 1 compression with little perceivable loss in image quality.

JPEG is the most common image format used by digital cameras and other photographic image capture devices, and is the most common format for storing and transmitting photographic images on the World Wide Web.
[read more…]

Portable Network Graphics (PNG)

Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace the GIF format, as an image-file format not requiring a patent license. It is pronounced /ˈpɪŋ/ ping[1] or spelled out as P-N-G

PNG supports palette-based, greyscale or RGB images. PNG was designed for transferring images on the Internet, not professional graphics, and so does not support other color spaces (such as CMYK).
[read more…]

Rules of thumb

Photos

Definetely use JPEG for web or other media that needs the smallest possible filesize while preserving the most of the quality.
Use true color PNG if you want maximum image quality. Unlike standard JPEG images, PNG compression involves no loss of image data, so there is no noise or artifacts.

Charts and diagrams, cartoons, ilustrations

For true color images containing text and sharp color transitions 24 bit PNG could turn out smaller, and will certainly provide the best quality. You can try JPEG, turn off chroma subsampling and play with a quality greater than 75. In some cases these JPEGs will be smaller.

For images with few colors (fewer than 256) try to decrease the number of colors using quantization and save as PNG. In some rare cases GIF is doing better in such situations, so try it sometimes.

For images with less than 64 colors don’t even try to use JPEG because PNG or GIF always works better.

Transparent images

Only GIF and PNG support transparency. For JPEG you can fill the desired region with the background color using a flood-fill tool and your favourite graphics editing program. This is recommended for photos with masked areas.

Don’t use alpha (variable) transparency if you don’t need it. Apply the same optimization techniques explained earlier.
Alpha transparency does not work in Internet Explorer 5.5 and 6. There is a workaround for webdevelopers though.

Animations

The only format understood nativelly by browsers to support animation is GIF.
It is limited though to 256 colors.