Image Formats (gif, jpeg, png) What’s the difference? Witch is the best?
I think that most of you’ve wondered before: what is the difference between image formats and what is the best format to use on your web site.
One day, I was having the same question in my mind and I started to search. Here you can find my conclusions:
1. Description.
First thing you should do is to study each format in particular and see what are the advantages and what are the problems that occurs when use that format. Above you can read a little description of each format:
1.2 GIF:
Is the most common used over the internet. It’s the only option to put animations (without using flash) only and it’s excellent at compressing areas of images with large areas of the same color. It also supports transparency.
His limitation is given by the fact that it only support 256 colors, please note that is used a lossless compression algorithms. That’s why it’s not recommended for photographs.
Another feature of gif format is Interlacing, that creates an illusion of fast loading, when image is loaded in browser.
1.2 JPEG:
Specially designer for photography. It use o lossy compression algorithms and you can select quality of the image (smaller quality -> smaller file size).
1.3 PNG
Is the youngest format. It’s supported by almost all new software and browsers. It was implemented to resolve GIF and JPEG problems and limitations.
2. Conclusions:
GIFs are very useful when you need a logo, straight lines, animations, large areas of plain color.
Jpeg is useful for photographic use commonly, when GIF can’t handle the colors.
PNG are almost as good as GIF and JPEG together, but remember that not all browsers support them or presents bugs when displaying them (IE 6 for example). Another inconvenient for PNG is that it can replace GIF’s animation.
I recommend that when you are the designer of a site try to use GIF for layout as much as you can. If the quality is not good enough try to use JPEG (because is well supported by all browsers). PNG are very useful when you use alpha blending, but be careful, not all browsers supports that.
[... It will be completed ... some day : ) ... ]
