JPEGs, PNGs, and GIFs are among the most common image formats. There is no hard and fast rule as to which format should be used when developing a web page. Most developers choose their desired format based on trial and error. Each image format has its own compression algorithms, with differing qualities that are appropriate for different uses.
(Pixabay / StockSnap)
JPEG
The JPEG standard has stood the test of time for 25 years. Its compression carves an image into 8×8-pixel blocks and then converts the pixels of each block into a list of coefficients. The equation describes the block in terms of waves of energy. In technical language, the compression algorithm of JPEG translates the image information from spatial to frequency domain. This means that JPEG is excellent at compressing images that have continuous tone – meaning images with a large number of smoothly transitioned colors. JPEG images look more or less like a photograph. JPEG is not good, however, for compressing images with high energy and noisy textures.
GIF
The GIF format uses the LZW compression algorithm, which is simpler than the JPEG compression. The algorithm scans the image data and generates short codes for the repeating parts. GIF is good for compressing images with large chunks of repetitive or identical data.
PNG
PNG uses the same type of images that GIF does with a few added benefits, such as:
- No 256 color limitations
- Alpha channel transparency (allowing a pixel to be partly transparent rather than fully transparent or opaque)
- Superior compression, except in a few outlying cases
While PNG images offer more detailed imagery than other file types, they are usually the largest in file size. And when it comes to web, page load is important and too large of a file size may be a deal breaker.
In addition to the three widely-used image formats, there are now next-generation image formats such as WEBP and JPEG-XR. The new iterations incorporate improvements to the old versions. Web designers should test the new formats to determine how they will fit into their design style.