Home | Photoshop | Dreamweaver | Flash | Freehand |
03: HOW TO PREPARE GRAPHICS FOR THE WEB | Dreamweaver

Back to the Dreamweaver content page >>


Images on a website should be of as low a file size as possible.  Images which are high in terms of file size will take a long time to download to a user’s computer.  People do not like waiting for long periods while pages from a website download and will very often leave a site which makes them do so.

Photoshop has a feature called Save for Web which allows you to save images at a low file size.

Although it is possible to save in web friendly formats (jpeg, gif, png etc) using the File > Save menu, Save for Web appears to create smaller file sizes.

The first step in preparing an image for use on the web is to use Photoshop’s Image Size function (Image menu > Image Size)

1 Choose dimensions for your image which are appropriate to the layout of the page you are designing for. Set the drop down menus to Pixels. When designing for the web – or anything screen based – we think in terms of pixels as opposed to centimetres or inches.

2 Image resolution should always be set to 72 pixels/inch (Pixels per inch is also referred to as dots per inch (dpi.)) While you could set a higher resolution, a monitor screen will not display anything at more than 72dpi. A 300 dpi image would still display as 72dpi but would take a longer time to download because of its larger filesize.

You will notice that the Image Size menu also gives us information with regard to the current file size of the image – in this case 183k. This image would be too high a file size to make use of within a website as it would take too long to download.

 

Photoshop – Save for Web

Because the image is currently too large to be used within a web page we need to compress it.

This will reduce the file size at the expense of picture quality. However, compression techniques are sufficiently advanced that such loss of picture quality tends not to be too noticeable.

With the image open, choose File menu > Save for Web…

This will bring up the Save for Web options.

You will see a number of options/formats for saving your image.

1 It is generally best to use 4 Up as the selection option. In the four squares above you are shown different levels of compression. By having four options on screen at once it is easier to compare the effects of different compression settings.

2 Selecting Optimized will display your image in a selected format with settings Photoshop regards as being the best at balancing image quality with file size and download time.

3 Levels of compression can be set by clicking an image within its square and adjusting the options in the Settings menu on the right hand side.

You can choose from a number of different compression quality options using the drop down menu, but JPEG and GIF are probably the most useful. GIF images tend to be most effective where flat colours are involved, while JPEG images tend to be better at displaying gradations of colour.

However, it is ordinarily a case of experimenting with the different settings in order to achieve the best image quality at the lowest possible file size.

4 You will notice that at the lower left of each square are details describing how long your image will take to download using particular internet connection types – in this case, a 56k modem.

Clicking the arrow displays different connection types and when an option is selected, the time taken for your image to download will be displayed.

Most of today’s computers come with a 56k modem fitted as standard so it may be best to leave this on 56.6 Kbps most of the time. However, older computers have slower modems eg 28.8 Kbps so you should also look at the download time for this type of connection.

When you have selected appropriate levels of compression, click the Save button at the top right hand corner of the window. You may also choose Cancel to return to your original image, leaving it unaffected by any choices you made in the Save for Web window.

Back to the Dreamweaver content page >>