Image Sizing and Editing

The Brandeis website features large, responsive photography. Here are all the details for making sure your images look their best.

Image Size References

Images should be sized to the dimensions below before you upload them to the CMS. We recommend Adobe Photoshop for cropping and resizing images. This software can be acquired through the Brandeis Help Desk. Faculty and staff can download it for free for use on university-owned computers.

Below is a list of all the image sizes (in pixels) used throughout the Brandeis website.

Images that appear at the top of your site's home page.

Full width image: 1920 x 768 pixels

Feature (photo with text summary on side): 960 x 640 pixels

Slideshow (side-by-side images a user can scroll through): 960 x 640 pixels

When adding your Blog Feed to your webpage, you can add an image to display with the blog post. This is a static image; it does not update each time a new blog is posted. 

Size: 735 x 490 pixels

Size: 510 x 340 pixels

Feature Images

Feature images appear in either the Feature content type in the main Content area, or the Feature or Featured Event content type in the Content Below Main area.

Size: 735 x 490 pixels

Full size image: Can vary; maximum width: 1920 pixels, maximum height: 1080 pixels

Vertical thumbnail: 300 x 400 pixels

Horizontal thumbnail: 480 x 320 pixels

Images in an Editor in the main content area where text wraps around them. All images should be aligned right using the styles dropdown.

Size: Can vary, but will scale with the column width/container. No larger than 1000 pixels wide.

When creating a list using the List (News, Publications) content type, you can add an image that is right aligned with the content. 

Size: 735 x 490 pixels

Images in your main content area that are created in their own Media content module editor.

Large: 960 x 640 pixels

Small: 960 x 640 pixels

Note: The image sizes are the same pixel dimensions, but the small image will display at a size of 735 x 490 pixels.

News images appear in the News content type in the Content Below Main area.

Size: 480 x 320 pixels; must be horizontal

Sharable people blocks use square images used for headshots.

People block: 340 x 340 pixels

Sidebar images appear below your left navigation, either in an Editor or Sidebar Text with Photo Block.

Size (Sidebar Text with Photo Block): 960 x 640 pixels

Size (Editor): Can vary, but will scale with the column width/container. No larger than 1000 pixels wide.

Social media images are for Facebook sharing. If someone shares a link from your site to Facebook, the social media image you have selected will automatically load on Facebook. Note: Social media images are associated with a single page, not your whole site. 

Social media image size: 1200 x 630 pixels

How to Crop an Image in Photoshop

Note: These instructions are for Photoshop CC 2014 and up. If you are using a different version of Photoshop, you may need to follow slightly different instructions. Many tutorials can be found online.

  1. Open your photo in Photoshop. Click on the Crop tool on the vertical toolbar.

    crop tool photoshop
  2. Make sure W x H is selected from the dropdown on the horizontal crop toolbar.

    w x h dropdown
  3. Enter a value for width and height in pixels (px is short for pixels). (Correct width and height for each content type can be found above.)

    width and height values
  4. Drag the corner and edge handles of your photo to specify the crop boundaries. Your photo will be cropped proportionate to the width and height you have entered in the toolbar. Any part of the picture outside of the box will be deleted.

    crop handles
  5. Once you are satisfied with your selection, click the checkmark on the toolbar to complete the crop.

    checkmark
  6. Now that your photo is the correct pixel dimensions, you must optimize it for the web.

Optimizing an Image for the Web

In addition to saving images to exact pixel dimensions, they should also be saved — or optimized — for the web. When you optimize a photo, you are reducing the file size while preserving image quality.

Note: Actual image file sizes (in KB) will vary based on each individual photo’s complexity. For example, an image of a blue sky and clouds would be inherently smaller in file size than a photo of 10 people's smiling faces — there is simply less detail, and therefore data, in the photo.

Recommended Tools/Software for Optimizing Photos

If you are using Photoshop to resize your images, you can use its built-in tools to optimize your photo prior to uploading it to the CMS. We also recommend a web-based tool called Optimizilla.

Note: If you have trouble saving/optimizing your photo for the web, email cmshelp@brandeis.edu

 

Additional Information

Copyright

Editors should only use images for which Brandeis holds the copyright (taken by the university photographer, a staff member, etc.) or stock images that they have purchased rights to use. We recommend iStockphoto for stock photography needs.

Color Format

Images must be in RGB color format. If you upload an image and see a text error instead of the image in View/Preview, you may have uploaded an image in CMYK color format. Please edit the colorspace in Photoshop and re-upload the image.