.Gif, .Tiff, .Jpg, .Bmp, .Png WTF Do I Need All These for?

Lots of choices and what to choose? What it comes down to is the right tool for the job. Each format has its pro's and cons. Please note you will need to have a decent image editor to take full advantage of many of things I will discuss here. Paint which comes with windows or a lot of the simple image editors that come packaged with cameras may not provide some of the versatility or options I'll be discussing here. For free you can download and try Gimp or Irfanview. For low cost either Painthop Pro or Photoshop Elements.

1. Definitions:
2. Lossless - lossless refers to saving an image exactly as it appears without altering it. The image data is not altered and will be exactly the same when saved.
3. Lossy - lossy refers to saving an image where the image will be altered to achieve smaller file sizes. This is typically used for photo type image like .jpg and standard on most cameras to save file space.
4. Compression - Compression refers to making a file smaller and is usually achieved though using a lossy format like .jpg but there are lossless compression methods. When compressing an image how much it it can be compressed depends on the type of compression and the contents of the image. You may have noticed when looking at .jpg's from your own camera that file sizes vary widely, that's because the image content varies so much. Images with large areas of the same color will compress more.

Important note!, the best format any image will ever be is the original. Typically a camera and other devices save as .jpg images, there is no benefit saving them to another format after transferring them to your computer. The best they will ever be is the original file produced by the camera.

.bmp

.bmp is a lossless format with no compression that produces huge files and useless, that is all that needs to be said about it.

.tiff (.tif)

.tif is an older lossless format, the benefit of .tif over .bmp is that it can utilizes LZW compression and can reduce file sizes considerably but still maintain the original image data. I'm not going to use a .ti here because many browsers do not support it but if the following image if were a .tif the file size would be about 300KB, the same file saved as .bmp is about 725KB. The file size would be reduced by more than half.

Uses for .tif might include saving scans from a scanner where you want to preserve as much image quality as possible however .png as I'll later explain is much more suitable.



.gif

The .gif image format was one of the first to be widely adopted on the internet used and is still used to this day. This falls into a special category because it only supports 256 colors. Like .tif It uses lossless LZW compression however that is only after the image has been converted to 256 colors which will substantially alter the original image data. The reduced color depth has the benefit of providing smaller files compared to .tif, for images with little color depth or images with text it's ideal. For example if you wanted to take a screenshot of a web page you can maintain nice crisp edges on text.

Using a standard method of saving .gif will produce large areas of a singular color or banding when the original image has a lot of color, this is particularly true where we have gradients and shadow as the following image illustrates. The banding is very predominant in the following image but note how nice and crisp edges remain, file size is about 56KB.



.gif can also be saved using dithering, dithering will help with the banding but produces a checkerboard look and increases the file size to 77KB:



Here''s a blow up comparing it to the lossless .png , again what is noteworthy here is predominate edges remain crisp.



You can reduce the size of the color palette and produce smaller images, for example if you were scanning black and white documents. In this case the color palette has been reduced to 24 colors and the file size is a mere 22KB. Predominate edges remain crisp.



For the average Joe there is limited uses for .gif however the one example I already provided such as if you were going to take a screenshot of a webpage is one example of where you might want to use it. Another use might be for archiving text documents you are scanning as long as they are simple black and white and don't contain a lot of color. It's actually quite a good format for that use because in addition to keeping nice crisp edges on text it will also provide a smaller file size when you have images with large areas of the same color even compared to .jpg which generally produces the smallest file sizes.

For the web .gif has an option for transparency which is limited because a pixel in a .gif image is either fully transparent or a color. Why this becomes an issue is related to the background color. To achieve a nice soft edge that blends well with the background color the edges of a transparent .gif need to be a gradient. The .gif images used here for the smilies for example would not look good on a black background and have a gray fringe:



The big issue for the web designer is this can become a management nightmare in the future, a simple color change could require many images have to be corrected to fit a new background image. Other problems may occur such as what is outlined here in this example. The forum list uses a gradient background, these small details are what bring pages to life. As you can see the fringe appears on the top unread icon but as the gradient gets lighter further down the list it will disappear.



