How to Crop and Optimize Images

 
 

In a separate writeup, we’ve covered editorial guidelines for shooting, selecting, and curating images for a digital presentation or website. Now it’s time to walk through the mechanics of getting exactly the right image sliced and prepped, and the rationale for doing so. If you’re on a Mac, purchase Pixelmator on the App Store for $14.99. It’s a great piece of software and it should satisfy all of your editing needs. You don't have to purchase Photoshop for $700, really. All of the snapshots below are taken from Pixelmator, but the same principles apply to any photo editing software.


1. Sizes
For the purposes of Keynote presentations and rendering well on mobile devices and desktop screens, select and crop the same image at an aspect ratio of 16:9 and then at 1:1. When the image is used for a widescreen Keynote presentation — best way to present — it looks great. When the image appears on a person’s smartphone that has a 2x or 3x display, the image quality will remain high.

1920x1080 
1080x1080


2. Cropping
When cropping the photo, select the crop tool, then select “Custom”. For the dimensions, enter 1920 for the width and 1080 for the height, then indicate the area of the photo you want to crop.

bluprint-how-to-crop-and-optimize-images-crop-tool.jpg
 
bluprint-how-to-crop-and-optimize-images-1080x1080.jpg
bluprint-how-to-crop-and-optimize-images-1920x1080.jpg

3. Image Size
Once you’ve cropped the photo, go to Image > Image Size and change the image size to 1920 for the width and 1080 for the height. The resolution does not matter, since this is for digital, not print. Leave it at the default of 72 dpi, do not change to 0. 

bluprint-how-to-crop-and-optimize-images-image-size.jpg
 

4. Optimize for Export
Then go to File > Export and select JPG. The file size should be less than 500 KB, so we almost never want to save at 100%. Drop the quality down by increments of 10% until you get to a file size of less than 300 KB. This ensures for faster loading on desktop and mobile. If the image feels too degraded, then it’s okay to break this rule and save a file that is a bit larger than 300 KB. 

bluprint-how-to-crop-and-optimize-images-export-quality.jpg
 

5. File Naming Convention
File naming convention is extremely important for being able to find images and to be able to trace back to its original source. Always save all files with all lowercase letters, using a hyphen to separate each word. This is important from both an SEO perspective and standards perspective. You will need to save the file starting with the name of the source, then the ID, then the dimensions. You will always have three sizes for each image: original, landscape, and square.

shutterstock-257412790-5760x3840.jpg 
shutterstock-257412790-1920x1080.jpg 
shutterstock-257412790-1080x1080.jpg

If you are uploading the image to your website, naming the file correctly is incredibly important for SEO. Here is how you would name a file if posting to Planned Parenthood’s site:

planned-parenthood-seattle-health-center-5760x3840.jpg 
planned-parenthood-seattle-health-center-1920x1080.jpg 
planned-parenthood-seattle-health-center-1080x1080.jpg

If original photography was taken, use the name of the person who took the photos, followed by the timestamp for the ID, followed by dimensions. For example:

sebastian-odell-20150515183245-3264x2448.jpg 
sebastian-odell-20150515183245-1920x1080.jpg 
sebastian-odell-20150515183245-1080x1080.jpg

 
bluprint-team-profile-munawar-ahmed.jpg
Munawar Ahmed is a user experience consultant based in New York City. She works on S, M, L, and XL projects, from indie startups to mega-corps. She's friendly, most days. Get in touch.