Introduction

Images are a great enhancement to a website, but they can also add drastically to the download time of your site.  Preparing images correctly can reduce the file size of the image and reduce the download time. This tutorial offers a few ways to prepare your image for the Web.

Reduce the size of the graphic

Change the Resolution 

Many digital cameras and scanners by default create default create digital images at 144 or above resolution.  This is a good resolution for printing the image, but the computer screen will only display between 72-75.  By reducing the resolution from 144 to 72 the image has been reduced in size by half and will not affect how it is viewed on the screen. 

Change the Size of the Picture

Never use the sizing handles in FrontPage to make an image smaller.  FrontPage keeps all the pixels and just puts them closer together.  That means an 8 by 10 picture is reduced to a 5 by 7 in FrontPage the user has to wait while an 8 by 10 image is downloaded and  will only get to see a 5 by 7.  If the image is resized in an image program, both the file size and the image size will be reduced.

Changing Resolution and Size in PhotoShop

Select the Image menu and Image Size option to view the Image Size dialogue box.  Change the width and height in either the pixels or the inches view.  Notice that in the lower left corner there is a constrain proportion check box.  If the box is checked and either the height or width is changed, the other will be automatically changed to the proportional amount.  To change the resolution simply change the the number in the resolution box.

 

Crop the Picture

Cropping the picture in an imaging program will reduce the file size.   It can also enhance your picture by eliminating the distracting features and focusing attention on the significant elements of the image.  The crop tool in PhotoShop 5.5 or below is located with the marquee tools on the tool palette.  In PhotoShop 6 the crop tool is by itself on the tool palette.  To crop select the Crop tool and click and drag a box around the section of the image to be cropped.  The selection area can be adjusted using the sizing handles.  When the selection is satisfactory double click inside of the cropped area to crop the image.

Be aware of Image Formats

Image Formats

Most images on the Internet are either JPEG of GIF.  The simple rule of thumb is that a GIF is used for a drawing and a JPEG for a picture.  The image should be converted to one of these two formats to be used on the web.  Some scanners, like the one in CETLA saves the images in a TIFF format.  A TIFF file is much larger than a JPEG file and will need to be converted to use on the internet.

JPEG Compression

The JPEG file can be compressed or reduced to different levels.  The more the file is compressed the lower the file size, and the more it is compressed the less information is saved about the image.  The higher the compression generally the lower the quality of the image. Compression effects each image differently, so experiment with the compression rates. 

Changing a file format in PhotoShop

To change a file format in PhotoShop, the image will need to be resaved.  To do this select the Save a Copy option from the File menu.  In the Save a Copy dialogue box use the Save as drop down box to select your image format.  If JPEG is selected, a dialogue box will appear to choose the compression rate. Move the slider bar over to select the rate of compression.

Consider a Web Gallery

Often a website is used to display many images.  Consider creating a gallery on the first page with smaller (thumbnails) of the pictures.  The thumbnail can then be used as a link to the larger picture.  This allows the main page to download quickly.  In PhotoShop 5.5 and above you can create a web gallery using the Automate option on the File menu.  A good web gallery tutorial can be found on the Adobe website.