Resizing Images for the Web

What size photo do I need?

What size you need depends on where you are putting the photo. If you are adding the photo to a WYSIWYG, it can be whatever size you want as long as it is in proportion to the content around it. For example, if you are adding an inline image to a block of text and want the text to wrap around it, you will want the photo to be small enough to not distract or overpower the surrounding text. 

If you are uploading an image using the 'browse' button to a section in your website, images are required to meet a minimum size to display correctly. When you are uploading the photo, there will be helper text letting you know the minimum size for that particular section. This does not mean that you need to resize a larger photo down to this size. In fact, we suggest using a photo larger than the minimum size so the focus tool will work properly.  However, if you navigate to the media library to browse for an existing image instead of uploading a new one, it is possible to choose one that does not meet the minimum size and you will not get the error message. If an image that does not meet the size requirement is selected in this way, it will appear on the back end (in editing view) but will not display on the front end (what site visitors see).

What are pixels?

When determining the correct size for a website image, all height and width measurements are done in pixels. The number of pixels inside of an image is the image size and the number of pixels that fit into a square inch of the image is the resolution. Resolution mostly matters when you are printing, but is meaningless on the web because the device that you are using to view the image (monitor, tablet, phone, etc) will determine its resolution.

Minimum Photo Sizes

Resizing & Cropping Images

Before you attempt to alter any of your photos, it's important to understand the difference between resizing and cropping. Resizing changes the size of an image, but allows it to keep the same shape and height to width ratio, while cropping removes portions of the image and can change the size, shape, and height to width ratio. 

Article

  • Header Image: 1366 x 548 pixels
  • Thumbnail: 600 x 600 pixels

Basic Page

  • Intro Background Image:  1366 x 480 pixels

Book

  • Book Cover: 200 x 450 pixels

Courses

  • Banner Image: 1366 x 480 pixels
  • Featured Course Image: 

Event

  • Header Image: 1040 x 526 pixels
  • Thumbnail: 600 x 600 pixels

Image Card

  • Thumbnail: 600 x 600 pixels

Multipurpose

  • Introduction Background Image: 1366 x 480 pixels
  • Main Content and Sidebar Icon: 420 x 300 pixels
  • Video Spotlights with Articles Image: 800 x 800 pixels
  • Dark Callout Image: 800 x 800 pixels
  • Spotlight - Video Image: 800 x 800 pixels
  • Spotlight - Static Image: 800 x 800 pixels
  • Spotlight - Fullscreen Video Image: 1366 x 800 pixels
  • Fullscreen Slideshow Image: 1366 x 800 pixels
  • Timeline - Header Image: 1366 x 480 pixels
  • Timeline - Static Slideshow Image: 600 x 600 pixels
  • Timeline - Slide Background Image: 600 x 600 pixels

Gallery

  • Image: 600 x 600 pixels

Person

  • Headshot: 684 x 684 pixels

Testimonial

  • Testimonial Image: 680 x 680 pixels

What resizing tool should I use?

Resizing vs Cropping

Before you attempt to alter any of your photos, it's important to understand the difference between resizing and cropping.

Resizing changes the size of an image, but allows it to keep the same shape and height to width ratio. For example, if you resize a rectangle-shaped image to make it smaller, you will still have a rectangle with the same ratio, not a square. It is the exact same photo you started with, except smaller.

Cropping removes portions of the image and can change the size, shape, and height to width ratio. Keep in mind that if you crop an image, you won't be able to enlarge it without losing some of the photo's quality, causing it to look fuzzy or pixelated. Very rarely will you ever need to crop a photo you want to use on an Arts & Sciences website. Because our web theme automatically crops a photo when it is displayed, we recommend you upload the photo as-is to see what it looks like before you try to alter it. It's also very important to make a duplicate of your photo so you still have a copy of the original. Once you crop a photo, it can't be undone.  

 

Web Resizer

Web Resizer is a free online tool for resizing, cropping, and optimizing images for the web. Because you upload your image to the tool, you don't need to download any special software. Since it is a web application, you can use it with a PC or Mac.

  • Go to the Web Resizer site.
  • Upload your image using the 'upload image' button.
  • To resize, change the number of pixels in the 'new size' text box.
  • To crop, click the 'crop image' link.
  • After making your changes, click the 'apply changes' button and then click 'download this image.'


Default Mac Image Editors

There are two ways to edit photos on a Mac using the default features. If you have a Mac and just need a simple and free way to resize or crop photos, Preview is a great option.

Preview:

  • Right-click on a photo on your desktop. 
  • Choose 'open with' and then select the 'preview.app' option.
  • This will open up the Preview toolbar at the top of your screen. From there, you can choose the Tools option to resize your photo or just click on the photo and use your mouse to select the area you would like to crop

Photos image editor:

  • Open the photo application.
  • Double click on the photo you want to edit.
  • Choose the 'edit' option in the right top corner of your app window.


Default Microsoft Photo Editors

What photo editors are available and what steps you need to take will be determined by what version of  Windows is on your computer. 

Photos App:

  • Double-click the image file you want to resize to open it in Photos.
  • Once it's opened, click the three dots in the top right corner, then click 'resize'.
  • A small pop-up will appear, offering you three preset sizes for the picture. Pick one of them or click 'define custom dimensions' at the bottom.
  • After you have set your new dimensions, click 'save resized copy'.

Microsoft Paint:

  • Open up the paint app.
  • Open the photo you want to resize by clicking "File," then "Open," and selecting the image from your computer's files. 
  • In the top menu bar's "Home" tab, click "Resize." The "Resize and Skew" window should appear.
  • Enter the desired image size. You can set the size by percentage or click "Pixels" and enter the exact dimensions you want. As long as you keep "maintain aspect ratio" checked, you only need to specify the horizontal or vertical dimension, and the other dimension will be set automatically. 
  • Click OK and then save the new version of your image by clicking 'file' and then 'save as'.


GIMP

GIMP is a free open-source image editing application similar to Adobe Photoshop and can be downloaded to a PC or Mac. GIMP has more features than Web Resizer and allows you to create artwork and also has graphic design elements.


Adobe Photoshop

Adobe Photoshop is a commercial image editing software and requires a license to download. It also has a simpler less expensive version called Photoshop Elements. If you have questions about licensing, please contact your department support rep.  If you just need an easy way to quickly resize and crop photos, you probably don't need Photoshop.