Image sizes can vary on mobile/responsive websites. Images may be squished to fit depending on the content type used and the size of screen on which it is viewed.
While there are not set rules in every case, there are a few set sizes and recommendations.
Basic Size Guidelines
Maximum content width
This is the maximum width of the content area. Images can be wider than this, but should not exceed recommended file size.
Should be less than 1MB. 500kb should be large enough for most images.
jpg is the recommended format for images
Portraits for Faculty/Staff Directories
They should be 200x300 (200 pixels wide, 300 pixels tall)
There are many cases where faculty/staff listings need to be shared on multiple pages, i.e. cabinets, committees, task forces. If all images are the same size this will give all directories a clean and organized look.
Images for sliders
All slides in a slideshow need to be the exact same size.
The above image is 1170x445 (1170 pixels wide, 445 pixels tall)
1170 px is the maximum width of the content area. That is the recommended width for slides.
Picture Links Menu
All images used in the Picture Links Menu need to be the exact same size.
We recommend using a 3:2 ratio. Typically, we use 800x533 (800 pixels wide, 533 pixels tall).
Image sizes for general content area
The size you use for images in other areas depends on what you want to accomplish with the image and your own personal taste.
Below are the maximum widths for various columns used on the website. This may help you visualize what size you want an image to be.
Keep in mind that on small screens (phone, tablet), all columns collapse. Each column is then the width of full screen. This means if you are using one of the column content types, you may want the images to be 600-800px wide.
Full width: 1170 pixels
Half width: 585 pixels
One-third width: 390 pixels
Quarter width: 293 pixels