On File Types and Saving for the Web
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). (more…)