Optimize Images for the Web

Background Information

When developing images to be published on the Web, special care needs to be taken for both the look and performance of the image. To assist the look, ALWAYS crop and resize images. The crop will focus the visitor on the most important part of the image, and the size will make a big difference in how th image lays out on the page. To assist performance, carefully consider the appropriate file type and compression. The three major file types are PNG (highest quality and supports transparencies, but may be larger files), GIF (supports transparencies and animations, but is only good for images with very few colors and sharp edges), and JPEG (great for detailed images with lots of colors and has small file sizes, but does not support transparencies or animation). Out of the three, only JPEG will give you compression options--choosing a level of quality to balance with file size.

In this activity you will edit the image below to account for both look and performance. When you are finished, submit your new image to the shared folder. This assignment is due Wednesday, Sept 8.

sample image
(Joe Lencioni, shiftingpixel.com)

Set Up the Workspace

  1. Copy the image above.
  2. Open Photoshop.
  3. Go to File, New... and OK on the dialog box.
  4. Paste the image into the workspace.
  5. Go to File, Save... and save the image as a PSD file somewhere in your Web folder.

Crop and Resize

  1. Crop the image so that the excess background on the sides is trimmed down.
  2. (Always crop first. By cropping, you are focusing the visitor's attention to the most important part of the image.)
  3. Go to Image, Image Size...
  4. Make sure the box to "constrain proportion" or "maintain aspect ratio" is checked.
  5. Set the width to 200 pixels.
  6. (In a Web page, you have unlimited height to work with, but most monitors allow for about 1000 pixels in width. That's why you should resize based on width. The actual width you choose for your images will depend on what you are using them for in your Web page.)
  7. Click ok.
  8. Save.

File Type and Compression

  1. The original image was PNG because the artist wanted lossless quality.
  2. We are willing to sacrifice quality for a smaller file size, so we will choose JPEG.
  3. Go to File, Save for Web...
    4. shows where to select jpeg
  4. In the menu at the right, select JPEG
  5. Notice near the bottom there is information about the anticipated file size and download time.
  6. Use the slider to turn the quality all the way down.
  7. Notice that the file size is super small, but... Yuck! That does a bad job on that picture!
  8. Use the slider until you find a quality that will get you a file size of about 10KB.
  9. There. That's an acceptable quality, and it's a nice small file.
  10. Click OK.
  11. Submit the JPG file to the shared folder.