The Image Editor Gadget in the CMS will crop, compress, and optimize the images you create for your webpages. There is also code on our pages that serves up the most appropriate size of the image crops for the device being used. All images used in the CMS should be created with the Image Editor Gadget to ensure this code and the snippet code work, provide standard image sizes across our sites, and improve page speed and performance.
What does image optimization mean?
Image optimization can refer to:
- Cropping and/or sizing images down to the smallest size that works for the intended use on your website.
- Compressing the quality of your image down to the lowest quality where the detail of your image is preserved.
- Stripping out additional image metadata to reduce the overall image file size.
Why would I care about image optimization?
Your target website users may not have a strong internet connection when loading your website—especially if they are using a mobile device with less than a full LTE connection. Using optimized images will speed up the loading of your web pages, which can positively affect user perception, usability, conversion rates, and search engine optimization.
When using Modern Campus CMS, do I need to preoptimize my images using software such as Adobe Photoshop?
No, if your original image is less than 25MB, you should not pre-edit your image before uploading it into the CMS. The CMS has a built-in Image Editor, which does several things for you:
- Saves a copy of the original image into the CMS, so that you can make modifications to crop and compression later if you change your mind and/or if web standards change.
- Departments occasionally wish to reuse a website photo in a print publication and it is convenient to retrieve the original image from the CMS.
- Allows you to crop your image and automatically creates several different crop sizes for you.
- Automatically applies image compression following industry standards specified by Google.
Why does Modern Campus CMS create multiple cropped sizes?
The UMC web team uses modern responsive image techniques when coding images on our websites. We need multiple cropped image sizes available to display the smallest image that still has enough quality for different user screen sizes (desktop, tablet, mobile).
For example, you may think you are only selecting and using one image size when adding a banner image in the MultiEdit screen of the CMS, but we are using several image sizes within the backend code to optimize page speed performance. We take into account the user’s screen size and pixel density to serve the smallest available image that still meets our quality standards.