|
Graphic Compression Info |
Optimization
Optimization of Web Graphics
Graphic quality and file size; there was a time when the two lived in relative peace. Not so long ago, when there was not a World Wide Web, people used digital images for applications and printed documents. Image size was a concern, but it wasn’t a major issue. Graphic quality and file size didn’t necessarily like each other, but for the most part they got along. Then along came the Web allowing anyone with modem access to a world of information and entertainment. Everyone loved it and soon it was in almost every home. Sadly this innovation, fantastic as it was, inadvertently drove a wedge between quality and file size, dividing them bitterly. Now graphic files had to be small enough to be efficiently downloaded by the masses and their less optimal Internet connection speeds. While image compression techniques exist that allow you the ability to reduce the file size of your graphics to fractions of their original bulk, the more you compress your image, the lower the resulting image quality. One of your jobs as a web designer is act as a mediator and strike the best balance between the two rivals. You should strive to create graphics small enough to be efficiently downloaded by visitors, while at the same time avoiding the blurry and generally unattractive appearance of over-compressed graphics.
The first step to minimizing the size of your graphics is choosing the
correct file format for the job. If the image is photographic or it consists largely of many gradient colors, the JPEG format is usually best. However, if the image has a relatively low number of colors and the colors are arranged in blocks, the GIF format with likely be your best bet. If you’re unsure which format will render the smallest file size, you can always save the image as both and compare. Observe the following example.
Example 1: A Photographic Image
JPEG
file size: 22 kb |
GIF (256 Colors)
file size: 47 kb |
--Example 1 |
As you can see, both images look nearly identical, but the JPEG is more than 100% smaller than the GIF. If you look closely, you'll also notice that the GIF isn't as smooth as its JPEG counterpart. This graininess results from the GIF's 8-bit color limitation. The image in JPEG form utilizes thousands of colors to produce the smooth transition gradients of a photograph. When the image is saved as a GIF, all that color information must be condensed down to no more than 256 colors. A GIF achieves this by placing various shades together to approximate colors through a process called 'dithering.' The dithered GIF is comprised of 256 colors or less but gives the visual impression of an image with many more. Dithering will increase the size of the GIF, but it can result in a more attractive image. The size of a GIF is very much dependant on the number of colors in the image. As the colors in the image decrease, the space needed to store the color pallete also decreases. If your image only has 4 colors, the GIF pallete can be reduced to 2 bits (4 colors), dramatically decreasing the file size. JPEG won't always be the best choice even for photographic images. Dithering combined with color reduction can be a good way to get file size down while maintaining acceptable image quality. Observe the following example.
Example 2: Triumph of the GIF
JPEG
file size: 18 kb |
GIF (256 Colors) Dithered
file size: 18.2 kb |
GIF (100 Color)
file size: 13.2 kb |
GIF (100 Colors) Dithered
file size: 13.5 kb |
GIF (20 Colors)
file size: 6.9 kb |
GIF (20 Colors) Dithered
file size: 7.3 kb |
--Example 2 |
In the above example the 20 color GIF looks almost identical to the
JPEG and is over 10 kilobytes smaller in size. In this particular case
dithering doesn't yield much of an aesthetic advantage, but notice how the white colors near the bottom seem to transition more smoothly. The effects of dithering will vary from image to image. Now let's look at an image with large blocks of single colors where the GIF is more obviously the best format choice.
Example 3: The GIF Shines Once Again
JPEG
file size: 8 kb |
GIF
file size: 2 kb |
--Example 3 |
In this case the GIF is four times smaller than the JPEG. In addition, if you look closely, you’ll notice that while the colors of the GIF are sharp and defined, the colors of the JPEG blend together near the edges and are not absolutely constant in the large blocks. This is a side effect of the JPEG’s ‘lossy’ compression method. It throws out data to make the image size smaller and in doing so blurs images, adds blocks of unsightly color, and generally degrades the overall quality of the image. Most image editors will allow you the ability to choose the level of JPEG compression you want for your graphic. Different programs use different methods of presenting compression level options to the user. PhotoShop uses a scale from one to twelve; one being the greatest level of compression or lowest image quality, twelve being the least compression or highest image quality. For example, below are two versions of the same photograph. The first uses a medium compression of seven and the second uses a high compression of one.
Example 4: JPEG Compression Visualized
JPEG Compression: 7
file size: 27 kb |
JPEG Compression: 1
file size: 14 kb |
--Example 4 |
Here we see the struggle between file size and image quality
perfectly embodied. To the left you see a moderately sized image of 27 kilobytes. Its quality is such that despite compression, the eye sees very little if any degradation. To the right you see the same image heavily compressed. It has the alluring file size of 14 kilobytes, half the file size of the image to the left. Essentially, the image to the right will download twice as fast as the image to the left. Apply that high compression to all the images on your site and you have nearly halved the amount of time it takes the average user to access your page. This is a serious advantage in a world where lengthy download time can be the largest factor in the dissatisfaction of a visitor. But is the decreased download time worth the blurry, boxy, shell of an image presented to the right? It is your choice to make. Your best bet will usually be to find some happy medium where the degradation in the quality of your image is acceptable and its file size isn’t excessive.
There are several software packages that can make optimization of graphics for the web a little easier. Image Ready from Adobe Systems and Fireworks from Macromedia are both excellent image optimization packages. Image Ready is actually packaged with PhotoShop and above, offering a complete solution for creating and optimizing web graphics. Both software companies offer evaluation copies of their software for download at their respective web sites. There are also web based solutions offering image optimization. For a small fee, sites like NetMechanic.com will spider a web page and display all present images with various compression options so that you can visually choose the file size/image quality combination that makes the most sense.
| 
