Optimization Fundamentals


In a nutshell, graphics optimization is the process of reducing the file size of your graphics so they can be downloaded faster when viewed on the web. Graphics optimization is an art where you attempt to balance image quality with file size.

Fireworks has a powerful set of optimization tools that can handle the entire optimization process or let you step in and tinker with settings. Before you begin optimizing graphics, it helps to have a basic understanding of what happens when a file is optimized.

Compression

Compression is the process of reducing the amount of information used to describe, or render, a digital file. Most types of computer files are fairly redundant in that they have the same information listed over and over again. Rather than list a piece of information repeatedly, a compressed file presents a redundant piece of information once and then refers back to it whenever it appears in the original file.

To better understand compression, look at the following sentence: "I left my heart in San Francisco." Pretend that sentence is a bitmap graphic that Fireworks will compress. The sentence has 7 words, made up of 27 characters and 6 spaces. If each character and space takes up one unit of memory, the total file size is 33 units. To get the file size down, a good place to start is to look for redundancies. To keep this simple, we'll look for redundancies in only the vowels:

  • The letter a appears 2 times.

  • The letter e appears 2 times.

  • The lowercase i appears 2 times.

  • The letter o appears once.

  • The letter u is not present.

After the first a appears, each consecutive a would be replaced with a number ("1" for example). The number would refer to the first a and would naturally begin to reduce the file size.

Now, take that line of thought to a real bitmap graphic such as a JPEG or GIF. To the computer, the image comprises X columns and Y rows of pixels and each pixel has a hexadecimal (six-digit) color value. An uncompressed image would describe the image one pixel at a time and specify the hexadecimal color for each pixel.

Lossless Compression

Lossless compression can be found in GIF, PNG, and TIFF file formats and ensures the most accurate representation of the image by not allowing any information to be discarded during the compression process. Lossless compression lists an entire group of the same-colored pixels as single unit, and by doing so, can reduce file size by accounting recurring patterns in a file. Because the patterns are treated as a single unit of data, the file can be reduced to a smaller form for transmission or storage and then put it back together when the file needs to be decompressed.

The term lossless indicates that the file size is reduced without any loss of image quality. If an image has only a few colors, such as a screenshot of a computer program or non-gradient "flat" artwork such as you might see in a comic illustration, lossless compression can dramatically reduce the file size. However, if the image is made up of hundreds of unique colors, as a color photograph is, lossless compression has a marginal effect on file size and can even produce a larger file than one that uses another type of compression.

Lossy Compression

Lossy compression takes a completely different approach to reducing file size. This type of compression simply eliminates "unnecessary" bits of information, tailoring the file so that it is smaller. Lossy compression is used for reducing the file size of bitmap pictures, such as photographs and complex drawings, which tend to be fairly bulky. Lossy compression can be found in the JPEG file format.

To see how this works, consider how your computer might compress a scanned photograph. A lossless compression program can't do much with this type of file. Although large parts of the picture may look the samethe lawn is green, for examplemost of the individual pixels are different. To make this picture smaller without compromising the resolution, the color value for certain pixels needs to be changed. If the picture had a lot of green grass, Fireworks picks a few colors of green that can be used for every color variation of a green pixel. Then, Fireworks rewrites the file so that the value for every grass pixel refers back to this information. If the compression scheme works well, you won't notice the change in terms of quality, but the file size will be significantly reduced.

Unfortunately, you can't get the original file back after it has been compressed. For this reason, you can't use this sort of compression for anything that needs to be reproduced exactly. In that case, you would need to use lossless compression.

Dithering

Dithering is most often used in GIFs to fake a color that is not in the file's color palette. Two palette colors from the file are alternated one pixel at a time. The hope is that your eye is tricked into seeing a third color. Dithered images tend to increase file size, the effect doesn't always work that well, and you end up with a grainy appearance to the image.

Tip

If you compress a GIF image by reducing the color depth, any gradients that you have created turn into bands of color that don't blend together anymore. To regain the appearance of the blend, try adjusting the dithering settings. Keep in mind, however, that by adding dithering to your image, you are also increasing the file size.




Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net