Images for Web - Optimizing Images for WWW

Using Photoshop for Image Optimization

The following instructions should work on any version of Photoshop you use.

1. Open the photo to be optimized. (On the Top Menu Bar click File -> Open)

2. In the Top Menu Bar, click Image -> Image Size. (This window will appear)
Figure 1 - Top Menu Bar Click Image -> Image Size
Figure 1 - Top Menu Bar Click Image -> Image Size Figure 1 - Top Menu Bar Click Image -> Image Size

3. In the Resolution box, change the value to 72, make sure the textbox to the right of reads "Pixels/Inch" and click ok. Use the width/height for correct image type below.

Image Resolutions

Hero Images:

1440px by 800px // 9:5 aspect // < 1mb

Basic Pages only ( w/ left side nav) : 860px by 478px // 430 : 239 aspect // < 700kb

Hero Video:

Custom frame size: 1440px by 800px. // < 30 seconds // no sound // < 3mb

Basic Pages only ( w/ left side nav) : 860px by 478px // 430 : 239 aspect // < 700kb

Note: You can use a different standard frame sized video if needed, for example 1280 by 720 but be advised the bottom 20% (estimate) of the video will not be visible at most screen sizes.

Checkerboard: 560px by 440px // 14:11 aspect // < 500kb

Horizontal Listing: 360px by 200px // 9:5 aspect // < 200kb

Related Content: 360px by 200px // 9:5 aspect // < 200kb

Faculty/ Staff Headshots: 460px by 460px // 1:1 aspect ratio // < 500kb

Events: 560px by 350px // 8:5 aspect // < 500kb

Facilities: 560px by 350px // 8:5 aspect // < 500kb

News: 560px by 350px // 8:5 aspect // < 500kb

Student Stories:

Story Image: 824px by 840px // 103 : 105 aspect // < 1mb

Profile Image: 360px by 450px // 4 : 5 aspect // <500kb

If the image cannot be set to the exact height and width, you may need to consider cropping to get the correct aspect ratio

  • Click the Crop tool. We need to first make sure the image is the correct aspect ratio we need.
    click the crop tool
  • Enter the correct width/height for the image type you want (check image resolutions)
    Enter the correct width/height
  • Adjust/move the crop area to match how you want the image to appear.
  • Hit ‘Enter’ to apply the crop.
  • In the Top Menu Bar, click Image -> Image Size.
    Double check that the image size is correct. If it’s not you should be able to adjust the height/width and it will update to the exact measurements needed.

4. Next we must sharpen the image, On the Top Menu Bar click Filter->Sharpen->Unsharp Mask
(This window will appear)
Figure 2 - The Unsharp Mask Window
Figure 2 - The Unsharp Mask Window

  • Within the Unsharp Mask Window click the Preview checkbox if it’s not already checked to see the image preview.
  • Set the Amount: To usually 15% to 40% (too much Unsharp Mask can make the photo look poor)
  • Set the Radius: 1.0 Pixels
  • Threshold: 0 levels
  • Look over the preview image and make sure it doesn’t look poor
  • Click OK

Saving the image for the web

After sharpening the image we must check to see the image is optimized for the web.

5. In Photoshop:

  • On the Top Menu Bar click File -> Save for Web (This Window will appear)
  • Note: if you do not see “Save for Web” option, check File -> Export -> Save for Web (legacy)
Figure 3- If you don't choose jpeg from the drop down menu you won't see the quality options
Figure 3- If you don't choose jpeg from the drop down menu you won't see the quality options
  1. Click on the top tab: 2-Up (In Figure -5 that is where the right arrow is pointing to)
  2. In the upper right corner where the green arrow is pointing to, click the drop down menu and select “jpeg” from the menu. (IMPORTANT: If you don’t choose jpeq from the drop down menu you won’t see the quality options.) After selecting jpeg the options in the upper right corner change. (The options will change to the options in figure 6).
    Figure 4 - The Jpeg options in Adobe CS6
    Figure 4 - The Jpeg options in Adobe CS6
  3. Using the Jpeg options located in figure 6, compare the medium to the high for quality for file size.
    • You’ll see the results at the bottom of the images, the image to the left is the original file and the one to the right is the image after optimization (the resulting new file size for the optimized image is shown where the red arrow is pointing in figure 6.
    • File size could be anywhere from 20k to 60k (Although it is encouraged, that the small the file size, the faster the loading time)
    • If you need something in between medium (30) and high(60), try putting 45 in the Quality space.
  4. After the picture has been optimized, click on save.
    • Save in: browse to where you want to save the image
    • Filename: can have no spaces ex: Image.jpg (Good) The Image.jpg (Bad)
    • Save as Type: Images Only (*.jpg)
    • Settings: Default Settings
    • Click on save.