Core Computer

Preparing graphics for the Web

Using Image Ready

Skilled web design is often a fine balancing act, a trade off between appearance and functionality. Digital images can be compressed into smaller file sizes. For screen display and the web this is important.

There are a number of ways compression works and in class I have spoken about lossy and lossless compression. The key thing to remember about preparing graphics for the web, is that compressed optimized images mean faster image loading into a web browsers.

After you have prepared your graphic to a screen resolution of 72 ppi and resized your image to pixel dimensions suitable for a screen, switch from Photoshop to ImageReady.

You will find the ImageReady icon to do this at the base of the Photoshop toolbox.

Once the image is open in ImageReady click tab at the top of the document and choose 4 up option as this means you can try out different file formats and compression settings on an image, see what each looks like and decide on best setting for the quickest download.

Image optimization settings are set in the optimize palette on the right of the screen. If this palette is not on the screen go to Window > Optimize palette.

In the optimize palette you can try out different file formats and compression setting and in the case of Gif images the number of colours and dithering options, comparing each in the document window. Key information about file name, image size and download time at what modem speed is found at the base of the display window. Modem speed can be selected in the image information box at the bottom of the document window.

The Original display option allows you to see and compare the image with no optimization. Optimized display option allows you to see the image with the current optimization settings applied. 2-Up allows you to see two versions of the image with different settings side by side. 4-Up allows you to see four versions of the image each with different settings side-by-side.

Note: Remember when you're working in 2-Up or 4-Up view, you need to select a view before you apply optimization settings in the Optimize palette.

Select by clicking whichever view you want to change and a black frame around the image indicates that it is selected

When you have made your decision click the view you want to select. As demonstrated in class a black frame around the image indicates which view is selected. Go to File > Save optimized as and save the image in the file format and compression rate you think is best.

Saving for web from Illustrator or Photoshop

The other way of saving graphics for the web in both Illustrator and Photoshop is to simply use the save for web option

In both Illustrator and Photoshop in the file menu you will find the save for web option. This option in both programs will open an interface that is similar to Image Ready.

If you want to know more about Image optimization see this web tutorial Optimizing web graphics on the Webreference site. Another article is Tim Ziegler's article Optimizing Your Images

The CSA library also has Linda Weinman's Designing Web Graphics, borrow it and read it as inside there are tutorials and heaps of advice.

These notes are written for students who undertake the Core Computer course at School of Art, Australian National University. Students of the course should feel free to contact any member of staff with comments questions and general suggestions.

< Home Index > < Staff Contact > < Class groups > < Assessment >

< Basics Module > < Photoshop 1 Module> < Photoshop 2 Module> < Illustrator Module > <3D Module > < Web Design Module >

< Terms and Jargon > < Online Resources >