Optimize images

home_outline/Site maintenance/Optimize images

Fast, easy image prep

Start here

Image processing

Image sizing, naming and alt-text best practices apply across all sites using the 42 Design System. This process assumes familiarity with Adobe Photoshop.

Two things to know about images:

  1. Never just upload a raw image that you downloaded from flickr. Always prep it first.
  2. Upload only one copy. WordPress will automatically create copies for multiple pre-defined use cases

Download images/Rename and store locally

Crop, size, optimize and rename all of your photos before you upload them to your WordPress site. 

Images can be downloaded from:

Download headshots for:

After downloading, rename the image file on your computer.

Naming convention:

  • Most images: [descriptive image keyword].jpg
  •  Portraits:  [lastname]-portrait.jpg

Crop the image (or not)

  • Aspect ratio should be 3:2 for all photos except portraits.
    • Photos downloaded from flickr will have a 3:2 ratio by default
  • Portraits are cropped square (1:1 aspect ratio)

If an image needs to be cropped, use ImageResizer to both crop and optimize.

If no cropping is needed, use Squoosh.app

Image Resizer

  1. Drag the file into ImageResizer
  2. Select the “Crop” tab on the left size of the editing panel
    1. Portraits: Select the 1:1 (Square) option from Aspect Ratio (ignore dimensions at this time)
    2. All other images: Select 3:2 (35mm film) option from Aspect Ratio (ignore dimensions at this time)
  3. Adjust the size of the grid by clicking and dragging the corner of the grid to ensure the person is properly centered in the frame!
  4. Select the Crop button to save this change.
  5. Navigate back to the “Resize” tab 
  6. Resize width and height
    1. Portraits:  350 px by 350px 
    2. All other images: Size can vary but width should never be more than 2200px
  7. Under “Target File Size” type 250kb. 
  8. Select “Resize Image →”button at the bottom
  9. Download the new image. 

Squoosh

  1. Open the Squoosh app
  2. Drag photo into Squoosh
  3. Select Resize toggle
  4. Adjust width and height
    • Portraits:  350 px by 350px 
    • All other images: Size can vary but width should never be more than 2200px
  5. Adjust quality bar so the file size is less than 250kb. 
  6. Select the Download button. 

Download the image from Squoosh and upload it to your site.

Tips

Compress in MozJPEG format for photos and in OmniPNG format for graphics.

Compression is a judgement call. These steps will help you get the image as small as possible while still preserving quality

  • Pull the quality slider way to the left, to 30 % or so. Note how bad the right side of the image looks.
  • Gradually work the quality slider back toward the high end until the difference between the left and right side of the image is negligible or nonexistent.
  • Pay particular attention to the resolution at the focal point of the image (wherever your eye is drawn)

Upload images to media library.

  • When uploading people (headshots) check the media library for their name first to make sure you’re not uploading a duplicate.
  • For each image, enter the following :
  2. Grab your images and make sure they have meaningful filenames
  3. If they are not at a 3:2 aspect ratio, crop them so that they are, with a max width of 2200px
  4. If downloading from C&M’s Flickr
    1. Aspect ratio will already be 3:2
    2. Download the size that’s about 2000px wide.
  5. Use Squoosh to optimize.
  6. Drag photo into Squoosh
  7. Compress in MozJPEG format
  8. Pull the quality slider way to the left, to 30 % or so. Note how bad the right side of the image looks.
  9. Gradually work the quality slider back toward the high end until the difference between the left and right side of the image is negligible or nonexistent.
  10. File size should be no more than a couple hundred Kb.
  11. Download the image from squoosh and upload it to your site.