Preparing images for the web

Recommended image size dimensions

• Banner Image Gallery slider: 1060px x 480px.
• Card snippets: 400px x 300px.
• Faculty / Staff listing snippets: 105px x 130px.

Make the images accessible

Remember to add your alternative text or image description to your images so they are accessible. More about image accessibility is in this Help Center article.

If you need to, resize your image

First, you'll want an image that's around 1200px wide, especially for our Banner Image Gallery sliders. If your image is larger than that, use Preview (Mac) or Paint (Windows) to resize (not crop) down to a more workable size.

Either will let you resize by pixels, and should "constrain dimensions" so when you change the width, the height will change proportionately.

If your image is smaller than that, it can still work, but if it's smaller than 100px wide you might end up with an image on your website that doesn't look so good, as it'll attempt to enlarge and stretch the smaller image, pixelating/blurring your original image.

When you're ready to crop the photo (with Croppola)

This is one way you can use to crop the photo. You can also use Photoshop or something else, but Croppola is web tool and available to everyone.

1. Go to https://croppola.com/
2. Drag your image onto the page's "Drop your photo here..." drop zone.
3. Immediately you'll see the photo in the editor. On the right, switch to "Manual" instead of "Auto".
4. Set the width (suggestions above.)
5. In the image window, move the crop selector to where you would like the photo to be cropped. (This is where you may find here an image resize - above -  before cropping might be a good idea, if you can't get the selector to display an appropriate image.)
6. When you're happy with the image, click the "Download Crop" button.
7. The cropped image should download to your browser's download location.

Dimensions, DPI and file size.

• The actual dimensions of your image should be the same size as you would like displayed on your web page. Please do not upload huge files sizes (larger than 2000px or 1mb). This will drastically impact loading time for your web page.
• Typically your file shouldn’t be any bigger than 72 pixels per inch (PPI or DPI). Keeping the file size low like this will ensure quicker loading times, especially on mobile devices (used by over 50% of our audience.)

Extension Types

Your CMS website will accept a number of file types, but in order to have the most success uploading your files, please review the extension types and file names the CMS will accept.

• .pdf
• .jpg
• .png
• .tif
• .gif
• .doc
• .ppt
• .mp3

File Names

File names must use only letters, numbers, hyphens, or underscores. Symbols and spaces are not allowed. You may rename your file on the computer before uploading, or rename the file upon upload in order to fix this issue.

If you have trouble, we can sometimes help or we may send you to Ron Lambert and the Creative team who can help format your images for the web on an hourly rate.