Image Resizing


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.

Image files should ideally be between 60 and 220 KB. The recommended width for use within the page is 1000-1200 pixels. Images to be used for the page banner should be 1200x200 pixels.

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

Microsoft Office Picture Manager

  1. Start >All Programs >Microsoft Office >Microsoft Office Tools >Microsoft Office Picture Manager
  2. File > Open the image or
    Right click on the image and Open with>Microsoft Office Picture Manager
  3. Picture >Resize
    In the panel on the right, check the button for percentage of original, enter a value, check the size setting summary for the new size, when it is about 800px wide, go to:
  4. Menu Option: Picture>Compress Picture.
    The settings will appear on the right side panel. Compress for: > Web pages
    Estimated total size  >OK
  5. File > “Save As”

Photoshop or Photoshop Elements

  1. Open Photoshop then go to: File >Open >Select image file
  2. Image >Image Resize
    make sure "constrain proportions" is checked and set width to desired width; for the average image 1200px is sufficient
  3. File >Save as
    Find the appropriate directory to save to and rename if necessary;
    Format: select JPEG for photos or png for graphics.

i. For the jpeg format, the Quality  selector lets you have more control over the quality of the image. Most of the time High, or 60 on the numeric slider, is sufficient. Adjust it higher if the photo looks "pixelly". While you are making adjustments you can see the file size and estimated download speed of the image at the lower left corner of the image.

ii. For the png format, Compression should be "smallest/slow" and Interlaced should be "none".


Online Image Editing Tools


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

Web Resizer

This handy online tool offers the option to crop your image as well as resizing it.

The maximum image size to upload for Web Resizer is 10M.

  1. Click on the Browse button and select the image located on your computer then click Upload Image.
  2. You will see the optimized and original image side by side. It states the size, width, and height.  If those look acceptable, click on download this image.
  3. Save File or Open the file in a program.  The saved file will have _opt at the end of the original file name (if your file was named Image1 the new file will be Image1_opt)

There are other options for either cropping or specifying an image size on Web Resizer to adjust the dimension of the image.

Image Optimizer

  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 800.
  4. Click on the Optimize Now! button the next page will show the results click Download to your computer.