As a final note on .gif one unique option is it also supports animations, quite similar to video it just displays each frame in sequential order to produce movement. Because of its limited capability like no sound and really large files for anything of length flash animation is the primary format used for anything complex.

.jpg (.jpeg)

.jpg is the defacto format for photo type images and the reasons for that are quite simple. It is lossy format that supports millions of colors with minimal loss in quality especially in images with a lot of detail that can mask the loss when they are lightly compressed. The primary option for a .jpg is being able to set the amount of compression, this may be listed as "quality" or something similar in your image editing program and will generally have a slide bar or input box where you can input a value between 0 and 100. Lower settings will produce smaller file sizes but at the expense of image quality.

.jpg also supports storing data directly inside the image. You may not be aware of this but most cameras default to storing a lot of information when the image is taken such as the camera model, whether a flash was used and many other things. One important hing it does store is a time stamp which is why it is important to set the time on your camera and NOT use the time stamp that can be embedded directly in the image as you don't need it. One thing to note is this time stamp is different than the file time stamp that you computer creates.

You can view or edit this data using most image editors. Dedicated programs like Irfanview or Exifer can even perform batch operations like adding your personal copyright, comments, or even stamping the image with the date it was taken. Of course we'd only want to stamp a copy and not the original.

Here's a sample of what the EXIF data can contain: .jpg compression works by taking similarly grouped pixels of color and combining them into one. This reduces the color depth but if done lightly can reproduce an image that for practical purposes is indistinguishable from the original. Images that have heavy compression or in some cases that have been recompressed will have what are commonly referred to as artifacts. These will appear as larger blocks of color, what might look like smudges especially around contrasting colors and edges or where color has bleed into another area of the image.

This first image is at 100% and for practical purposes is the same as our original, the file size at 128kb however is still quite large for this size but much less than the lossless .png. This is the type of compression level most cameras will be using when set to "fine" to maintain the highest quality image:



The next image is at 90%, the file size is now 54kb. By dropping it by 10% the file size has been cut in more than half and we still have a very good looking image. This will be the typical compression level most image editors default too. If you have ever wondered why if you open an image from your camera and save it in most image editors and get a substantially smaller file without resizing there's your answer.



The next image is at 75%, the file size is now 33kb. We haven't gained much in the file size category however if you are running a web server and serving this image to 1000's per day that little bit is going to add up to a lot. 75% is usually the default for "save for the web". The save for web feature in addition to using a lower quality usually strips the EXIF/IPTC data from images as well skimming off a few more kilobytes. You will notice we now have some artifacts creeping in, most notably around the edges of the balls and the edge of the white area.



You're not going to want to use anything below 75%, matter of fact for the average person 90% would be the minimum and if you have the space save at 100%. The following examples show how quickly the image degrades at lower quality levels and we're not really saving a whole lot on the file size anyway.

50%:


30%:


You may be looking at this last image and saying to yourself although I can see what you mean about the balls the image portion doesn't look that bad and you would be right to some degree, as I mentioned images with heavy detail can mask the loss in quality. It's when we blow it up that it becomes apparent exactly what has been lost. This is a comparison of the 75% image to the 100% image. The last two images are much worse.



As final note on .jpg, recompressing them can introduce artifacts. Each successive red ellipse in the following image represents the image being opened and then saved. Recompressing it 10 times shows significant difference between the first save and the last one. I'll note I'm using only 75% here and solid colors with contrasting like this are quite susceptible to artifacts so I've basically insured that artifacts will appear. It may take hundreds of times for this to appear using 90% on a regular image, the point is recompressing should be avoided if you can.



.png

.png basically combines all of the best features of .gif and .jpg into one format. It is a lossless format which produces the smallest file sizes. File sizes are much smaller than .tiff however they are not quite as small as .jpg. As a "I don't want to make any mistakes format" it's ideal. As already mentioned if your original images are .jpg you will not benefit saving to this format unless you have altered the image.

As image format for web design it has one unique option and that is alpha transparency. As I have already pointed out .gif that supports transparency has with the background, this not the case with .png because we can set a true transparency to a color. A simple example would be the logo and the forum images used here. In this case the shadow used on this image is tranprent itself, this allows the background to come through no matter what color it is.