Optimizing Images

This is a guideline for saving images for use on the web. 

More than half of the binghamton.edu web traffic over the last 6 months was on mobile devices or tablets, where users often pay for data usage. 

Also, remember that ten 100 KB images use the same data as one 1 MB image. If you are inlining a series of images, consider whether there may be a more appropriate way to accomplish your goal.

Optimizing Photos in Photoshop

These directions are for optimizing photos in Photoshop. They assume you have already opened the image and cropped it to the appropriate size. The service http://tinyjpg.com is an alternative way if you are doing no other photo editing and the image is already scaled to size.

After finalizing the photo, you'll want to "Save it for the web". This option is at:

Photoshop 2015:
File -> Export -> Save for Web (legacy)

Photoshop (earlier versions):
File -> Save for Web

Select The Following Settings

  • Format: JPEG
  • Quality: 30
  • Check "Progressive"
  • Check "Convert to sRGB"
  • Under Image size , set width to 800 (height will automatically adjust)
  •   - for portrait images set height to 800 and width will auto-adjust

The screenshot below has the relevant areas underlined:

setting