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:
- 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.
- 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.
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
- Open Photoshop then go to: File >Open >Select image file
- 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.
- 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.
Online Image Editing Tools
Pixlr is a super-easy to use web app with a full feature set for editing images.
- Select "Browse" to upload a photo
- Under "Adjust" are options to crop or resize. Retain the aspect ratio and set the longest width to the desired length
- Select save and adjust the quality slider to get the file size a bit smaller; save to the desired folder on your computer
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.
- Click on the Browse button and select the image located on your computer then click Upload Image.
- 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.
- 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.
Quick and dirty resize and optimize:
- Go to the Optimize Now section located at the bottom right.
- Your Image > Browse the location of your image on your computer or
- Optimization > Select the Quality to High and set the Max width to 1200 or 1600.
- Click on the Optimize Now! button the next page will show the results click Download to your computer.