Saving Photos for Web

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) | Ex: 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) | Ex: 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.

Cropping and optimizing photos can be done using a single photo editing tool, such as Photoshop or Pixlr. Some free tools, such as PicMonkey, are better for cropping, while others, like WebResizer, make optimizing easier. We recommend against editing photos in WordPress.



Cropping images

Cropping refers to adjusting the width and height, in pixels, of your image.

To ensure that sites across the School of Medicine have a similar look, we have established standard sizes for images depending on where on the site you use them. For example, the banner images at the top of main navigation pages should all be the same size.

View standard image sizes »

Optimizing/compressing images

Optimization is the process of saving an image at a size appropriate for the medium where it will be displayed. Whereas print pieces require a larger file size with a high resolution so images display crisply, websites require much smaller images. Large image files will slow down a page’s load time – especially if visitors are on mobile or have a slower connection – and many visitors won’t stick around for long.

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’ll use PicMonkey.com and WebResizer.com.

  • PicMonkey works best for cropping and adjusting an image itself (i.e. lightening, recoloring). Depending on the image’s original size, you may be able to optimize it in PicMonkey, too.
  • WebResizer is great for optimizing images for web.

Cropping with PicMonkey

  1. Select Edit from the menu at the top of the page
  2. Upload your image
  3. Make desired adjustments using the tools in the left navigation (i.e. auto adjust, rotate, exposure)
  4. Select the crop tool. Check the box to “Scale photo” then enter the width x height based on where you plan to insert the image on your site. Drag the corners to adjust what parts of the image you want included in the crop. Click Apply.
  5. Click Save in the menu at the top
    • File name should be short and descriptive (ex: gordon-fellow-lab.jpg)
    • Save as png, jpg, or gif
    • Choose the lowest Quality possible
      • If this produces a file size < 100 KB, shown at the bottom of the page, then your photo is optimal for web and good to upload to your site!
      • If the photo’s new file size is still > 100 KB, you’ll need to use another tool to optimize it for web

Optimizing with WebResizer

This tutorial assumes that your photo is already cropped to the proper dimensions.

  1. Choose file > Upload Image
  2. In the grey box, set “New Size” to the desired width and “Sharpen” to 0
  3. Click “Apply Changes”
    • If the size of the optimized image on the left is < 100 KB, you’re good to go! Download the image.
    • If the size of the image on the left is > 100 KB, lower the “Image quality” by 5-10 points and click “Apply Changes.” Repeat until file size is < 100 KB, then download the image.

Using Photoshop to crop and optimize images

  1. Crop your image to the desired dimensions, in pixels, at a resolution of 72 dpi/ppi (dots per inch / pixels per inch). Use RGB, not CMYK.
  2. 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).
  3. Save as png, jpg, or gif. Adjust the save settings until the file size is < 100 KB.
  4.  File name should be short and descriptive (ex: gordon-fellow-lab.jpg)