Saving Images for the Web

Crop and optimize your photos before uploading to your site for crisper, faster-loading images.

To improve the user experience for your site visitors, it’s important to save image files with the correct settings before uploading them to your website

Why optimization matters

We are used to thinking the larger the image the better because, in print, large file sizes with high resolution are necessary for images to display crisply.

However, online, large images can cause pages to load slowly — especially on mobile devices or slower networks — and many visitors won’t stick around for long.

Digital images have two different sizes you should consider:

Image Size / Dimensions

Example: 600 x 400 px

Measured in pixels, size/dimensions is how wide and tall the image appears in full size. 

Crop an image to the right dimensions before uploading it.

See the image size cheat sheet »

File Size / Weight

Examples: 55 KB, 4.2 MB

Measured in bytes (usually megabytes [MB]) and also called “weight,” file size refers to how much data the image file contains. A photo straight from a camera is typically several MB, too large for optimal web use.

Optimization is the process of compressing an image to an appropriate size, without losing quality. 

Optimize an image to the proper weight before uploading it.

Pro tip

If you’re cropping a file to use as a featured image, try to leave wiggle room around the edges. Since the WashU Web Theme is responsive, a featured image’s edges may crop differently on different screens (for example, on a computer versus a mobile phone).

How to crop and optimize your images

There are many options for cropping and optimizing your images. We advise against editing photos in WordPress.

Using Photoshop

  1. If you’re preparing a featured image for a page, download our .psd template file, which outlines the safe area based on varying screen sizes.
  2. Open your image in Photoshop.
  3. Crop your image to the proper dimensions in pixels, at a resolution of 72 dpi/ppi (dots per inch/pixels per inch), or 220 for retina. Use RGB, not CMYK.
  4. 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).*
  5. 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.
  6.  Save the file with a short and descriptive file name (e.g., gordon-fellow-lab.jpg).

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

Using web-based tools

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. 

  1. Check the original’s dimensions.
    1. Make sure your image meets minimum size requirement. Some images will not show if they are too small.
    2. 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) »
  2. On befunky.com, select Photo Editor from the menu at the top of the page.
  3. Drag and drop your image onto the workspace, or Open it using the menu at the top of the page.
  4. Select the Crop tool from the left menu.
  5. Type in the width and height based on where you plan to insert the image on your site, adding 1 pixel to both the width and height (e.g., 2880 w x 1100 h becomes 2881 x 1101). Check the box to Lock aspect ratio.
  6. 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.
  7. Select Resize in the left menu.
  8. Again, type in the width and height based on where you plan to insert the image on your site adding 1 pixel to each dimension (e.g., 2880 w x 1100 h becomes 2881 x 1101). Check Lock aspect ratio. Click the checkmark button to apply.
  9. Click Save in the menu at the top. Select Computer.
    • File name should be short and descriptive (e.g., 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.