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.
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 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.
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.
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 Image||Width||Height||Ratio||Description|
|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)||2500px||1026px||Landing Page tall banner for marketing campaigns|
|Mobile Hero||1000px||1080px||Home Page mobile banner|
|Poster Frame||2560px||920px||Home Page video fallback|
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.
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.
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 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.
- 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.
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 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.
EXTRA INSIGHT: Global CSS code automatically controls most of the mobile view styles throughout the CalLutheran.edu 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.
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.
3 See below for example layout of Content (Portrait) with Class of Left-aligned image.
4 See below for example layout of Content Hero (Normal).
5 See below for example layout of Feature Columns.
|< Previous Article|