Sitecore Performance Part 2: Control Image Dimensions Explicitly

It is not uncommon to see images requested from Sitecore without size parameters. This works fine if the Media Item has the same dimensions as the location on page. What happens when a content author uploads an image that is the wrong size?

There are several remedies to uncontrolled image size, and ideally they would all be implemented to provide “defense in depth.” Let’s go through them:

Ensure that the CSS and markup will force the image to a visible size that won’t break the page.

At its most basic, this means using the height & width attributes on the <img/> tag. In CSS there’s the width, height, max-width and max-height properties. In HTML5 we’ve got the “srcset” attribute and the <picture/> tag.

If your project involves responsive design, it is likely that your front-end developers are already doing these things, but it’s good to check it off the list.

Ensure that all Sitecore-hosted images are requested with appropriate constraining dimensions.

Sitecore Image Parameters can be used in the querystring of a media URL. Like CSS there is a concept of width, height, max-width and max-height. The difference here is that the image is resized by the CMS before being placed on the wire, saving bandwidth by shipping the smallest image for the available space. Caching of the modified image ensures that the next request with the same parameters will not require resizing the image stored in the database.

There are a few things to keep in mind when using Image Parameters:

  • Supplying both a width and a height constraint will alter the aspect ratio of the original image.
  • If you’ve supplied the “allow stretch” (as=1) parameter, the image will fill the specified rectangle, stretching and possibly distorting the image.
  • Without allowing stretch, the image may “letterbox”, filling the deficient dimension with black bars on either side of the original image. (the color of the bars can be supplied as the “bc” querystring parameter)

Supply help text on all Image fields to provide users with image size guidance.

Many agencies provide a style guide as part of a new website’s deliverables. Aside from color palette and photography subject guidance, they often contain important information about image aspect ratios and sizes on page.

Sitecore allows you to embed these key facts right into the content editor. To add dimensional help text to image fields:

  • Navigate to the field definition in the Templates section of the Content Tree.
  • With the field definition selected on the tree, Choose the Configure Tab and select “Help Texts”

  • Despite what the dialog tells you, the short help text appears next to the field name in the content editor, or in any Custom Experience buttons provided in Page Editor. The long text appears on hover.

  • OK the changes in the Help Texts dialog and preview the changes by selecting the Template’s Standard Values Item.

At this point, I would recommend supplying an FPO image as the default value, which helps Page Editor produce something that looks like a complete page design while visually indicating to the Author that they need to select the actual image to use on page.

Image Size Validation by Field

Like any good CMS, Sitecore allows you to check content values to ensure they’re within parameters. Sadly, they don’t supply one for checking image dimensions on an image field.

Creating a custom validator for image dimensions is a popular blogging topic among Sitecore MVPs and is straightforward to implement. I’ve chosen Thomas Lin’s solution because it is short and to the point. The code is available here. You can have Sitecore validate the width, height, or both. I might suggest adding a check for file size, which would assist in identifying images that need optimization, which is the next topic in our series that you can read here.

One thought on “Sitecore Performance Part 2: Control Image Dimensions Explicitly

Have Something to Say?

Your email address will not be published. Required fields are marked *

two × five =

Recent Posts

Recent Comments