Carnegie Mellon University

CMU Web

A service provided by the University CMS Team

Optimize Images

You can place an image almost anywhere on your website, however obtaining images to suit to your content and preparing them to be web-friendly can often induce hair pulling by the chunk. And since your long-haired guinea pig sheds enough for the whole family, we want to make working with images as easy as possible.

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* 1400 700 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) dislays 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

Short on resources to obtain the proper images to make your website visually stunning? We've got your back! Free and pre-sized images are available for CMS sites, because all sites should reflect the university's core values.

Group of students at Holi Festival covered in colored chalk.

Gimme free stuff!

Additional photography resources are also available if you're looking for something fancier.

Compress Your Images

Images can be deceiving. Just because one fits nicely on a page doesn't always mean it's web-friendly. Even if it meets the recommended size specifications, an image can still be huge in terms of file size (1.21 jiggabytes, great Scotty!)

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 compressjpeg.com for jpgs and compresspng.com for pngs.

An image compressed by compressjpeg showing percentage of compression at 46%

46% less pierogi? How is this a good thing?!