Carnegie Mellon University


A service provided by the University CMS Team

Optimize Images

You can place an image almost anywhere on your website, however obtaining and optimizing images can be confusing. Here are some tips to make working with images easier.

General Guidelines

  • Use 72dpi resolution (i.e., web resolution)
  • Use jpg for photos and png for graphics; gif and svg are also acceptable
  • Do not include spaces in the filename; use hyphens where appropriate such as scotty-dog.jpg
  • Follow the size specifications for specific uses; image sizes are also provided in the CMS interface while editing a page

Upload Images to the CMS

There are a couple of methods to upload images to the CMS.

  • Upload images directly to the CMS using Add Content in the Main Toolbar; follow the steps for uploading a file
  • While editing a page, options are provided to upload images while configuring various page elements (Hero, Slideshow, Photo Grid, etc.) as well as in the WYSIWYG editor. Follow the steps provided for each element.

Image Size Specifications

Image resolution should always be 72dpi.

Location Content Type Width Height Aspect Ratio
All Pages Social Media Image 900 600 3:2
All Pages Hero - Hi Res* 2000 1000 2:1
All Pages Hero - Mobile* 900 600 3:2
All Pages Grid 700 min Variable Variable
All Pages Slideshow** 700 min Variable Variable
News Article Syndication Image 900 600 3:2
News Article Hero Syndication - Hi Res* 1400 700 2:1
News Article Hero Syndication - Mobile* 900 600 3:2
Bio Syndication 800 800 1:1
Short Bio Person - Image 800 800 1:1
Setup Logo Variable 300 Variable

* Two sizes of the same image are required for this content type.
** All images in a particular photo grid or slideshow must have the same dimensions.

Image Editor

Tools are available to edit your images in the CMS. Select the image in the asset tree you want to modify and click Edit. Follow the steps for the task needed.

Image editor with photo of Scotty

  • Replace  - Drag and drop the new image into the box or click Choose to browse and select a new image from your computer
  • Rotate or Flip - Use the appropriate tools to rotate or flip the image; hover over each icon to learn the action  Icons to rotate and flip image
  • Crop - Drag your cursor over the area you want to crop then click the crop tool Icon to crop image
  • Resize - Enter new dimensions into the Width or Height fields. Ensure Maintain Aspect Ratio (padlock icon) displays as locked to preserve aspect ratio. Click to accept or X to cancel the change Tools to resize an image 
  • Undo/Redo - Undo or redo an action Icons for undo and redo an action

Image editor not powerful enough? For advanced image editing we recommend using a program such as Photoshop, or downloading the free open-source image editor GIMP.

Free CMU Stock Images

Free pre-sized images are available for CMS sites, allowing you to highlight the best of CMU on every page.

Group of students at Holi Festival covered in colored chalk.

CMU Stock Images

Additional photography resources are also available.

Compress Your Images

Image being compressed.

Just because an image fits nicely on a page doesn't always mean it's web-friendly. Images can meet recommended size specifications, but still have a large file size.

To improve load time and minimize bandwidth consumption, images should be compressed before uploading them to the CMS. Luckily, there are web apps available that'll do the work for you. We recommend for jpgs and for pngs.