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.
Choosing an Optimization Approach
So which method should you use? Here are some guidelines:
- For quick setup with minimal coding, use a server-side module like Kraken or Dianoga. This gets you reasonably optimized images with zero workflow change.
- For more control and best optimization, manually process images before upload. This gives you full compression/sizing flexibility and unlocks WebP support.
- In some cases, a hybrid approach makes sense. Use server-side optimization for new images, and manually process high-traffic media items.
- Consider your development resources. Manual optimization is more work upfront, while server-side works automatically.
- Factor in page traffic and image volumes. Manual optimization delivers better results, but may not scale well to enormous media libraries without automation.
With a thoughtful approach, virtually any Sitecore site can benefit from improved image optimization. Let's explore some best practices and tools to make it happen.
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:
Audit Current Images
Use the Sitecore Control Panel and Media Library to understand the scope of your media collection. Take note of:
- Total media items uploaded. This indicates the volume of images to process.
- Image file types and sizes. Look for redundantly large files that present easy optimization opportunities.
- High-traffic images. Flag frequently used images like logos and banners that should be prioritized.
By auditing your media library, you can identify optimization quick wins and build a plan.
Install an Optimization Module
The easiest way to start optimizing Sitecore images at scale is by installing a third-party module like Kraken or Dianoga. These tools automatically run image optimization on media item requests.
Once installed, all image URLs will be routed through the module's optimization logic. This begins compressing and downsizing images transparently without any workflow change. Be sure to clear Sitecore caches so the module takes effect immediately.
Some benefits of this approach:
- Optimization happens automatically on image requests without changes to CMS authoring.
- Lossy compression reduces image files sizes by 50-90% compared to Sitecore defaults.
- Configuration controls optimization intensity vs. image quality.
- Resizing images on-the-fly reduces downloaded bytes.
- No need to manually process media items through external tools.
The main downside of server-side optimization is the "first hit" delay, where the initial request for each image is unoptimized until caching completes. But subsequent page loads will pick up the optimized versions.
Manually Optimize High-Impact Images
While a server-side tool optimizes Sitecore images at large, you can further boost performance by manually optimizing high-impact media items. This ensures crucial images like page banners and logos are fully optimized without caching delays.
Here is a streamlined manual optimization workflow:
- Identify high-traffic media items from your audit. Homepage banners, logos, and other reused images are good candidates.
- Download the original image files from the Sitecore Media Library.
- Run the images through an external optimization tool. Kraken is an excellent choice offering API-based compression.
- Convert optimized images from JPEG/PNG to WebP format using converters like ImageMagick.
- Upload the WebP images into Sitecore, replacing the original media items.
- Flush all caches so the CDN and Sitecore pick up the WebP images.
With this surgical approach to manually optimizing prominent images, you avoid first-hit delays. Users only receive perfectly optimized WebP images that load blazing fast.
Configure Adaptive Image Delivery
An advanced optimization technique is configuring your CDN and/or Sitecore to deliver different image formats and sizes based on device and browser. For example:
- Serving WebP images to Chrome and Opera which support the format.
- Delivering smaller image renditions to mobile devices.
- Removing image formats not supported by older browsers.
This adaptive image delivery ensures users only receive the optimal image file type and dimensions for each scenario. Images load as fast as possible across every context.
Adaptive delivery does take more configuration. Image URLs and/or CDN logic must be dynamically tailored per-request. But the page speed rewards can be tremendous, especially for mobile users. Explore tools like Cloudinary that simplify adaptive image management.
Monitor Optimization Impact
As you implement image optimization, be sure to monitor its impact on site speed. Use PageSpeed Insights and web performance monitoring tools to track key metrics like:
- Page load times: Optimization should reduce this, especially on slower connections.
- Total page weight: Lower is better, as less data needs to be transferred.
- Image response size: Individual images should decline in KB transferred.
- Time to first byte: This measures latency which optimization improves indirectly.
Aim for at least 20-30% faster page loads. If you fail to see gains, adjust compression rates or focus on individual media items. Measure results across mobile networks to ensure gains for mobile users.
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.
Optimize Images Externally Before Upload
For full control and best results, externally optimize images before uploading to Sitecore. This eliminates double-handling of images in the CMS and sidesteps internal processing limits.
Follow the same workflow outlined above for manual optimization:
- Run images through Kraken or other tools for compression and resizing.
- Convert to WebP format.
- Upload optimized images into Sitecore.
With images pre-optimized, Sitecore can be configured to skip its internal processing, avoiding redundant image rendition creation. This may require custom pipelines or omitting resize parameters.
Configure Default Image Compression
If manually optimizing before upload is not feasible, at least configure the Content Editor to default to better image compression on upload.
In the Sitecore config files, find the <mediaLibrary> section. Here you can tweak the ImageCompressionValue to be more aggressive than the default 70 quality. Values between 50-60 provide nearly invisible quality reduction for most images but vastly smaller file sizes.
For example:
<mediaLibrary> <imageCompression> <targets> <target name="Default Website Target" suffix="" width="1920" height="1080" compressionValue="50" /> </targets> </imageCompression> </mediaLibrary>This will automatically generate smaller image renditions on upload without external tools needed. But note that Website Target limits apply and may override this.
Enforce Size Limits on Upload
Another option is to enforce size limits when images get uploaded into Sitecore. This prevents oversized images from entering the system at all.
You can impose max width, height, and file size values on media item uploads. Images exceeding those limits would throw errors on upload and be rejected.
For example:
<mediaLibrary> <limits> <enforceMaximumUploadFileSize>500KB</enforceMaximumUploadFileSize> <maxUploadFileSize>500KB</maxUploadFileSize> </limits> </mediaLibrary>This forces authors to properly size and optimize images themselves before they can be added to Sitecore. However, it also creates authoring friction which could result in fewer images used.
Scale Automated Optimization
For larger media libraries, automated optimization is likely needed. Server-side tools like Kraken should handle new uploads out of the box. But you may need to augment them with background batch optimization.
Run scheduled jobs with PowerShell scripts or Azure Functions that:
- Pull batches of recent media uploads from Sitecore.
- Send them to an optimization API like Kraken.
- Overwrite the unoptimized images with the compressed versions.
This robust automation ensures even huge volumes of new images get optimized post-upload. Dial compression levels as needed to fit business image quality standards.
Considerations for Specific Image Types
Not all images should be optimized identically. Certain image types require special handling to maintain visual quality or transparency.
Logos and Illustrations
Logos, illustrations and other images with fine detail, hard edges and text require lossless or very mild lossy compression. Aggressive lossy compression can introduce unsightly artifacts. Convert these images to WebP losslessly or only apply light JPEG compression.
Photographs
Photos tend to tolerate heavier lossy compression. Aim for 60-80 quality levels in JPEG or WebP compression. But watch for banding effects in gradients or fine textures. Scale down photos to target display dimensions so they don't load oversized.
Images with Transparency
For images with transparent backgrounds like PNGs, use tools that maintain alpha channel transparency during WebP conversion and optimization. This avoids opacity being lost or turned black. SVGO is an SVG optimizer that handles transparencies well.
Favicons
Favicons require specific sizing like 16x16, 32x32 pixels. Scale favicon source images to each needed size before upload. Favicons are also static assets suited for long browser caching rather than dynamic optimization.
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.
