Google has made page speed a factor in search rankings. Users expect pages to load nearly instantly and will abandon slow-loading sites. Sitecore image optimization is one of the most impactful ways to improve page speed.
For Sitecore users, optimizing images can be complex due to the CMS's handling of media items. However, with the right approach, you can significantly reduce image file sizes without sacrificing visual quality. This allows pages to load faster, improving user experience and SEO.
Understanding Sitecore image optimization
Image optimization refers to techniques for reducing the file size of images.
This is accomplished by removing excess data from image files without substantially reducing image quality. The most common optimization methods include:
- Compression: Using algorithms to reduce file size by removing redundant data. Lossy compression throws out unnecessary data during compression. Lossless compression compacts data without discarding it.
- Resizing: Downscaling image dimensions to fit the display size needed on a web page. Larger images are resized to smaller pixel widths and heights.
- Cropping: Removing outer edges of an image to focus on key subject matter.
- Conversion: Changing image file formats to newer, more efficient types like WebP that provide better compression.
The goal is to serve images at the smallest file size possible for their intended display use. Smaller image files load faster, taking up less bandwidth. For mobile users, this saves data usage and improves page load time.
Challenges With Sitecore’s Image Handling
Sitecore stores uploaded images as media items within the content management system. This provides a lot of flexibility, allowing content authors to reuse media items in multiple contexts. However, it also introduces challenges for image optimization.
By default, Sitecore creates multiple cached image renditions for each media item upload. This includes the original high-resolution image, along with resized versions for different display sizes. Sitecore automatically generates resized versions when new media items are added.
The issue is that Sitecore's default image compression and resizing settings are limited. The CMS does not optimize images for minimal file size. As a result, even the resized image renditions remain much larger than necessary for web use.
Sitecore also handles media requests by dynamically pulling image renditions from its data templates and media caches. So there is no simple way to run client-side optimization on image URLs.
Without additional configuration, these factors lead to inefficient image files being served across a Sitecore site. Pages load slowly, harming user experience especially on mobile networks.
Optimizing Sitecore Media Items
To optimize Sitecore images, you need to override the CMS's default image handling with tools that support more aggressive lossy compression and conversion to new formats. There are two main approaches:
Server-Side Optimization
With server-side optimization, image files are processed and optimized automatically when users request them. The optimized images are then cached and served for subsequent requests.
Popular Sitecore modules like Kraken and Dianoga use this method. They hook into the CMS's media request pipeline. When a user requests an image, the module fetches the original media item from Sitecore. It runs optimization on the image data, then caches and returns the smaller optimized version.
This approach seamlessly optimizes images without changes to content authoring. However, the downside is that unoptimized images are still served on the initial request until the optimized version is cached. This leads to slower first-time page loads.
Manual Optimization
For the most efficient results, images can be manually optimized via an external workflow before being uploaded to Sitecore. This pre-optimizes images so that only the smallest necessary files ever get served to users.
A typical workflow involves:
- Downloading a media item's high-resolution original image from Sitecore.
- Running lossy compression and resizing tools like ImageMagick or Kraken outside of Sitecore to optimize the image.
- Converting optimized images to WebP format.
- Uploading the optimized WebP images back into Sitecore to replace the original media item.
This approach eliminates the "first hit" lag of server-side optimization. Users only receive fully optimized images from the start. However, it requires manually processing images before upload. CDN integration is also needed to serve WebP images to supported browsers.
Optimizing Existing Sitecore Images
To start optimizing images on an existing Sitecore site, you need to process its current media library. Running image optimization across thousands of media items can seem daunting. Here are some tips to effectively handle large-scale optimization:
Optimizing New Sitecore Images
Once your current media library is optimized, you need to ensure new images are optimized at upload. Here are some tips for handling new images in an optimized way.
Review Final Optimized Images
Always spot check a sample of optimized images before launching site changes. Verify:
- Image quality remains satisfactory after compression.
- Key image features are not degraded or distorted.
- Transparent backgrounds did not lose opacity.
- Text and logos remain crisp without artifacts.
- Color gradients appear smooth without banding.
Catch any quality issues early by inspecting optimized images closely across use cases. Tweak tools and settings until a viable balance is struck between quality and performance.
Use Image CDNs for Faster Delivery
Optimized images load even faster when delivered through a content delivery network. Image CDNs store cached image files on edge servers worldwide. This brings images physically closer to visitors for lower latency.
Most dedicated image CDNs also auto-optimize files. Features like:
- Automatic compression and resizing.
- Background image format conversion.
- Responsive image serving based on device.
With an image CDN in place, images get optimized and delivered faster without touching your core Sitecore servers. Configure Sitecore's Media.MediaLinkServerUrl setting to point to your CDN origins for simple integration.
Additionally, image CDNs make implementing advanced techniques like WebP delivery easier. They handle dynamically detecting browser support and serving WebP or JPEG/PNG accordingly.
Optimizing Sitecore images improves page speed while maintaining visual quality. Follow these best practices to serve fast-loading images that delight users on all devices. Reduce image bloat that has built up over the years, and prevent it going forward. With optimized images, your Sitecore site will load at lightning speed.
