westciv downloadable courses
color and graphics - sample section
GIF File Size
In this section we learn how GIF compression actually works, with a view to being able to create the most appropriate, smallest GIFs in our own work.
One issue with the use of any graphics is that of file size, particularly over a network, where transmission time affects the perception of a user. The larger a file size, the longer it will take to download, and so the longer a page will take to render. Visitors to sites are notoriously impatient. So the constant desire to reduce file sizes.
How big is too big? This is definitely along the lines of "how long is a piece of string?" Obviously there is no right or wrong answer, but rather a judgment that needs to be made in all the circumstances. The first question you should ask is, is the image decoration, or information? People will be much more willing to wait for information, than to wait for a decorative image. In the case of information (for example a map, a graph and so on), the trade off needs to be between the usefulness of the information, and the time it takes to download. A a general rule, you will want a good excuse for images of more than around 50KB, but it might be appropriate.
For decorative images, smaller is clearly better. The first issue is to try and reduce the need for images altogether. Then, where possible reduce the size of images, perhaps by breaking them into smaller elements, though this has its own difficulties which we discuss toward the end of the course. I'd aim for something like a very small number of graphical elements (maybe around 5), in the order of 3 to 5KB in size. Again, this is something to be decided upon in all the circumstances. Who are your users? What is the purposes of the site? What connections to the internet do these users have in terms of speed, and so on? As a general rule, I'd err on the side or caution, looking to have a fast, very usable site, as opposed to an "overdesigned" slow loading and difficult to use site.
So what determines the size of a GIF file? Unscientifically, the factors which are important are
- the number of colors
- the dimensions (width and height) of the image
- the complexity of the image
A little more scientifically here is how it works. GIFs use a compression system that doesn't lose any of the information in the image. This is called lossless compression. An image can be opened and saved a thousand times with no degradation of image quality. However, lossless compression doesn't compress as much as lossy compression systems, like those found in JPEG, which we will see shortly.
The compression for GIF images is best with large blocks of the same color. That's why it's a good format for illustrative art, or non photographic images - and a poor choice for photographic images. Anti-aliasing an image, or applying gradients, adding drop shadows and other effects all add heavily to the size of a GIF.
Let's take a look at a few examples. Some of them are a little extreme, but they do demonstrate what it is that makes one GIF of similar dimensions larger than another.
figure 37: GIF with no anti-aliasing. Number of colors=2, size=1 993 bytes
Obviously, you would never use an image like this where the text isn't anti-aliased, but it does show how much you are adding to a GIF simply by using anti-aliasing, as opposed to having solid transitions. In this case you add almost 90% again with the anti-aliasing in the GIF below.
figure 38: GIF with anti-aliasing. Number of colors=16, size=3 594 bytes
Now here's the same GIF with a drop shadow
figure 39: GIF with drop shadow. Number of colors=256, size=12 457 bytes
figure 40: why a drop shadow increases GIF size
Notice that once you introduce the popular drop shadow effect, though, the size increases dramatically, in this case 3 and a half times the size. You can see why - the number of colors has increased to the maximum possible, 256, and also, as you can see above you've created all those small blocks of color.
As mentioned above, GIF compression works best where there are solid blocks of color for it to work with. That's why the next example, even though you might think it would be quite complex and therefore large, is in fact smaller than the simple GIF that only has the drop shadow. The area which forms the drop shadow contains a lot of different colors and very few blocks of color. The rainbow text below on the other hand has solid bands of color throughout.
figure 41: GIF with horizontal bands of color. Number of colors=256 Size=7 138 bytes
What of this next example, you would expect it to be similar to the one above, as again, there are solid bands of color. It is in fact more than twice as big. Why?
figure 42: GIF with vertical bands of color Number of colors=256 Size=15 470 bytes
Here's the reason: horizontal color blocks are compressed more easily than vertical: that's why this example here, where the bands of color are vertical seems to be disproportionately large.
figure 43: GIF with small solid blocks of color. Number of colors=256 Size=23 574 bytes
The fewer solid blocks of color you have in your GIF, the bigger it will become - so the example above really is getting quite big.
figure 44: GIF with virtually no solid blocks of color. Number of colors=256 Size=26 783 bytes
figure 45: why this GIF is so large
And then the winner is this last one, where, as you can see, each pixel is a different color.
One of the areas where this comes into play most is with dithering. As you might guess, dithering can greatly increase your image sizes, because there are very few blocks of solid color that can be taken advantage of by the compression system. When it comes to the issue of color, and file size, there are only compromises, and it is a matter of judgment as to which are the appropriate tradeoffs to be made.
If you do find yourself with a situation where dithering is the option you want, or where there are very few blocks of solid color, then it could be the type of image you have is better suited to the JPEG format, or TrueColor PNGs.