Santa Clara University

Step by Step Guides 

Optimizing images for the Web

Guide to optimizing images before uploading to the Commonspot Image Gallery.

What is the difference between these two images?

not optimized	optimized

The difference is the size (in kilobytes) of the image file—something that doesn't show up in the display of the page, but can have an impact on how quickly the page displays.

The image on the left was not optimized before uploading to the Commonspot Image Gallery.  The file size for that image is 228Kb.  The image on the right was optimized, reducing the file size to 26Kb.

Why does this matter?

When a Web page is displayed, several files are transferred from the Web server to the Web browser.  Each of these files will contribute to the total download time for the page; a rule-of-thumb for estimating download time is 1 second for every 10Kb of file size, for a dial-up network connection (our baseline expectation; about 40% of site visitors will use dial-up connections). The HTML source of the page, style sheet, Javascript files, and image files that make up the Commonspot base template represent about 30 Kb of files.  Once you have added the subsite title image, navigation, and popup menu Javascript code, the file size can be 50-60 Kb.  When you add text, the file size doesn't increase all that much—this page includes quite a bit of text, but it's only adding 7 Kb to the total file size.  When you add images, the total file size of the page can rise dramatically.

Our recommendation is to optimize all Web graphics to be less than 30 Kb each.  And it is also recommended that you keep your audience in mind when constructing a page that includes many image files.  Unless you can rely on your audience having a broadband network connection, the delay in downloading the page may cause you to lose site visitors if the page takes more than 8 seconds to display.

For comparison, here's a table that shows file size and download times for pages at various stages of construction:

What does "optimize" mean?

Resizing Height and Width

Before an image is uploaded to Commonspot, the height and width dimensions of the image should be set appropriately.  (see image uploading guidelines for recommendations on dimensions) In the example above, the optimized image on the right was set to a 210-pixel width.  The image on the left was not resized in an image editing application before uploading the file. It's actual width is 337 pixels, but is modified in Commonspot to display at 210 pixels wide.  Modifying the image's display dimensions after uploading to Commonspot doesn't change the "real" dimensions or file size.

Applying Image Quality Settings

In an image editing application, you can also optimize the file size by setting the compression, typically referred to as "quality".  The optimized image uses a high quality setting, which is actually applying an 80% compression to the image file.  The non-optimized image is not compressed at all, but the visual difference in quality between 80% and 100% is not noticeable.  (You might notice that the larger, non-optimized image in the example above doesn't look quite as sharp as the optimized image.  That's because it's height/width display settings were changed in the Web page, not in an image editor, which can cause some distortion when the image is displayed.)

How do I optimize images?

Setting an image file's height, width, and quality settings requires an image editing application. Commonspot does not include an image editor; you will need to use an application such as Adobe Photoshop, Macromedia Fireworks, or another application that allows you to open an image file and modify the height, width, and quality settings.  Microsoft Photo Editor (in Microsoft Office Tools) can be used to modify dimensions, file type, and resolution, but if you have access to an application that is designed specifically for editing Web graphics, that would be a better choice.

In general, you can rely on the default settings for image properties in the Photoshop and Fireworks when saving an image for the Web.  In both cases, the applications' default settings will be suitable for most images. If you do not have Photoshop or Fireworks, you can use our online image sizing and optimization tool.

Here are the steps you would follow to optimize an image in Photoshop and Fireworks:

Photoshop

• From the File menu, open the image file that is to be optimized.
• From the Image menu, select Image Size...
• Apply the appropriate height/width settings and click OK
• From the File menu, select Save for Web...
• From the Optimized panel, set the image file format and quality settings
  File Format: Use JPEG for photographs, GIF for simple graphics such as logos or buttons
  Quality: The default setting of 80 (or maximum) for JPEG images is a good choice. You can switch to the 2-up or 4-up views to see how the display and file size changes at different quality settings
• Review the image file size after modifying the size and quality settings
  The image file size is displayed in the Save for Web display panel, just below the image
• Click OK to save the image file (use all lower-case file names; letters and numbers only - no punctuation)

Fireworks

• From the File menu, open the image file that is to be optimized.
• From the Modify menu, select Image Size...
• Apply the appropriate height/width settings and click OK
• From the File menu, select Export Preview...
• From the Preview panel, set the image file format and quality settings
  File Format: Use JPEG for photographs, GIF for simple graphics such as logos or buttons
• Quality: The default setting of 80 (or "better quality") for JPEG images is a good choice. You can modify the quality setting or choose "JPEG - smaller file" from the menu to see how the image display and file size change.
• If the preview checkbox is checked, you can view the image file size, above the image display panel.
• Click Export to save the image file (use all lower-case file names; letters and numbers only - no punctuation)

What if I've already uploaded un-optimized images to the Image Gallery?

You can replace an image currently in use with an optimized version by following these steps:

• Create an optimized version of the original image, following the directions above
• Browse to a Commonspot page that includes the original image, and switch to Author mode.
• Select the image and click the Edit Image Properties icon
• In the Image Properties panel, click Edit
• Browse to the location of the optimized file, and select Update Image (update image and descriptive data)
• Click OK to apply the update
• Submit the change for publication in Commonspot

Related links
Image Optimization Tool	If you don't have Photoshop or Fireworks, use this online tool to size and optimize your image for the Web.