In this post i will tell about the different image file formats. I’ll focus on BMP, GIF, JPG and PNG used on the internet. I write this post because i’m tired of people who doesn’t know which image format they should use for their image files. I hope some will read this post and learn about the different image formats, and then in future choose the right ones. If you have suggestions for changes to my post I’ll be glad to hear

Why even consider the format?

You should always, and always consider what file format to use for your images, because it has a big influence on what your image is like. Bad and heavy or great and light? When you choose a format, your choise will affect the following:

• Quality
• Filesize
• Loadtime
• Transperency

Remember! When you change or convert the format of an image, you’ll have to use a program - it isn’t enough to change the ending of the filename (.bmp, .gif, .jpg, .png). I use Adobe Photoshop, but I’ve experienced that my friends use Paint to save images or convert with success.

Description of the four types.

BMP is actually a great format, and is the one used in almost all programs. It’s no good on the internet because it has no compression (which means big filesizes = heavy load), but because it isn’t compressed, it contains many informations about colours. Besides, you can choose how many colours you want the image to store by yourselve. If you want to you can save your BMP with RLE compression, which means smaller filesize for your image file. I think that everyone should avoid using BMP on the internet! Many people think that BMP should never be used, but actually it’s an OK format for non-internet use and ofcourse programs.

GIF is often used on the internet in webdesigns, and it’s a good format. But.. The GIF format can only have up to 256 colours which is a bad thing in advanced graphics with many colours (makes it noisy), so GIF is mainly for simple graphics and drawings. A plus in this format is that it can have transperent colours which is often a very usefull thing thing for image files. I won’t recommend GIF to transperent colours though, but instead PNG (see PNG filetype).

JPG is normally used to fotograps and some webdesigns (not recommended though). JPG can have up to 16,7 mio. colours which is one of the reasons why the filetype used to fotograps. Normally I use this format for customer previews of webdesigns.

PNG is my favourit image format, and is also often used on the internet in webdesigns. PNG is the new and better GIF file format - and it can have up to 24-bit colours (24^8). The filesize of PNG isn’t very big and it has a much better transperency channel than GIF. I’ll deffenetly recommend this format for webdesigns!

Quality and filesize

When you save as JPG you have to think about the quality and the filesize when changing the quality. Down below you find 4 different qualitysettings from Photshop. From left the image quality is 2, 6, 9 and 12. From worst to best. 21kb, 25.6 kb, 30.4 kb and 50.4 kb. Notice the noisy background in the bad ones.

Now we can take a look on JPG compared to GIF (both image quality and filesize). If we take a good quality picture in GIF format, its filesize is 13.2 kb, and if we want about the same size in JPG (17.4 kb) we get a very bad quality. If we want the same quality in JPG as the GIF, we are on a filesize like 32.3 kb. So - choose GIF format before JPG. Note that sometimes, and especially when using the function “Save as web and devices…” JPG can be smaller than PNG. This happens in advanced graphics with lots of colours. The most normal file to use for web though is GIF/PNG. See below: GIF, JPG small, JPG big.

A PNG image in same quality as GIF and JPG big size above, have a size of 17.5 kb. But …

Transperency

- If you want to save an image with transperency, you should choose PNG file format. The transperency in PNG is much better than GIF. Below you see four images with a man’s shadow that fades out to transperency (fades into the websites background). The one to the left is GIF format and the one to the right is PNG.

As you see, the GIF image is very bad quality and the PNG is very good (in IE6 or older the png image doesnt work).

I’ve also tried to make the man with 50% transperency. Theese images is posted below. The GIF format can’t show it, but the PNG can! Besides, the GIF file has a very bad quality in edges. (Again the PNG image cant be shown in IE6 or older)

If you insist to use PNG images in IE6 or older, you can download several javascripts or other css fixes - it’s just hard to find one that really works. Allthough I did! You can read a guide about it from here.

Conclusion

So what did we find out? Well, we can have a look on the different size for about the same quality:

So - thdesigner you should probably always use GIF or PNG that has a small filesize (because of loadtime). GIF’s when using less colours and maybe no transparency and PNG when using many colours and transparency. If you are a fotographer you should always use JPG high quality (or maybe BMP) - or RAW for that matter. If you are a normal person you can use whatever you want, because it doesn’t matter then

JPG’s can be used to web aswell as GIF/PNG and sometimes. Depending on the graphics, it can turn out with a smaller filesize than PNG - but in avarage, the PNG is the best for web. If you want to use only one format that works everytime: use PNG.

• Webdesign less colours = GIF
• Webdesign with many colours = PNG
• Webdesign with transperency = PNG
• Fotographer = JPG High quality/RAW or maybe BMP
• Normal person = Whatever you want.

I hope you learned something, and again - if you have suggestions to changes, please comment them!