Illustrator Save Artwork for Web Tips

Illustrator CS4DPD Blitz Reference

When saving illustrations for the Web, keep the following tips in mind, which make the whole process much easier to use the illustrations:

• Keep the file size small
• Don’t forget that when saving illustrations for a Web page, many other elements will be on that page
• Try to conserve on file size to make downloading the page quicker for viewers with dial-up connections
• Most visitors won’t wait more than ten seconds for a page to download before giving up and moving on to another Web site
• When making choices, keep an eye on the file size and the optimized artwork in the lower-left corner of the preview window

On average, a GIF should be around 10K and a JPEG around 15K
These rules aren’t written in stone, but please don’t try to put a
100K JPEG on a Web page!

Can change the download time by selecting the panel menu in the upper-right corner of the Save for Web & Devices dialog box and choosing Optimize to File Size to input a final file size and have Illustrator create the settings in the Save for Web & Devices dialog box

Preview the file before saving it

• To see the artwork in a Web browser before saving it, click the Preview in Default Browser button at the bottom of the Save for Web & Devices dialog box
• The browser of choice appears with the artwork in the quality and size in which it will appear
• When no browser is selected, click and hold down the Preview in
• Default Browser button to choose Other and then browse to locate a browser that to use for previewing
• Close the browser to return to the Save for Web & Devices dialog box

Change the size

• Many misconceptions abound about size when it comes to Web artwork
• Generally, most people view their browser windows in an area approximately 700 x 500 pixels
• Depending on the screen resolution, this may cover the entire screen on a 14-inch monitor, but even viewers with a 21-inch monitor with a high resolution often don’t want to have their entire screen covered with a browser’s window
• So they still have a browser window area of around 700 x 500 pixels
• When choosing a size for the artwork, use proportions of this amount to help
• For example: When wanting an illustration to take up about a quarter of the browser window’s width, make the image about 175 pixels wide (700÷4 = 175)
• By noticing that the height of the image is over 500 pixels, whittle the height down in size as well, or viewers will have to scroll to see the whole image (and it will probably take too long to download!)

Use the Image Size tab to input new sizes

• As long as the Constrain Proportions check box is selected, both the height and width of the image will be changed proportionally
• Click the Apply button to change the size but don’t close the Save for Web & Devices dialog box
• Finish the save

When not finished with the artwork but want to save the settings, hold down the Alt and click the Remember button (When not holding down the Alt key, the Remember button is the Done button.)

• When finished, click the Save button and save the file in the appropriate location