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
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 ResolutionsHero Images:
1440px by 800px // 9:5 aspect // < 1mb
Basic Pages only ( w/ left side nav) : 860px by 478px // 430 : 239 aspect // < 700kbHero 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
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.
- Enter the correct width/height for the image type you want (check image resolutions)
- 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
- 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
- Click on the top tab: 2-Up (In Figure -5 that is where the right arrow is pointing to)
- 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
- 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.
- 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.