One of the most important aspects of a web site is the design as the design of a website can give the visitors strong impressions of a company. The graphics used in a site are obviously an important part of the design. However, graphics can be large and even with today’s high speed internet connections, bandwidth remain a concern. Luckily, Photoshop allows you optimize your images to get the smallest possible file size whilst maintaining good quality. So, lets have a look at how this can be done:

Step 1

Start with a picture that you would like to use on a web site. Now go to file - save for web. You will now see your image in the original tab and the file size will be listed below the preview window.

Step 2

Use the tabs to select how many previews you would like to see and use the settings on the right to change the options for a specific preview to see how the image is effected.

Step 3

If you click on the small arrow in the upper right of the image window you will see a preview list which allows you to make important decisions about you image. You can also see the images download rate.

Step 4

On the right hand side of the save for web box you can select a range of different file types such as gif, jpg, and png. If you choose gif or png from this list, you will be able to see a colour palette in the lower right of the screen. You can change the preset setting and the table with either add or subtract colour depending on the format chosen.

Step 5

The colour table also has another tab grouped with it called image size. This useful section shows you the original dimensions of the image as well as the quality settings. Try experimenting with these settings and click apply to see how it effects your image.

Step 6

You can find specific colour information for parts of an image by moving the mouse over an area. The colour information in red, green, blue, alpha and hex is displayed at the bottom of the window. You can also right click the mouse when the cursor is over the image to quickly view the images download rate and modify other properties such as size and color mode.

Step 7

Now you know your way around the save for web dialog box, experiment with saving an image for a web site using the options outlined here. You should be able to significantly decrease the size of your image, allowing them to be downloaded faster and use up less of your bandwidth. I hope you found this tutorial useful.