Images

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. 

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 CalLutheran.edu 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.

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):

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  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.

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  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 the button to move forward, as seen in the example below.

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  button at the bottom of the Insert/Edit Image window, as seen below.

6. Save and Publish

To update the CalLutheran.edu website with your edits, click the  button and  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.

Example Layouts

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

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

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

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

⁵ See below for example layout of Feature Columns.