Choose Image Formats for the Web – Part 2

This week continues last week’s discussion on the top five image types used on the web. If you did not see last week’s post, go back to it now to learn about the use of BMP and GIF image files.

JPG/JPEG

Because of the concern over CompuServe’s patent on the GIF format, another format that competed with GIF resulted in the JPG or JPEG format. JPEG stands for Joint Photographic Experts Group and actually consists of a family of formats of which JPG is a member. For the purpose of this discussion, we will consider JPEG and JPG to be essentially the same file format. JPG supports high-definition and high-color-depth images and thus it became the standard for most digital cameras over the most recent years. Note however that the Apple iPhone uses the HEIF format (High-Efficiency Image Format) which you can easily convert to JPG files before adding them to your web pages. Note however that the resulting JPG files are typically larger than the HEIF files. Perhaps that is why the iPhone can pack more photos into the same amount of memory as cameras in other phones. Additionally, most printers support JPG files. Computer browsers and their file explorers (or Apple’s Filer app) support JPG files and can usually show a preview of the image directly from the directory. JPG images can be compressed using a lossy compression algorithm. This means that while compressing the image, the image losses some of its original data for the sake of creating a smaller file size. Think of it as taking closely related colors in adjacent pixels and replacing them with a single common color. On a small scale, you may not notice this loss, but if you were to zoom into the image, the loss of those individual pixels can become noticeable. In any case, JPG has become one of the most popular formats to use to place images on a webpage.

Another advantage of the JPG format is that it supports more colors than GIF files, up to 16 million colors within a single image compared to the maximum of 256 colors in a GIF, making it ideal for digital camera images. On the other hand, it is a bit overkill for simple button images where a GIF file may be your best choice. A major disadvantage is that a jpg image file does not support animation and if the image is compressed too much, the quality of the image can noticeably suffer.

PNG

To rectify some of the problems in both JPG and GIF files as well as to keep the best features of both of these formats, the PNG format, Portable Network Graphics, was created. It was originally developed as a way to sidestep the patent limitations of GIF files and unlike the JPG format, it also supports transparency like a GIF file. The PNG format is lossless and thus preserves the original image quality. At the same time, it supports the full range of color just like the JPG format does while still incorporating reasonable compression which for a web page displaying several graphics can be an important benefit. The one thing that the PNG format does not support is animation, as it is a single-image format. (Both BMP and JPG are single-image formats.) There have been two attempts that I’m aware of for an animated version of PNG called MNG (Multiple-Image Network Graphics) and APNG (Animated Portable Network Graphics), but neither has gained popularity and thus is not supported by most modern browsers. For me, that is no real loss as I believe that the use of animated images should be limited and the support for GIF images on websites meets this limited need.

TIFF

TIFF (Tag Image File Format) will be the last image file format I will talk about here. This format has been a common file type used by scanned images. Because of that, early TIFF files were encoded as black and white pixels only as that was a limitation of the scanners at that time. However, as scanners improved, this format has been enhanced over the years until today it supports a color depth equivalent to JPG files. TIFF files can be saved with no compression, but they also support lossless and lossy compression. One thing that I miss is that there is no support for transparency or animation. I guess that coming from scanned images, there was no need to incorporate this feature. Even beyond the loss of transparency, I personally see few advantages of this image format when it comes to web graphics over JPG or PNG encoded images. Perhaps one advantage of saving an image as a TIFF file with no compression is that you can preserve the quality of an image. It also should be noted that this image format is used by high-end scientific CCD cameras as well as professional photographers, the publishing industry, optical character recognition, and other print applications.

There are many other image formats available through various programs, but most of those image formats are not supported on the web or at least are not supported by all the major web browsers. While you may start from a different image format (like Apple’s HEIF format used by the cameras in their iPhones), you can usually find a program that will let you convert to one of the image format types discussed here.

In closing this two-part discussion on images, let me recommend a free online tool to help you convert from one graphics format to another called FileZigZag which can be downloaded from FileZigZag.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: