Advanced Search

The BoxedArt Guide to Using Website Templates

Optimizing Website Template File Size when Saving for Web

When saving graphics to be placed in your web pages, it is recommended that you use Photoshop's Save for Web option. This will ensure the best quality and smallest download time for each of your ../images.

Save individual graphics from your Photoshop document (.psd) as either .jpg or .gif. These are the two web-friendly image formats that browsers will display. (The .png image format is not recommended as the kilobyte size for .png ../images is inordinately large compared to jpg and gif and can slow the download speed of your pages once they are online.)

When replacing ../images in your template's web page that you have modified it is recommended that you use the same filename and file format as the original image that came with your template. If your modified image is saved with exactly the same filename/file format (and in the same folder) you will not have to make any changes to the html source code - your new image will automatically replace the original in the web page.

As a general rule, .jpgs are best for photos or any graphics that have soft gradients or drop-shadows. The .gif format is best for ../images that have text or solid colors or that require transparent backgrounds.

You access Save for Web from Photoshop's (top menu) File dropdown list:


Click Save for Web and in the window that opens, click the Optimized tab at the upper left:

save for web

In the right column you will see the file format choices. Fig.1 below shows options for saving as a .jpg

Save for web

Press the arrow next to Quality and move the slider to adjust the quality of your image - the higher the number, the better the quality (but the larger the file size).

In the lower left of the window you will see a display of the kilobyte size and estimated download time for the image as you adjust the slider:


Fig. 2 below shows options for saving as a .gif

Save for web

Adjusting the number in the Colors field (32 colors pictured here) to heighten or diminish the quality of your .gif image.

As you adjust the number of colors to decide what is the best choice, the lower left will display the kilobyte size:


You may save individual slices from your .psd here as well. Choose the slice select tool from the toolbar at the left of the Save For Web window and click on a slice. Hold down the Shift key and click on other slices in the document to save multiple slices at once. Choose a file format and a quality/colors setting for each one.


Then, click Save at the upper right. The "Save Optimized As" window will open. In its upper portion, choose the folder in which to place your graphic(s).

In the lower portion (Fig. 4 below), specify ../images Only (no html code written), Custom settings, and Selected Slices.


Click the Save button and your image(s) are saved and ready to go into your web pages.

See also:
Using Guidelines as an Alternative to Slice Lines
Using Slice Lines or Producing New Slice Lines
Appropriate Naming Conventions for Saving Your Sliced Template

Back to Design Tutorial