How to Use Image Formats Correctly — GIF, PNG, or JPG

happy-kitten

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.

Examples

I created and/or edited all example images in Photoshop Elements 10.

jpg-formatting-options

JPG Formatting Options

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.

Simple Graphics

The following images contain only a few colors and the colors cover blocks of the image.

gif-image-gif

GIF version

gif-image-png

PNG version

gif-image-jpg

JPG version

The differences in size of the above files are clear: 3,031 bytes as GIF, 9,024 bytes as PNG, and 41,270 bytes as JPG.

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.

bart-simpson-jumping-gif

GIF version

bart-simpson-jumping-png

PNG version

bart-simpson-jumping-jpg

JPG version

Clearly, JPG cannot preserve transparency. And as far as image sizes go, the GIF has 6,776 bytes, the PNG has 71,802 bytes, and the JPG has 68,748 bytes.

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.

Animation

I created a simple animation of a yellow ball moving up and down on a green background.

ball-animation-gif

GIF animation

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.

Note

As I explained in the previous section, GIF has trouble with artifacts. Therefore, competing web animation formats are getting ever wider recognition, such as APNG (Animated PNG) and WebM.
 
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.

Photos

Here is a photo of some colorful flowers. Click on them to see their enlarged versions.

colorful-flowers-gif

GIF version – clickable

colorful-flowers-png

PNG version – clickable

colorful-flowers-jpg

JPG version – clickable

The artifacts are clearly visible even on the smaller GIF image. The quality of the PNG and JPG images are both good.

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.

airplane-wing-gif

GIF version – clickable

airplane-wing-png

PNG version – clickable

airplane-wing-jpg

JPG version – clickable

Comparison of file sizes:

  • 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.

colorful-flowers-with-text-gif

GIF version – clickable

colorful-flowers-with-text-png

PNG version – clickable

colorful-flowers-with-text-jpg

JPG version – clickable

Again, GIF’s 256 colors reveal the artifacts.

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.

Special Effects

Incorrect use of the GIF format can be used to achieve some cool special effects. In this example I created a gradient effect:

gradient-effect-4

Gradient Effect in GIF

The same image in PNG format feels very different:

gradient-effect-4

Gradient Effect in PNG

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.

Let’s see…

Comparison Table of Compression Tools

Comparison Table of Compression Tools

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.

According to my test, the best online compression tool is ImageOptimizer.net and the best downloadable compression tool is JPEGmini. It’s great that both of them are free to use.

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:

Next Post »« Previous Post

Leave a Reply

Your email address will not be published. Required fields are marked *