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.
- 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|
|Short Bio||Person - Image||800||800||1:1|
* 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.
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.
- 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
- Crop - Drag your cursor over the area you want to crop then click the crop tool
- 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
- Undo/Redo - Undo or 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.
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.
46% less pierogi? How is this a good thing?!