Compressing Images

How to prepare images for multiple screen sizes and resolutions

Once you have your image cropped to the proper pixel dimensions and aspect ratio, follow these steps to compress and optimize your images.

STEP 1: Save image from Photoshop

  1. For CS5 & CS6 - Go to File > Save for Web.
  2. For CC - Go to File > Export... > Save for Web (Legacy)
  3. Make sure your file is properly named with no spaces, capitalizations, or special characters. You may separate words with a hyphen, but don't use an underscore.
  4. For format, select JPEG.
The "Optimize File" menu in Photoshop.

STEP 2: Target File Size

  1. Using the chart on the overview page, determine your target file size.
  2. In the "Save for Web" dialog, use the "Optimize Menu" to input file size.
  3. Enter the "Desired file size."
  4. Use the "2-Up" viewer to review the results.

STEP 3: Optimize with Kraken.io

Kraken is a free online service that compresses images for the web.

  1. Go to Kraken.io.
  2. Upload your image for compression.
  3. Download the new compressed version.

STEP 4: Upload to the WCMS

If you're working within our content management system:

  1. Go to the proper subfolder in the images folder.
  2. Select NEW > DEFAULT > FILE.
  3. Upload your file.
  4. Enter the alt text, which is attached to the image file. Select EDIT > METADATA and enter the alt text in the SUMMARY field. Learn how to write effective alt text in our accessibility guide.