About Web Graphics – PNG, GIF, JPEG

I made a summary about each one of this formats.

Don’t forget to subscribe to our news to stay updated to our design news!

You might also like:

• 50 Texture Photoshop Tutorials
• 26 How to… Photography Tutorials
• 53+ Text effects tutorials in Photoshop
• 40 CSS effects tutorials
• 36+ Photo Manipulation Tutorials in Photoshop
• Another 35+ Adobe Illustrator 3D effect Tutorials

GIF

GIF that means Graphic Interchange Format is known as the favourite format of the WEB. It is also the oldest format in the world and I can tell you that GIF is the format of 60-65% of graphics on the Web.

A GIF can contain 256 pixel colours. This is the maximum number of colours.This format is perfect for logos , illustrations , icons etc. , but is not recommended and efficient for saving photographic images.You can use J-PEG instead. Another advantage of GIF , is they may contain transparent areas , so everything what is behind the transparent area , will show through.

As an example , I can tell you that allmost all the banners on the web are animated GIF’s. I’m sure you does not know that the GIF format uses LZW (LEMPEL-ZEW-WELCH) compression – concentration of pixels of identical color.

JPG

JPEG that means Joint Photographic Experts Group is pretty different from GIF because it contains millions of colours . The principle of JPEG images is that: some images information is recycled in the compression process but even so , the quality of the image is very very good and the degradation of the image is not important. I read a lot about JPEG and there was a motto:

“EXCELLENT IMAGE QUALITY PACKED INTO SMALLER FILES”

Because of the compression, photographic images must be JPEG files. But just this kind of images, because the graphical images are not a pretty good solution for flat and because of the compression scheme, the image save as a JPEG will be a lot larger than the same image save as a GIF.

We all know that JPEG is a standard file format, which means it is supported by all the popular graphic tools like Adobe Photoshop, Macromedia Fireworks . All these programs let you set the quality compression level.

PNG

The big deficiency of PNG is that the browsers could not support it’s format until recently that’s why it is much behind GIF and JPEG in popularity(I can even give you an example: PNG was not supported in Internet Explorer until 7 version).

PNG can support maximum 8-bit indexed color, 16-bit grayscale , or 24-bit true color image.

I give you some examples of images and what format should you choose. If you want to take the right decision in choosing the right file format please follow my tips:

• If the image is graphical, you should use GIF. It is the best choose for graphical images.
• If the image is a photograph, you must choose JPEG because JPEG compression works best with images like that and the format can display millions of colors.
• If the image needs animation you must use GIF because this is the only format that can contain animation frames.
• If the image requires transparency you can use GIF or PNG. Only these two allow transparent areas.