Usage of SharePoint Image Renditions in Display Templates

20 december 2018

The SharePoint online intranet of a Dutch company had performance issues. It took way too long to load certain pages. In a Microsoft Teams meeting I could take a look at the specific pages and the code via the Developer Toolbar of this intranet. It was clear that it were the news overview pages that caused the performance issues. And after diving in the html code of these pages I found out that for every thumbnail the complete full-blown uploaded picture was used.

The customer granted me access to their environment so I could fix this.

Image Renditions

First create another Image Rendition with the right dimensions. Image Renditions are different versions with different dimensions of an image that are automatically created when you upload an image in a SharePoint Library.
Via Site settings - Image Renditions I created an extra Image Rendition width the right dimensions.
It gets automatically an ID, in this case 5. We will use this ID in our Display Template.

image renditions

Display Template

Than check on the specific page which display template the search webpart uses. Download and change this Display Template (via Site settings – Master pages and page layouts – Display Templates).
I looked for the code where the image is set:

<img src="_#= imgtag =#_"/>

So the variable that is used is ‘imgtag'

Then I changed this variable from:

var pictureURL = $getItemValue(ctx, "Picture URL");
var imgtag = pictureURL;


var pictureURL = $getItemValue(ctx, "Picture URL");
var imgtag = pictureURL + "?RenditionID=5";

Upload en check-in the file and from now on this overview uses the much smaller image.
In this example a specific image is 3,93MB in the original format and 46kb in the rendition format.
Imagine an overview page with more than 50 news items and the difference in page load between these two scenarios!

If you would like to know more about this subject please contact me.


Submit a comment