Image Resizing

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 images.

Image files should ideally be between 50 and 200 KB, and no wider than 800 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
4. 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 800px
    
3. File >Save for Web & Devices
   This will bring you to a dialog box with the selected tab Optimized which displays a perview of how the image will look when saved at the selected set.
    
4. In Preset, or the first dropdown selector, select the same format as the original image. Or select jpeg for photos or png-8 (or gif) for graphics.
    
5. 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.

Online Image Editing Tools

Web Resizer

http://www.webresizer.com/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 5M.

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

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

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.