If you have ever heard the adage, "a picture is worth a thousand words," this principle very much holds true in web content. Images range in format, size, ratio, composition, color, and many other variables, but a thoughtfully arranged visual can strike a powerful statement alongside the text that you write.

To truly make an image pop off the page in all formats, there is often more going on behind-the-scenes than what meets the naked eye. Learn how to work with images from start to finish, including how to choose, prepare, insert, and customize each image for its intended use. 

 Instructional Video

Watch this 3-minute tutorial for an initial overview of images, or scroll below to see complete written instructions.

*Note: Click Full screen  icon for best view.

How to Insert an Image

If you are looking to insert a specific arrangement of images, consider using the Image Galleries asset for  multiple images side-by-side, or the Staff Profiles or Faculty Profiles features for employee listings. Otherwise, use these instructions to insert an individual image without advanced features.

1. Choose an Image

The first step to inserting an image is to identify the image that you would like to insert. If you do not currently have an image that you or your colleagues created, here are some resources that you can utilize:

  • Photography Library: Access a campus photo library with thousands of categorized photographs through Marketing & Communications.
  • Photography Request: Submit a requested photo shoot for event coverage, professional headshots, marketing materials, and more.
  • University Lockups: Use your unit's official lockup or contact Marketing & Communications to retrieve the original files.

When using any resources other those listed above, proceed with caution to ensure you know the original source of the image. You must have the legal rights to any image that you upload to the website — this means that you (or a Cal Lutheran employee) were the sole creator or that you obtained it from a source which licenses it for commercial and non-commercial use and with no permission required.

  PRO TIP: If you are in desperate need of third party photography sources, Pexels, Unsplash, and Pixabay are typically reliable for free images with rights for any use. Review the image license when in doubt, and always choose images that align with the university's photography Brand Identity guidelines.

2. Prepare the Image

Once you have chosen an image, prepare it for upload by optimizing its image size, file size, and file format. This can be done with photo editing software; you can use Canva for free if you don't have Adobe Photoshop.

Note that the university has Brand Identity standards for certain aspects of images, such as Logo Guidelines, Visual Elements, and Text on Photos. In particular, text-heavy graphics are not recommended, due to issues with accessibility and responsiveness to mobile screen sizes. Contact Us for help.

Image Dimensions

In order to provide crisp images of perfect resolution, please reference the following guidelines on image size (note that you are able to crop in Omni CMS after uploading, but it is best to use photo editing software):

Type of ImageWidthHeightRatioDescription
  Circle Crop1  400px  400px  1x1  Accessed through Snippet tool for Image - Circle Crop
  Content (Full-width)  1672px  Any
  For Class of Full-width image
  Content (Landscape)2  630px  420px  3x2  For Class of Left-aligned image or Right-aligned image
  Content (Portrait)3  420px  630px  2x3  For Class of Left-aligned image or Right-aligned image
  Content Hero (Feature)  1672px  940px  16x9  Interior Page banner within content area (large overlay)  
  Content Hero (Normal)4  1672px  458px
  Interior Page banner within content area
  Fancy Section  1200px

  Background image for a Fancy Section
  Feature Columns5  1112px  630px  16x9  Accessed through Snippet tool for Feature Columns (3)
  Hero (Large)  2500px  684px
  Landing Page desktop banner — add via Properties tab
  Hero (Small)  1200px  328px
  Landing Page mobile banner — add via Properties tab
  Hero (Tall)  2500px1026px
  Landing Page tall banner for marketing campaigns
  Mobile Hero  1000px  1080px    Home Page mobile banner
  Poster Frame  2560px  920px
  Home Page video fallback

File Size

In order to minimize page loading times, please consider the following guidelines on file size:

  • Maximum file size: 1 MB.
  • Recommended file size: 100-300 KB.
  • Note for multiple images: If you have several images on a page, it is important to be attentive to each of their file sizes. For example, a page with five images that are 500 KB each will amount to 2.5 MB total; this could cause your page to load slowly for visitors, especially those who have limited internet connections or cell network data.

File Format

In order to present the image effectively, please consider the following guidelines on file format:

  • .JPG: Recommended for most photographs (best choice to compress the file size).
  • .PNG: Recommended for most illustrations or graphics with few colors (best choice for transparency).
  • .SVG: Recommended for vector files (best choice for icons, but rarely used).

3. Insert the Image

While you are Editing a Page, click the Insert/Edit Image Insert/Edit Image tool in the editor toolbar. In the Insert/Edit Image window, click the Source  icon beneath the Source field, as seen in the image below.

Insert/Edit Media

  EXTRA INSIGHT: An image can be uploaded anywhere on the website, but it is encouraged to upload it to the images folder in your section of the website. This keeps an organized file system.

4. Select the Image

In the left side of the Select Image window, navigate to the folder for your section of the website (e.g., admission folder, commencement folder, library folder, etc.) and click the images folder within your folder.

To choose an image that has already been uploaded to your section of the website, click the image file you desire. To choose an image that is stored locally on your computer, click the UPLOAD button and browse for the image (please review the below notes on File Format, File Size, and Image Size prior to uploading). Once your image is selected, click theINSERT button to move forward, as seen in the example below.Select Image

5. Customize the Image Settings

Once your image is selected, you can customize the following settings in the Insert/Edit Image window.  

  • Alternative description: Describe the meaning of the image in a detailed phrase in sentence case (omit the words "Image of" or "Picture of") — this is required for accessibility to help people with disabilities understand the image.
  • Width and Height: Set the pixel dimensions to match your original image, based on the image sizes in the chart above (note that some Snippets automatically set this for an image) — this speeds up loading.
  • Class: Choose Right-aligned image, Left-aligned image, or Full-width image from the drop-down menu — this is the best way to adjust image alignment.
  • Vertical space and Horizontal space: In the Advanced tab, you can enter 5-10 points of space in each field to add padding around an image — this is useful for a Right-aligned image or Left-aligned image.

When you are finished customizing the settings, click the SAVE button at the bottom of the Insert/Edit Image window, as seen below.

Insert/Edit Image

  PRO TIP: When you want to update the Class of an image to Right-aligned image, Left-aligned image, or Full-width image, it is better to use the above workflow than to use the Styles menu in the editing interface. This will minimize the chance of technical difficulties with image alignment.

6. Save and Publish

To update the website with your edits, click the SAVE button and PUBLISH button. Don't forget to view the published page on desktop AND mobile to ensure that everything is neat and tidy. 

Note that if the image is not loading properly in Preview mode, you can go ahead and publish the page anyway, as this usually bypasses loading errors without issues.

  EXTRA INSIGHT: Global CSS code automatically controls most of the mobile view styles throughout the website. If you are a Global Admin user and you want an image to appear only on desktop or mobile, you can edit the Source Code to insert "class=hide-on-mobile" or "class=hide-on-desktop" into the <img></img> tags. This can be inserted into other elements beyond images, too.

Example Layouts

1 See below for example layouts of Circle Crop with Class of Left-aligned image and Right-aligned image.

2 See below for example layout of Content (Landscape) with Class of Right-aligned image.

Content (Landscape)

3 See below for example layout of Content (Portrait) with Class of Left-aligned image.

Content (Landscape)

4 See below for example layout of Content Hero (Normal).

Content Hero (Normal)

5 See below for example layout of Feature Columns.

< Previous Article