Tips for Saving Web Artwork in Adobe CS5 Illustrator

By Jennifer Smith, Christopher Smith, Fred Gerantabee

When saving Adobe Creative Suite 5 (Adobe CS5) Illustrator artwork for the web, keep these points in mind — they make the whole process much easier for you and anyone who uses your illustrations:

  • Keep file sizes small. Don’t forget that if you’re saving illustrations for a web page, many other elements will also be on that page. Most visitors don’t wait more than ten seconds for a page to download before giving up and moving to another website.

    When you make your choices, keep an eye on the file size and the optimized artwork in the lower left corner of the preview window. A GIF should be around 10K on average, and a JPEG around 15K. (Though these rules aren’t written in stone, please don’t try to slap a 100K JPEG on a web page.)

    You can change the download time by clicking the panel menu in the upper right corner of the Save for Web & Devices dialog box and choosing Optimize to File Size. Then you can enter a final file size and have Illustrator create your settings in the Save for Web & Devices dialog box.

  • Preview the file before saving it. If you want 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 your artwork in the quality level and size in which it will appear.

    If no browser is selected, click and hold down the Preview in Default Browser button to choose Other and then browse to locate a browser you want to use for previewing. Close the browser to return to the Save for Web & Devices dialog box.

  • Change the size. Most people generally view their browser windows in an area measuring approximately 700 x 500 pixels. Depending on the screen resolution, this setting may cover the entire screen on a 14-inch monitor. Even viewers with 21-inch, high-resolution monitors often don’t want to have their entire screens covered by a browser window, however, so their areas still measure approximately 700 x 500 pixels.

    When choosing a size for your artwork, choose one with similar proportions. For example, if you want an illustration to occupy about a quarter of the browser window’s width, make your image about 175 pixels wide (700 / 4 = 175). If image is more than 500 pixels, whittle the height in size as well or else viewers have to scroll to see the whole image

    Use the Image Size tab to enter new sizes. As long as the Constrain Proportions check box is selected, both the height and width of the image change proportionally. Click the Apply button to change the size, but don’t close the Save for Web & Devices dialog box.

  • Finish the save. If you aren’t finished with the artwork but want to save your settings, hold down the Alt (Windows) or Option (Mac) key and click the Remember button. (When you aren’t holding down the Alt or Option key, the Remember button is the Done button.) When you’re finished, click the Save button and save your file in the appropriate location.