While this may seem like the most obvious thing in the world and shouldn’t require that much explanation, suboptimal file types and compression qualities actually plague the internet everywhere. You can have a great site with excellent design that is utterly destroyed by inefficient or poor file types and quality.

Ultimately, it comes down to a balance of file size and load time. You don’t want any graphics to look horrible, but you also don’t want your audience to wait five minutes for the page to load. However, different file types accommodate different images better than others while also affecting their file size. Most of it comes down to the tiny details of the file properties and how they are compressed and represented digitally.

File Types: Lossless and Lossy

Digital images are very similar to digital music in that there are two different types of files: Lossless and lossy. Lossless images are only slightly compressed; they do not suffer in loss in image quality or information (they are the .wav and .flac files of audio files). Lossy images, on the other hand, undergo heavy compression, resulting in a loss of quality and information but also a smaller file size (they are the .mp3s of audio files).

The most common lossless images files are GIF, PNG, and TIFF (TIFF being the largest in file size typically) while the most common lossy files is the JPEG. Sure, there are other image file types, but they are rarely ever used on the web, and if you don’t know about them, you shouldn’t try using them. As a rule of thumb (though there are exceptions to this rule), lossy image files are typically smaller in file size and therefore load more quickly. Of course, highest quality lossy files can end up being larger in size than a lossless file of equal resolution and color palette (more on color palette in a second).

JPEG

Unless you’re shooting in RAW format (which can then be converted to TIFF in Photoshop), all digital photos you take will be saved as JPEGs. They are the most common image format used on the web and will continue to be for a while, considering the massive amount of photographs uploaded to the cloud every day. JPEGs have a lot of flexibility in the level of compression (quality) you can save them in.

When you prompt the “Save for Web” dialog and select to save an image as JPEG, you will then have to choose what quality to save the file. Photoshop allows you to choose their own benchmarks (low, medium, high, and max quality), but they also allow you to choose from a spectrum of 1-100. While experimenting with the different levels of JPEG quality, Photoshop will show you a zoomed preview of the image to view pixilation and will also show you how large the file would be saved under that compression.

Photos are not the only images saved as JPEGs for the web. A lot of designers will save headers and icons as JPEGs to keep file sizes small and loading times short, particularly when using images with photographic elements on them (as opposed to images with sharp lines and text, which tend to blur into noise at lower compressions).

GIF

Whereas JPEGs are great for images with lots of shading, details, and gradients, GIFs are great for images with solid colors, sharp lines, text, and less shading and complexity. Since GIF only has a palette of up to 256 colors, they are not recommended for any image with color gradients or just a large variety of colors. In short, GIFs are great for simple vector work and not photographic images.

PNG

What if you have a beautiful vector image with lots of color, gradients, and text? The GIF won’t do because of the lack of color palette. The JPEG will be weak because it will lose definition on all the crisp lines and text. This is a job for the PNG, the lossless graphic file type with a significantly larger color palette than JPEG and even supports transparent layers. Yes, you heard right; you can make parts of a PNG image transparent.

Since PNGs have a higher image quality than GIFs and JPEGs, they typically come with the cost of a larger image size and slower loading time (of course, a JPEG with 100% quality will definitely rival an identical PNG in file size). For vector graphics relying on sharp lines and text that must be sharp and readable, PNGs are a must. Of course, it never hurts to try saving an image under multiple file types to experiment with what looks best at the cost of what file size.

About the Author: Lauren Bailey

This guest post is contributed by Lauren Bailey, who regularly writes for best online colleges. She welcomes your comments at her email Id: blauren99 @gmail.com.