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 image size. If the image 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 Tools

Pixlr

http://apps.pixlr.com/express/

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

  1. Select "Browse" to upload a photo
  2. Under "Adjust" are options to crop or resize. Retain the aspect ratio and set the longest width to the desired length
  3. Select save and adjust the quality slider to get the file size a bit smaller; save to the desired folder on your computer

Pixlr Video Tutorial

Image Optimizer

http://www.imageoptimizer.net/Pages/Home.aspx

Quick and dirty resize and optimize:

  1. Go to the Optimize Now section located at the bottom right.
  2. Your Image > Browse the location of your image on your computer or
  3. Optimization > Select the Quality to High and set the Max width to 1200 or 1600.
  4. Click on the Optimize Now! button the next page will show the results click Download to your computer.

Cropping an image

Cropping an image cannot be done in the image module but has to be done through other software such as Pixlr or Photoshop. Refer to the video tutorials on how to crop.

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.