Advertisement
5.
Reduce the colors in the image to see how that affects the illustration's quality and file size (if necessary,
choose Window > Show Optimize). Choose 32 from the Colours pop-up menu in the Optimize palette.
Note that the optimised file size drops significantly.
6.
Choose Web from the colour palette pop-up menu and Auto from the Colurs pop-up menu in the Opti-
mize palette. These settings results in a grainier image, and the file size has increased again.
7.
Click the Optimized Colours tab to see the number of colours in the Web palette (if necessary, choose
Window > Show Optimized Colours). Note that it lists 141 colours (ImageReady automatically eliminates
unnecessary colours from the 216 colours in the Web palette).
8.
Choose Adaptive from the colour palette pop-up menu and 32 from the Colours pop-up menu in the
Optimize palette. Again, the quality of the image on-screen isn't as good as when you used the Percep-
tual palette in Step 5.
9.
Change the colour palette back to a Perceptual palette with 32 colours.
10. Now check out potential for undesirable dither on an 8-bit display. Choose View > Browser Dither. Note
that a pattern appears in the background area around the image.
Note: You need to be working on a 16-bit or 24-bit display to preview browser dither.
11. Double-click the last colour (white) in the Optimized Colours palette. The value is 97%, not 100%, which
is causing the problem pattern. Close out of the colour picker. Then click the colour cube button at the
bottom of the Optimized Colours palette to shift the selected white to the closest Web-safe palette colour.
ImageReady makes it simple for you to combine a custom palette with Web-safe palette colours to get the
advantages of both.
12. Note that the pattern disappears. Then choose View > Browser Dither to uncheck it.
13. Now preview your illustration in a Web browser. First, choose Image > HTML Background to uncheck
it. Then choose File > Preview In > [your browser name] to view the illustration in place.
Note: Your browser name appears here only if you've set up a shortcut/alias to it. See the note that im-
mediately precedes this set of steps for instructions. If necessary, create this shortcut/alias, restart
ImageReady, and then come back to this step.
14. Note that ImageReady displays key image information in the browser, such as its height and width. You
can switch back to ImageReady and choose Edit > Copy HTML Code or File > Export > Save HTML to
save this code for use in an HTML editor.
Try out different compression settings to see
how they effect an illustration file.
7
Advertisement
