Pages Menu
TwitterRssFacebook
Categories Menu

Posted by on Aug 4, 2009 in Uncategorized | 0 comments

JPG or PNG or GIF? Pick The Image Flavour That Best Suits Your Needs

I had a little correspondence recently with someone who wanted me to help her figure out why her smallish web site was running out of server space. On first impression, all seemed okay other than a couple of the images on the site taking ages to load completely.

For photographs, JPG at a reasonable quality level works well. Look at the size of the PNG by comparison! The quality of the GIF file is clearly not suitable.
skatergyrl-jpg skatergyrl-png skatergyrl-gif
JPG
90% Quality
Size = 88kb
PNG
24-bit
Size = 603kb
GIF
256 Colours
Size = 156kb

On investigation, it turned out that all of her pictures (all photographs of people or physical items) were saved as PNG files. When asking about this she told me that she thought that PNG was the correct format to be using as many of the sites that she had been to recently were using it.

And she’s correct – PNG is the newer of the common web-ready image formats. And for high-end, high space sites, serving predominantly broadband access users, it’s not at all a bad way to display photographs. When compared to JPG files, PNG’s use a lossless compression process, meaning that image resolution and quality are maintained.

The down side to using PNG’s for photographs is that file size is heavily compromised when compared to JPG.

Large files take up big chunks of server space, and are slow to load on less the many less-than-high-speed that most South African internet users live with.

The picture at the top of this post is a good example. Even at a unnecessarily high quality level, the JPG version of the cheeky-faced skater girl is significantly smaller than the equivalent image saved as a PNG. In fact, I could probably have reduced it to around 75% without significant degradation, and saved even more file space.

Here’s a summary of some of the chief pros and cons of the three major web enabled file types:

JPEG (Joint Picture Experts Group):

Good:

    • Photographs, some screenshots – games/videos, movie stills, desktop image backgrounds

Bad:

    • Application screenshots, line drawings, text images, cartoon/comic art, when clear lines or sharp colour contrast is required

PNG (Portable Network Group):

Good:

    • Text, line art, comic-style drawings, general web graphics, application screenshots (especially those with text), for exact and accurate (lossless) duplication of photographs, as a replacement for GIF files that do not contain animations, when transparency is required

Bad:

    • Photos, in-game screenshots (unless quality is not important), not very well supported by older browsers (many simply do not display PNG files)
These web icons are best displayed using PNG files as they contain transparent backgrounds. (Hover over the right edge of the row of images to see the effect more clearly.)
2 2 2
JPG
90% Quality
Size = 8kb
PNG
24-bit
Size = 75kb
GIF
256 Colours
Size = 14kb

 GIF (Graphic Image Format):

Good:

    • When simple animations are needed, has widespread browser support

Bad:

    • Large file sizes for mediocre quality, often limited to 256 colours, being replaced by PNG in many instances
The obvious advantage of Gif files is in their ability to display animated images. BUT, you really don’t want to cheapen your site with a bunch of tacky animations, now do you?
Taurus_2_Black-jpg Taurus_2_Black-png Taurus_2_Black_back
JPG
90% Quality
Size = 14kb
PNG
24-bit
Size = 4kb
GIF
256 Colours
Size = 3kb

Share your thoughts?