|
GIF or JPEG When you're ready to add graphics to your Web pages, you'll immediately be confronted with a question: How should you format your images? Graphics in their natural state are too big to be quickly downloaded over the Web, so you have to compress them. The standard compression formats are GIF and JPEG (compression, by the way, doesn't shrink the length and width dimensions of your graphics, it just reduces the size of the file in overall bytes). |
Image Compression Techniques Is GIF or JPEG the better format to use to save images? The resounding answer to this question is: It depends. It depends on the type of image you're working with, how small you want your image file to be, and the way you want your graphic to download. The number of compression formats available can be confusing, but an understanding of two of the most commonly used standards, JPEG and GIF. Here's the Deal:Use JPEG when it is a photograph, either black and white or full color. Images such as photographs usually contain millions of individual colors (16 bit or higher). Use GIF when it is clipart or a logo. Any image that contains fewer than 256 colors (8 bit or lower). Most clipart images contain only 16 colors in some cases even fewer. All Web images are compressed in some fashion. In order to get graphics to behave themselves on the Web, we first have to compress them to take up as little room as possible, so that it takes as little time as possible for the viewer to download them. One of your primary considerations is the type of image you're working with. Photographs and graphics with lots of color fields, and particularly colors that blend and fade into one another, are best served by JPEG. If you are saving a full color photograph with millions of colors, definately use JPEG. If, on the other hand, your image has flat color fields, like logos and images with only a few colors, it will compress well in the GIF format. Furthermore, an image's compression format shapes the way a browser can download it, and browsers can do several things with GIFs that JPEGs don't support. JPEG JPEG is most suitable for realistic, photographic images containing many millions of colours. JPEG allows for different levels of compression. JPEG is a lossy compression method. In other words, to save space it just throws away parts of an image. Obviously you can't just go around discarding any old piece of nformation so what the JPEG algorithm does is first divide the image into squares (you can see these squares on badly-compressed JPEGs). Then it uses a piece of mathematics called Discrete Cosine Transformation to turn the square of data into a set of curves, some small, some big, that go together to make up the image. This is where the lossy bit comes in: depending on how much you want to compress the image the algorithm throws away the less significant part of the data (the smaller curves) which adds less to the overall "shape" of the image. Optimizing JPEGs is generally pretty simple. You don't need to mess with color palettes or bit depth or any of that nonsense; just choose a resolution on a scale from "minimum" or "lowest quality" (the smallest file size) to "maximum" or "best quality" (fattest file size). You'll be able to see the trade-offs between image quality and downloading time quite easily. GIFs are a little trickier, but they're also more flexible in some ways. The main factors that you can tweak in a GIF are color depth, color palettes, dithering, and transparency. The reason for choosing JPEG for images with more complex color patterns is that this format enables you to save images with millions of colors, whereas the GIF option restricts you to 256 colors. Another important issue is file size. JPEG permits a greater degree of compression than the GIF alternative, enabling quicker downloading times for larger graphics. And JPEGs appear to retain almost complete image quality for most photographs. As a demonstration, this photo showing the producer of Webmonkey at a staff meeting has been compressed as a JPEG (above) and as a GIF (below). Those dots you see in the GIF are called"dithering," and they come from that format's characteristic adjusting of pixels within a graphic to simulate the display of colors not in the GIF's color palette. This means that, unlike GIF, you get a say in how much you want to compress an image by. However the lossy compression method can generate artifacts - unwanted effects such as false colour and blockiness - if not used carefully. GIF GIF, which stands for Graphics Interchange Format, is a lossless method of compression. (pronounced with a 'G' not 'J' - not "Jif" - we are not talking about peanut butter) All that means is that when the program that creates a GIF squashes the original image down it takes care not to lose any data. It uses a simple substitution method of compression. If the algorithm comes across several parts of the image that are the same, say a sequence of digits like this, 1 2 3 4 5, 1 2 3 4 5, 1 2 3 4 5, it makes the number 1 stand for the sequence 1 2 3 4 5 so that you could render the same sequence 1 1 1, obviously saving a lot of space. It stores the key to this (1 = 1 2 3 4 5) in a hash table, which is attached to the image so that the decoding program can unscramble it. The maximum compression available with a GIF therefore depends on the amount of repetition there is in an image. A flat colour will compress well - sometimes even down to one tenth of the original file size - while a complex, non-repetitive image will fare worse, perhaps only saving 20% or so. One of the advantages to a GIF is that you can interlace it. Interlaced GIFs appear first with poor resolution and then improve in resolution until the entire image has arrived, allowing the viewer to get a quick idea of what the picture will look like while waiting for the rest. JPEGs can only arrive linearly, from the top row to the bottom row. Another plus is that the background of a GIF can
be made transparent, so you see the background
color of the browser window you're in. Finally,
GIFs can also be animated, like the little fellow
you see at the top of this page. Poor old JPEGs
just have to stand still. There are problems with GIFs. One is that they are limited to a palette of 256 colours or less. Compuserve, which created the GIF, did at one point say it would attempt to produce a 24-bit version of the GIF, but then along came problem number two: Unisys. Unisys discovered that it owned some patents to key parts of the GIF compression technology, and has started demanding fees from every company whose software uses the (freely available) GIF code. This has somewhat stifled development.GIF compression is best used on images with between 1 and 256 colours such as logos or digital art created using a paint or drawing package. If you want a transparent image which lets the background show through then you will need to use the GIF standard. So what exactly does "optimizing" an image mean? It's essentially reducing the file size of a picture so it loads on a Web page as quickly as possible. Color Depth Color Palettes GIF-related programs often give you some other palette choices. The only one I've ever bothered with is the "Adaptive" palette, which sizes up your image and constructs a palette related to the colors you've used. This is sometimes worth checking out because an Adaptive palette deals well with gradients. Your best bet is to try both the Web and Adaptive palettes and see for yourself which looks the best. Dithering Transparency One final option for both GIFs and JPEGs is to
have a rough picture download before the whole
file comes across. This gives your audience something
to look at while they're waiting. They don't load
any faster than regular image files, but at least
the viewer can quickly get an idea of what's coming.
GIFs can be interlaced, which means that every
other line gets drawn before the browser fills
in the missing lines. Progressive JPEGs serve a
similar function. |
