Web-friendly Images

Overview

Digital photos these days can be many, many megapixels, resulting in a many megabyte file size. Barnard's web platform won't allow such large files to be uploaded for two reasons:

  1. On the web, images that are too large slow down the page load time.  Images should be resized and optimized so that they are able to load quickly. This is especially critical for users viewing the pages on mobile devices.
  2. Space on the server is not unlimited. 

For instructions on uploading and placing images in your page, see uploading media and files.

The maximum size for images is 256 MB but image files should ideally be between 60 and 500 KB - definitely no more than 1MB. The recommended width for use within the page is 1200-1600 pixels. Images to be used for the page banner should be at least 1200x200 pixels. 

There is a distinction between cropping and resizing an image, where:

  • Cropping is when you cut off part of an image to achieve a new size or shape
  • Resizing maintains the entire image and simply changes the size 

Saving Images for the Web

To make images web-friendly, we first resize them and then "optimize" them by saving them at settings that reduce the overall file size. There are several image editing tools available, including a couple of free online tools.

Tip: When saving, be sure to save your image with a new name in order to preserve the original image. We recommend using descriptive file names, especially if the original file name is something like dsc01536.jpg. This makes the files findable within the CMS.

Image Editing Software

Photoshop CC 

  1. Open Photoshop then go to: File >Open >Select image file
     
  2. Image > Image Size
    Set width to desired width; for the average image 1200px is sufficient. To future-proof images, make them 1600px wide. The height should adjust automatically using constrain proportions.
     
  3. File > Export as
    Find the appropriate directory to save to and rename if necessary;
    Format: select JPG for photos or PNG for graphics.

i. For the jpg format, when selecting the Quality option on the right hand side toolbar, be sure to look at the left hand side toolbar where it has the file size. If the file size is under 500 KB, the image quality can be left at 100%, but if it is any larger reduce the image Quality using the Quality selector so the size is closer to 500 KB.

If you are using an older version of Photoshop, instead of Export as, use Save for Web. Image Quality should be set to High to reduce pixellation.

Crop Video Tutorial

Resize Video Tutorial

Online Image Editing Tool

Pixlr

Pixlr is a super-easy to use web app with a full feature set for editing images.

 

Cropping an image

 

Cropping an image has to be done through other software such as Pixlr or Photoshop.

Most image fields will automatically resize and crop an image for display. The system first scales to the desired width, then crops if needed. If the automatic crop does not capture the important content, manual cropping is necessary. The suggested aspect ratio for a standard landscape image is 3:2. When cropping, focus on the aspect ratio, rather than the specific pixel size, of the display.