Graphics Zone - Compression Tips

Cash Traffic

Adobe Photoshop 6 and ImageReady Compression Tips

by BarryHilton, Adult NetSurprise

Getting to grips with Adobe Photoshop's 'Save for Web' function and file compression in ImageReady can be a difficult learning curve. Here we will explain some basic tips for you to get the most out of Photoshop's 'Save for Web' and ImageReady quickly and easily, while achieving great looking graphics at an acceptable file size.

Deciding whether to use a gif or jpg compression is easy in ImageReady. ImageReady (Not Available in Photoshop's 'Save for Web' Function) will automatically select the best compression option for you! This will start you off by selecting either gif or jpg compression for your image (if you wish you may select your own and not be restricted to ImageReady's suggestion).

By selecting the '2-Up' window, like on our examples below, you will be able to see exactly what your graphic will look like on the web compared to your starting graphic, along with its file size and download time on a 28k modem. As you make changes to the options this view will automatically update, so you can keep an eye on the quality of your image.

JPG Images

We'll take a look at our example... Firstly, ImageReady has selected for jpg compression as the image has many colors and graduations. There are four preset quality controls, Low, Medium, High and Maximum with 10, 30, 60 and 80 quality respectively.

Although there are many options to control your image quality to file size ratio, selecting High quality or 60 will give you a good optimum performance for web graphics.

GIF Images

Gif images are a little more complicated but in general you only need to concern yourself with a few options.

Generally, you will keep your image pallet set to Selective and at 256 colors and No Dither but with a few exceptions... To keep your file size down you may need to lower your Colors from 256 to 128, 64 or even 32 colors. If you have an image that uses lots of colors or graduated fills, selecting 'Diffusion' will improve the quality of your final image although it will add a little to the file size.

That wraps up our basic introduction into Adobe Photoshop's 'Save for Web' and ImageReady's compression tools. Just try experimenting a little and watch the preview in the '2-Up' window to see what effect you have had on your final graphic!

Barry Hilton