In a previous post I summarized the correct uses of various image formats for blogging purposes. I decided to delve a bit deeper into the issue. So I created some example images to show you the correct use of GIF, JPG and PNG.
I also compared the usefulness of all compression tools I mentioned in that previous post.
I created and/or edited all example images in Photoshop Elements 10.
All image files were saved at maximum possible quality.
And in the case of JPG files also formatted progressively with 5 scans.
In the example images below I compared the GIF, PNG, and JPG image formats in various scenarios that many bloggers might encounter.
The following images contain only a few colors and the colors cover blocks of the image.
In this case GIF is optimal for web use because it saves valuable bandwidth and enables your page to load much faster.
The winner is: GIF.
Transparency of Graphics
In the following situation I tried to preserve transparency. To see whether the background remained transparent, I set the background color to a very light shade of violet.
Based simply on file size GIF seems to be the best format here.
But take a closer look at the quality of the lines making up Bart’s contours — they are wiggly. Also the colors are slightly off because GIF only supports 256 distinct colors.
These artifacts are the reason why PNG is actually the best format for transparent graphics with lots of colors and complicated lines.
The winner is: PNG.
I created a simple animation of a yellow ball moving up and down on a green background.
In this case, GIF is again the clear winner regardless of file size, because it is the only widely supported animation format for web use.
Anyway, the file size is only 5,019 bytes.
However, it will be a few years before these formats become truly widely supported both by major browsers and major image editing programs.
The winner is: GIF.
Here is a photo of some colorful flowers. Click on them to see their enlarged versions.
The deciding factor for web use here is the file size:
- smaller GIF — 35,633 bytes
- smaller PNG — 104,417 bytes
- smaller JPG — 109,457 bytes
- larger GIF — 198,596 bytes
- larger PNG — 623,021 bytes
- larger JPG — 218,128 bytes
Let’s try another photo — a wing of an airplane in flight.
- smaller GIF — 27,358 bytes
- smaller PNG — 76,820 bytes
- smaller JPG — 39,345 bytes
- larger GIF — 153,983 bytes
- larger PNG — 462,235 bytes
- larger JPG — 239,994 bytes
Three times out of four, JPG has a smaller file size than PNG, while always maintaining excellent quality. It also fast becomes clear that the larger the dimensions of a photo, the bigger winner JPG becomes.
The result is obvious — use JPG for publishing photos on the web.
The winner is: JPG.
Photos with Text
Here is a version of the previous set of flower photos with some text on them.
Comparison of file sizes:
- smaller GIF — 36,136 bytes
- smaller PNG — 103,851 bytes
- smaller JPG — 74,892 bytes
- larger GIF — 194,739 bytes
- larger PNG — 607,647 bytes
- larger JPG — 224,754 bytes
PNG has beautiful quality but its file sizes are enormous compared to JPG. JPG is the clear winner in this category, too.
The winner is: JPG.
Incorrect use of the GIF format can be used to achieve some cool special effects. In this example I created a gradient effect:
The same image in PNG format feels very different:
This is a design and aesthetics question really, so there is no clear winner.
Comparison of Compression Tools
Now we know what image format to use in various scenarios based on image quality and file size.
However, I mentioned several compression tools in my previous post.
By compressing the sizes of the images, it might be possible to make some last minute changes to the winning formats.
I tried to compress two files of each format by using 9 different compression tools.
The first set of files was the smaller version of the airplane wing image. The second set was the larger version of the colorful flowers image.
In this test I compared the tools’ user friendliness and speed of compression, as well as the resulting images’ quality and file size.
Regarding friendliness I cared about whether the tool compresses all three image formats, whether it is possible to optimize multiple images in one step, and (in the case of software) how straightforward is the installation procedure.
I gave an extra point for any beneficial features or advantages a tool had over its competitors.
I didn’t deduct points for any errors or failures.
And as far as the winning image formats are concerned — none of the compression tools made a difference.
Some extra bandwidth can be saved, especially in the case of PNG files, but overall you can stick with the winning image formats as described above.
Liked this post?
Subscribe to our newsletter to receive early notification of new posts and deals: