Web Design with HTML and CSS

78

Optimizing graphics for the web

Web Design with HTML and CSS Digital Classroom

The examples throughout this lesson use Adobe Photoshop, but there are other applications

you can use for cropping, scaling, saving, and retouching images. The following links contain

free software and resources that can help you do most tasks in this lesson:

GIMP

http://www.gimp.org

Adobe Photoshop (free trial version)

http://www.photoshop.com

Windows Live Photo Gallery

http://explore.live.com/windows-live-essentials

Picasa (photo-editing application from Google)

http://picasa.google.com/

Optimizing graphics for the web

Optimizing refers to the preparation of images for use on the web. The goal of optimization

is to reduce the fi le size of the image for faster downloading, without compromising the

quality of the image. Ultimately, you may have to reduce the quality of your images so they

are small enough to be downloaded and viewed quickly; in many cases, it is more important

to have a speedy download than to make the user wait for beautiful (but large) image fi les.

Before you start adjusting the fi le size of your images, you should have a general idea of how

you will use them, and how big they will be.

Resizing the image

Many web designers mistakenly believe that if an image has a resolution of 72 dpi (dots per

inch), it’s ready for the web. However, the total pixel dimensions of the image is much more

important.

This example uses Adobe Photoshop, and the image is ready to be resized. In your workfl ow,

all retouching, adjustments, and other editing must be completed before you begin

optimizing an image for the web.