Saving Photos for Web

Crop and optimize your photos before uploading them to your website for better-looking, faster-loading images.

Digital images have two different sizes, and it’s important to save a file with the correct settings before uploading it to your website.

Image Size / Dimensions

Example: 600 x 400 px 

Measured in pixels, this is how wide and tall an image appears at full size.

Crop an image to get it to the right dimensions.

File Size / Weight

Examples: 55 KB, 4.2 MB

Measured in bytes, this is how much data the image file contains. A photo straight from a camera is typically several megabytes (MB), too large for optimal web use.

Optimize an image to get it to the right size.

Why optimization matters

Large image files will slow down a page’s load time – especially if visitors are on a smartphone or have a slower connection – and many visitors won’t stick around for long.

Now that you know what you need to do, when and how will you do it?

When: Before you upload images to the media library. How: Photoshop or a free web-based tool. We advise against trying to crop photos in WordPress.

Using Photoshop to crop and optimize images

  1. If you’re preparing a featured image for a page, download our .psd template file, which outlines the safe area.
  2. Crop your image to the desired dimensions, in pixels, at a resolution of 72 dpi/ppi (dots per inch / pixels per inch), or 220 for retina. Use RGB, not CMYK.
  3. Save for Web. Depending on your version of Photoshop, this may be located under File > Save for Web, or File > Export > Save for Web (Legacy).*
  4. Adjust the save settings until the file size is as small as possible without looking blurry in the preview window. The JPEG Low preset is a good place to start.
  5.  Save the file with a short and descriptive file name (ex: gordon-fellow-lab.jpg).

*Fore more detailed help, please visit the Photoshop support site.

Using web-based tools to crop and optimize images

If you do not have Photoshop or another photo editing software, there are many free, web-based tools you can use to crop and optimize images.

For this tutorial, we will use BeFunky.com. 

Check the original's dimensions

  • Make sure your image meets minimum size requirement (e.g. 1440 x 550 for a featured image on a page).
  • If its dimensions are significantly larger, see if you can meet the recommended size (e.g. 2880 x 1100 for a featured image on a page).

Checking a digital photo’s dimensions (via the New York Times) »

Getting started

  • Go to befunky.com
  • Select Photo Editor from the menu at the top of the page.
  • Drag and drop your image onto the workspace, or Open it using the menu at the top of the page.

Prepare to crop

Select the area you wish to keep

  • Drag the corners to adjust what parts of the image you want included in the crop.
  • Click the checkmark button to apply.

Cropping featured images for pages

If you’re cropping a photo for the featured image space on a page, try to leave some wiggle room around the edges. Since the WashU Web Theme is responsive, a featured image’s edges may be “hidden” depending on a user’s screen size, i.e. desktop vs. smartphone.

Resize the image

Save the image

  • Click Save in the menu at the top. Select Computer.
    • File name should be short and descriptive (ex: gordon-fellow-lab.jpg)
    • Save as JPG.
    • Drag the slider to the highest quality possible up to 16 MB.

When you upload your image to your website’s Media library, WordPress will optimize it automatically, ensuring a quick load time.

Screen capture video showing how to use BeFunky.com to crop an image following the steps in this tutorial.