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

Working with Images

Working with Images

Images are created outside of Sitecore and uploaded to the Sitecore Media Library or Sitecore Content Hub, an integrated digital asset management system, or DAM, for use in pages.

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 https://photos.msu.edu/ 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 specifications noted below 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, GIF or WebP.
  • Use JPG or WebP 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).
  • When working with image links in Content Hub, multiple image renderings are available to meet different image size requirements. Be sure to select the most appropriate rendering link.
  • 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 (in 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 and Marketing Platforms Group 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. This is appropriate when the image is only to be used on the website being actively worked on, as opposed to an image of value to all of campus that would be housed in the Content Hub DAM. An image can also be uploaded during page editing. Finally, an existing image can be pulled in from the Content Hub DAM using a rendering link. 

Images and PDF files require advanced 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 and using files.

Requirements:

  • Use lowercase letters, no spaces.
  • Use hyphens to separate words. (Underscore is acceptable, but not preferred.)
  • Avoid special characters.

Best practices:

  • Incorporate words that you may want to search with when locating images later.
    • Example: covid-19-hand-washing (can search on “covid,” “covid 19” and “hand washing”)
  • Indicate the image’s purpose by including “hero,” “thumbnail,” “video,” etc. at the end of the name.
    • Examples: admin-building-hero, grad-school-thumbnail
  • Indicate the image’s size/shape by including “small,” “tall,” “square” or other descriptive word at the end of the name.
    • Examples: beaumont-tower-tall, sparty-status-square

In Content Editor:

  1. Locate and expand the Media Library in the Content Tree (left pane).
  2. Expand the Project folder and MSU folder, then locate and expand the website’s folder.
  3. Expand the appropriate folder: Images (for images), Videos (for video files) or Files (for other files).
Note: If the appropriate folder does not exist, add it to the system. Click on the website folder. Right click and click Insert, then click Media Folder. Name the folder (lowercase, no spaced) and click OK.

Follow this same process to create additional nested folders, if desired, to better organize assets, such as by page or website section.
  1. Click the folder or subfolder where the file will be added.
  2. Click Upload file.
  3. Click Browse. Select the image from your computer and click Open.
  4. Click Upload. The image information will display in the main content area.
  5. For an image file only: In the Image section, in the Alt field, add alt text (a short description of the image for screen readers to use.) Fill in additional fields and edit properties, as necessary.
  6. Click Save (upper left, on the navigation ribbon).

In Pages:

  1. Navigate to the page in the Site tree.
  2. Locate (or place) the component where an image is to be added.
  3. Click on the image placeholder.
  4. Click Add (if no previous image exists in place) or Change (to replace an existing image).
  5. On the Media Library tab, click Upload media.
  6. Use the file finder window to locate the image file.
  7. Click Open.
  8. The image will load into the system and begin indexing.
  9. Wait a few moments for indexing to complete, then click the Refresh button. The image should appear. 
  10. Click the image to select it. It will have a purple outline.
  11. Click Add selected.
Note: Alt text must be added to the image to meet MSU accessibility standards. Alt text can be added in Content Editor or Explorer. 

To add alt text in Content Editor, locate the image file and add text to the alt text field. To add alt text in Explorer, click on the component, click Open in Explorer on the component toolbar, and then add alt text next to the image. 

Prior to deleting an asset, content authors need to confirm that the asset is not referenced by other items or pages within the website. These references exist through content linking in the system.

In Content Editor:

  1. Select the asset in the Content Tree.
  2. Click the Navigate tab in the navigation ribbon.
  3. Click Links in the Navigate tab to view a list of links to the asset.
  4. If there are no items listed under “Items that refer to the selected item,” the asset is not referenced in a separate page or component.
  5. If there are one or more items on the list, remove those references before proceeding.
  6. Once there are no references linking to the asset, right click the asset name in the Content Tree and select Delete. 
  7. Click OK.

In Pages:

Follow specific component documentation for placing images. Generally, to place an image:

  1. Click on the component to select it.
  2. Click the image placeholder space.
  3. In the Image component menu on the right-side panel, click the Add or Change button under Element Options. 
  4. On the Media Library tab of the Add an image window, use Search or the Site tree to locate the desired image. 
  5. Click to select the image. It will be highlighted with a purple outline.
  6. Click Add selected. 
Note: It is up to content authors to ensure content meets accessibility standards. Confirm color contrast passes the accessibility standard test if text will overlay an image. Ensure all images have proper alt text (which can be added in Content Editor or Explorer, if the image does not already have alt text associated to it).

Placing an image directly from Content Hub is limited to users with Content Hub access. A separate login, using an MSU Net ID, will be required. 

In Pages:

Follow specific component documentation for placing images. Generally, to place an image:

  1. Click on the component to select it.
  2. Click the image placeholder space.
  3. In the Image component menu on the right-side panel, click the Add or Change button under Element Options. 
  4. Click the Content Hub tab of the Add an image window and log in, if needed.
  5. Use the Search interface to locate the desired image. 
  6. Click to select the image. It will open in a Choose file to insert pop-up window.
  7. Locate the appropriate rendering link. 
  8. Click Select next to the link. 
  9. Click the X to close the Choose file to insert window.
  10. Click Add selected. 
Note: It is up to content authors to ensure content meets accessibility standards. Confirm color contrast passes the accessibility standard test if text will overlay an image. Ensure all images have proper alt text.
Future plans: The future development roadmap for Sitecore includes a campus portal for searching for Content Hub images, giving more access to campus users. An announcement will be made when this is available.

Searching for a file requires the full and exact file name to find a match. The search treats hyphenated text as two separate searches. For example, a search on “test” will return files with item names test, test-1 and test-for-errors. However, it will not return item names testers or testcase.

Use the asterisk as a wildcard to represent any number of search characters, following these guidelines:

  • Use quotation marks for an exact match. Example: typing “MI” returns item names that include exactly “MI” or start with “MI” followed by any characters.
  • Use an asterisk at the end to allow following characters. Example: typing “MI*” returns item names that start with “MI” followed by any characters.
  • Use an asterisk at the start to allow preceding characters. Example: typing “*MI” returns item names that end in “MI” preceded by any characters.
  • Use asterisks before and after characters. Example: typing “*MI*” returns item names that contain “MI” anywhere in the name.

Documentation updated: Nov. 1, 2024

XMC User Guide