On this page:

Attention 1:
The png format is true color: just the image as it is painted.

Attention 2:
The png's are all without transparency.

Update 16 dec. 2006:
Tip: if a gif is covering partially the same colors of a background img behind, then you can save lots of kB's by giving transparency to the identical colors !
 

1.
Image with 25 plain colors

23 colors are painted in boxes, and a black line and a white line of 1px are placed on each row.
Summary of the result:
 

 
(in real life: the gif | the png | the jpg-1 | the jpg-25% )

Notes:

• Amount of colors above: the amount of colors which appeared to be in the img after opening the saved file.
• The gif and the png have the same quality as the original, but the gif is eating almost 3 times as much kB's as the png.
• The jpg with the least compressing factor is already blurring a lot - and needs a lot of bytes for that!
• The jpg with 25% compressing is smaller, but still 4 times the png - and has a bad quality: blurring the 25 original colors with almost 7.000 new colors in between (!).

2.
Image with 117 color gradient

This time a gradient image with 117 colors in it is the starting point. A 256 color gif can easily contain them.
Summary of the result:
 

(in real life: the gif | the png | the jpg-1 | the jpg-50% )

Notes:

• The gif and the png have the same quality again.
• The jpg without compression has the same quality for the eye.
• The jpg with 50% compression has lost 23 colors - in fact more, for at the same time some new colors are added with an other hue.
  See enlargement of the left part:

 

3.
Photo image with 11.185 colors

In the original of the photograph 11.185 colors can be counted. As said by Paint Shop Pro, didn't check it by hand. ;-)
Summary of the result:
 

(in real life: the gif | the png | the jpg-25% | the jpg-50% | extra: jpg-1 )

Notes:

• Here the png takes the most kB.
• The jpg with 50% compression is showing quite a lot of the jpg artifacts in the air around the right tower.
• The gif and the 25% compressed jpg are both reasonable.

Enlargement of the tower part:
 

Notes:

• In the blue sky area the 25% jpg has softer color tones as the gif, though around the tower the gif is better as the 25% jpg.
• Of course it is possible to use a jpg with less compression (say 20%) to get more quality, offering an increasing amount of kB.

In this case, I should choose the 25% jpg: it has a reasonable quality and is small too.

• To compare: the jpg-1 format of this image has a size of 14.3 kB; the enlargement shows a quality almost the same as the png.

While this is only a 150x110px image, the difference in kB's between the saving formats is not so much.

But when there are a lot of small images, or a bigger one in a web page, the difference can increase or decrease the download speed dramatically.
Compare a 720x480px image:

• saved as png ..................: 564 kB
• saved as gif ..................: 197 kB
• saved as non-compressed jpg ...: 150 kB
• saved as 25% compressed jpg ...:  58 kB

[to aid in quality comparison, the images will open in a new window.]

 

4.
Some conclusions

• A (compressed) jpg does not always have a smaller file size than a gif. [example 1 and 2]
• Nor it is always greater! [example 3]
• A png does not always have a greater file size than a gif or jpg. [example 1 and 2]
• Neither it is always smaller! [example 3]
• A jpg (with in principle 16M colors) does not always have a better quality than a gif with 256 colors. [example 1]
• A gif is not always useless for photographs. [example 3]

 

5.
The general rule

As the conclusions show:

the general rule is: there is no general rule!

It depends strongly on the characteristics of the used image what saving technique for web publication is the best.

The best you can do, is:

• Not to forget: always keep the original!
• Bring a copy of the image back to exactly the pixel size you want it to have in the web page.
• Mostly a bit sharpening is not bad.
• Save this image in the best quality: as png.
• Save a copy of this image as gif.
• Save a copy of this image as jpg.
• Compare the results and make your choice, looking at the quality and the file size of each alternative.
• You can check the download speed to make a better choice. Use the download time for a 56 kbps modem as a guideline.
  With the (free) Web Page Speed Analysis tool of WebSiteOptimization.com you can test your test pages online.
• Consider placing thumbnails or lower quality images on the main web page, with the option to click for enlargement and/or high quality (= big size = long download time).

In this way you are assured to get the most fitting image for your needs, as well as the greatest usability (highest download speed) for the visitor.

And in case of big images:

• Consider placing a message or progress bar on the page: telling the page is not frozen, but downloading an image.

Also it can be a good idea to experiment with the available types of saving in your painting program:

• Use different compression factors for a jpg.
• For a gif: surprisingly a 16 color gif (instead of 256 colors: a welcome decreasing of the file size) can be enough in more cases then you'll expect.
• Save a gif with different methods: my experience is that mostly the "octal" method is the best, though sometimes the "median" method is better: try both! Also the "nearest color" option and the "dithering" option can be compared.

 

6.
Last shout!

The visitors of your site will appreciate your site a lot more when they get quick and good images on screen.
And for you as web maker: the 5 minutes needed to save an image in different ways are not the pain!

21 apr. 2006

More topics / testpages about images in this site:
Semi transparent png's (with IE-png hack)
Semi-tranparent dropshadow in css (without IE-png hack)

Testpage png-like gif (with a little help of friend css)
The port-hole theory (positioning of background-images in css)