Skip navigation links
Digital Experience Studio > Website Technology > Sitecore CMS > XP User Guide >

Working with Images

Working with Images

Images are created outside of Sitecore and uploaded to the Sitecore Media Library for use in pages.

Refer to Media Library for more information about storing and using files.

Prepare an Image for Web Use

A web-ready image is a graphics file that has been properly prepared for use in a website.

Preparation consists primarily of sizing, cropping and compressing the image before uploading it to Sitecore.

Why Optimize?

An image downloaded from MSU Photos or another media source is not always ready for the web.

Taking a few simple steps will greatly improve user experience by reducing image download time and providing consistent quality displays.

File Specifications

Follow the following specifications when creating image files to ensure content authors have the best experience in uploading assets and website visitors have the best experience in viewing the website.

  • Use a digital graphics file format that can be displayed by web browsers, such as JPG, PNG or GIF.
  • Use JPG files when possible. They produce the smallest image file size while retaining acceptable detail and clarity.
  • File dimensions are the recommended width and height, in pixels, for an image. There may be instances where it is not possible to obtain images as large as suggested. In those cases, use the largest available size.
  • The ideal size for full-screen background images is between 1500 and 2500 pixels in width. For most other images, ideal size has a maximum width of 800 pixels. Using these image size guidelines will ensure that the images load properly on all devices. 
  • Sitecore automatically crops images to fit a predetermined area for each component, so recommendations include an image shape (square, landscape or portrait).
  • Refer to the Image Size section for recommended image size by component.
  • Image file size refers to the amount of disk storage space required to store the image in Sitecore. This is usually measured in kilobytes, or KB, or megabytes, MB.
  • File size (bytes) determines how quickly an image displays on the screen.
  • Sitecore restricts uploads to a maximum file size of 12 MB. This includes images, PDFs and other documents and video files. If this is an issue, contact the University Communications Platform Team for assistance. 
  • An ideal image file size for images displayed on a page is no larger than 200 KB.

Checklists for Preparing Files

Complete these steps on your computer (not in Sitecore.)

For Images

  1. Select a file format (e.g., JPG).
  2. Crop the image to the correct shape and area of focus.
  3. Resize the image to the correct size (width and height) for the component being used.
  4. Compress the file to a smaller size (bytes). Use a free tool such as ImageOptim or TinyIMG for image compression.
  5. Rename the file as needed. Keep the name short but meaningful, with no spaces and no special characters (except hyphen or underscore).
Note: See this additional resource for more information on preparing images for use on the web.

For PDFs

  1. Check the file for accessibility compliance and fix any issues. (Refer to MSU's Digital Accessibility website for help.)
  2. Compress the file.
  3. Name the file. Keep the name short but meaningful, with no spaces and no special characters (except hyphen or underscore).

 

Add an Image to a Page or Component

An image can be uploaded to Media Library before working on a page. The image can also be uploaded during page editing. 

Images and PDF files require advance preparation before uploading. See the above section for more information. Other file types do not need preparation. 

Expand the tabs below for instructions on uploading files.

In Media Library:

  1. Locate the Media Library in the content tree (left pane).
  2. Expand the Assets folder and locate the website.
  3. Expand either the appropriate folder: Images (for images), Videos (for video files) or Docs (for other files).
  4. Click the folder or subfolder where the file will be added.
  5. Click Upload file.
  6. Click Browse. Select the image from your computer and click Open.
  7. Click Upload. The image information will display in the main content area.
  8. For an image file only: In the Images section, in the Alt field, add alt text (a short description of the image for screen readers to use.)
  9. Click Save (upper left, on the navigation ribbon.)

In Content Editor:

  1. Locate the Media Library in the content tree (left pane).
  2. Expand the Assets folder and locate the website.
  3. Expand either the appropriate folder: Images (for images), Videos (for video files) or Docs (for other files).
  4. Click the folder or subfolder where the file will be added.
  5. Click Upload file.
  6. Click Browse, select the file from your computer and click Open.
  7. Click Upload. The file information will display in the main content area.
  8. Click Save (upper left, on the navigation ribbon.)

Recommend Image Sizes

See the Image Size Guide for recommendations for images used in Advanced Accordion, Advanced Mixed Content, Hero Banner, Info Panel and Rich Text components.

View size guide
A photo of a camera taking a photo of the 1855 Place building.

Documentation updated: June 17, 2024

XP User Guide