Large Images Slowing Down Your Sitecore Website?

The Problem

If you've been building Sitecore websites for any length of time you've undoubtedly come across an instance where an image being displayed is the wrong size for what's needed. Likely, far too large.

Maybe your Content Author didn't optimize it before uploading it or you're trying to reuse the image from elsewhere. What do you do?

The initial thinking is I'll just use CSS to resize it to what's needed. Which, depending on the discrepancy, might be ok. What if this becomes a habit? All of a sudden your site is bloated. The total size of your web page is now in the 10's of MBs.

You're serving up large images and causing your site to be terribly slow for your end-users. Oh the humanity!

The Solution

Just to be clear, this is but one solution. There are several options including educating your end-users on the image size needed.

You could do this by utilizing help text next to an image field. This solution we're talking about today, however, is not that.

Today we're going to utilize Sitecore's built-in image resize functionality to do on-the-fly image resizing.

Understand The Needed Size

First thing first, know the size you need. Understand the constraints. Is the width more important, or the height?

Why do you need to know this? Well, to keep this short... image width and height are based on pixels, and if you resize an image where the ratio is not precise, you can end up with a sliver of pixels that are just filler.

Case in point:

Here we resized the original image to a specified height and width.

As you'll notice, the small and large images have a sliver of empty pixels on the left-hand side.

This can be avoided however and we show you how, next.

The Code

The code involved to get the resized image URL is relatively simple. Below we create a new image src value with a defined width and height.

// Get image from field
ImageField imageField = currentItem.Fields["Image"];
MediaItem mediaItem = new MediaItem(imageField.MediaItem);

// Get image url
string url = Sitecore.Resources.Media.MediaManager.GetMediaUrl(mediaItem);

// Calculate height based on width (int)
int newWidth = 500;
image.SmallHeight = newWidth * Int32.Parse(imageField.Height) / Int32.Parse(imageField.Width);

// Format new image src 
string smallImageSrc = HashingUtils.ProtectAssetUrl(url + $"?w={image.SmallWidth}&h={image.SmallHeight}");
    

As we mentioned above, utilizing both the width w={width} and h={height} value in the URL is fine when you know the ratio you're creating is perfectly proportional to the original image.

If it's not, then my recommendation is to just pick whichever value is the constraining value for the use. This way you rely on Sitecore to do the calculation.

In the code below we chose the width as the constraining value.

// Get image from field
ImageField imageField = currentItem.Fields["Image"];
MediaItem mediaItem = new MediaItem(imageField.MediaItem);

// Get image url
string url = Sitecore.Resources.Media.MediaManager.GetMediaUrl(mediaItem);

// Format new image src 
int newWidth = 500;
string smallImageSrc = HashingUtils.ProtectAssetUrl(url + $"?w={newWidth}");
    

With that in place, let's look at the new result.

Hope this helps you improve the speed and efficiency of your pages!