Reducing Graphic Size to Reduce Loading Time
By twinkiemckay@uswest.netIf you've ever had to sit and wait more than 30 seconds for a website's main page and its graphics to load, then it's not their server that's a problem. More than likely you have encountered a site whose author has used poor graphics optimization. Yes, there IS such a thing as too many graphics. However, even if a site has 4 or 5 images on one page, they should not cause a web user's browser to lumber along, provided they have been optimized for better loading speed! In this article, I will touch briefly on how to fix this problem by addressing both the graphic's color bit reduction and the file compression.
Now everyone knows that graphics are sometimes unnecessary if you are just trying to get a message across, but on the other hand they can be extrememly valuable if you are promoting a product which your site's visitors will want to look at before buying.
So now what? You don't have to skimp on great graphics, you just have to find a way to skimp on your their file size, without sacrificing quality. This is not that hard to do, regardless of whether you are working with .GIF, .TIFF, or .JPG graphic file formats. Hopefully, you already know that a .GIF is the best format for illustrated graphics such as background tiles and banner ad graphics, and .JPG is the preferred format for photographs or scanned images.
Let's Get Started
The science of it all starts here. Let me tell you that the best way to reduce graphic file size is by reduction of bit depth, resolution, and obviously, dimension. An example of the formula to this is:
Bit Depth = Color Depth
Number of colors = 2^bit depth
Where bit depth = number of bits/pixel
* An image with a depth of 8 can have up to 256 colors (2^8=256)
Color Bit Depth Reduction
When using color palette indexed formats, such as GIF and PNG, the lower the bit depth, the smaller the file:
(640 x 480 pixels x 24 bits per pixel) or 8 bits per byte = 921,600 bytes or raw file size = (total pixels x bit depth) for 8 bits per byte
640x480 24-bit color images will need about 900K of disk space, which is way too much for even someone using DSL to count on for loading speed.
Even though alot of Web users support 16-bit or higher color depths, older Macintosh and Windows systems can display only 256 of these colors at the same time. People that try to load your colorful but cumbersome masterpiece on these 8-bit machines will see your subtle color gradations as dithering chunks of color. The best way to avoid these problems is to do all your work in a 256-color palette. At 256 colors the same huge graphic is now a 300 kilobyte TIFF, a factor of 1/3 (8/24 equals 1/3). When using your graphics programs, try to always check the color adjustment settings to allow for the above magic to happen.
What Tools Can I Use To Reduce Color Bit Depth?
Most graphics programs (Adobe Illustrator, Adobe Photoshop, Jasc Paintshop Pro, Macromedia Fireworks, etc.) will usually include tools that can help you with the color palettes, and also other tools which provide an easy way to optimize your graphic's file size and distribute the aesthetics throughout, without losing the quality of the graphic, and of course without having to do the math yourself!
What Else is a Factor?
Compression of the actual file is sometimes also necessary. Compression algorithms will re-encode your graphic file's data into a smaller, more compact chunk of the same data. This usually works best with .GIFs and .JPG's
What Tools Can I Use To Do This?
You can look to Imageready, Imagevice, Debabelizer and HVS Color GIF which are geared specifically to reducing file size by dithering color edges and reducing file size by compression.