GIF, JPEG, PNG? Now to GIF

Continued from previous post: GIF, JPEG, PNG? Short Answer

GIF files deserve more explanations than the other two formats, in case you wonder why we did not delved into more details on it in the previous post.

GIF colour palette

The most practically important feature of GIF format is that it stores images using no more than 256 different colours. The editor would analyse the image before saving it as a GIF file, and decide which 256 colours to keep in the file, and which colours to replace with one of those 256 colours. The the outcome usually is once of these:

  • There were less than 256 colours in the image, and it is saved without any losses of data or quality
  • Most of the space in the image is taken by only a few colours, and the rest of them are hidden in details, like edges of shapes. Some details would be lost, but you may not even notice it
  • Many colours are spread over significant areas, and GIF format would severely distort the image

Let’s look at some examples.

A colour photograph Thumbnail of the original photo of flowers, which we use as examplewould often contain millions of different colours, so saving it as a GIF file will usually impact the quality of the result. We took a photo with exuberant colours as an example. With the size of 800×790 pixels, this image should create enough problems for editors, when they try to squeeze it into a GIF file. Yes, it’s the editor that chooses the colour palette, and so the quality of result depends on the software you use. It’s worth to notice that some editors would not give any options to control the colour processing; but some may give a few.

Here is a part of the original imageenlarged original image

 

 

dithered GIF image created by Paintbrushzoom into GIF file dithered by photofiltreAn editor could compensate missing colours using dithering: alternating pixels of several colours.

 

But any dithering is obviously is not a good option for publishing. (It might have been handy in old days, maybe for printing…)

 

GIF image without ditheringThis is probably the best illustration of what happens with colours: there are simply not enough of them. So the transitions between close colours become quite distinct – when those colours cover large visible areas

zoom into GIF file undithered created by fireworksNotice how different are results when using different editors

zoom_gif_undithered_imagereadyStill, even the best algorithms would be far from ideal: some images are just not suited for GIF format

Compression

We already mentioned that GIF files are well suited for images with large areas of the same colour: they will be compressed very efficiently.

Another fact, which may be useful to know, is that horizontal stretches of the colour would be compressed better than vertical.

Here is a small experiment: we fill a square area 250×250 pixels with vertical gradient colour like this: Gradient fill - horizontal stretch and save it as a GIF file. There are only 250 colours in the image, so all of them are preserved. The size of the file? 8 KB. Now let us rotate the image Gradient fill - vertical stretch and save it again. The size increases to 11.3 KB.

Note that PNG format would only need 1.7 KB, and JPG files of good quality – 4.4 KB. And the sizes would not depend on gradient orientation.

Transparency

Now let us look at what it means, when we say that FIG format does not support semi-transparency.

Perfect smiley on white background Let’s say you made a smiley icon with white background. Next, you need one to sit on a dark green background – and you draw another one: Perfect smiley on dark green background

You store them both as GIF files. And GIF files allow for transparent areas – so you decide that, of cause, you need only one icon: you can make the background transparent. So you take that second smiley, and erase the dark background: Poor quality smily with edges from green background But something is not quite right there: those dark pixels around the yellow area…

The edge of the yellow circle is a  mix of yellow and green colours; that is what stands out. The first of your icons had instead a mix of yellow and white colours, so those pixels would stand out if you try to erase white colour, and show the result on a dark background: Smiley_green_on_white

So what is the answer? You should have drawn the smiley without any background at all, that is, over a transparent background. Then the edge would consist of a mix of yellow and… transparent colours – that is, of yellow pixels with varying degree of transparency. The only problem would be that you would not be able to store such smiley as a GIF file: GIF format supports only solid and transparent, but not semi-transparent pixels. You would have to save the image as PNG file – then it will be perfectly blending with any background: Smiley on gradient background

All this means that transparency in FIG files is not often needed: only if you have transparent areas with horizontal and vertical edges. More often you would rather use transparent backgrounds, and save files in PNG format.

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmail

Leave a Reply

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