Image Renditions available in Modern Team Sites

Yes, you read correctly. The modern team sites got image renditions or at least predefined image formats that will be used by the responsive experience of modern team sites.
Back in the past image renditions was exclusively available in publishing sites only. Well, you were able to use them in team sites too, but the publishing features had to be enabled at site collection level. In addition, classic image renditions might cause negative performance impacts. This was first spotted and documented by Chris O´Brien.
I guess this new feature doesn’t have much to do with the traditional image rendition and you are able to use it in your web part code too. For example, if you like to write a custom image gallery or develop a classic display template.

Access image renditions

To use the predefined image formats you need to access the image through ‘_layouts/15/getpreview.ashx’ page and pass some parameters in the query string. Let’s take a look at those parameters.

guidSite

Is the GUID of the site collection – without curly brackets
Example: guidSite=286f51d4-4ba3-4a13-9b41-4867c486321e
In Javascript, simply use the _spPageContextInfo.siteId and remove the curly brackets.

Request siteID via _spPageContextInfo

guidWeb

Is the GUID of the current web – without curly brackets
Example: guidWeb=d565a2b4-0247-4908-8ed3-e9f880970e0a
In Javascript, simply use the _spPageContextInfo.webId and remove the curly brackets.

Request webid via _spPageContextInfo

fileGuid

In SharePoint every list item and document have their own GUID assigned. The GUID of the image is needed to query the image. For example, you can request the GUID for the first item in site assets throughout the following REST request.

Example: guidFile=8b74c5d5-609a-463d-9c7d-33233d0c8425

clientType

This simply indicates that you use it in a modern web part.
Example: clientType=modernWebPart

Resolutions

Last but not least the resolution you like to get. This is defined by a numeric value ranging from 0 to 6

Available Resolutions

So what resolutions are available. The following list I figured out through trial an error. All of those have a fixed width and a dynamic height set. So if you have a really long portrait oriented image the image returned will be pretty long too.

  • resolution=0: 300px
  • resolution=1: 480px
  • resolution=2: 750px
  • resolution=3: 1024px
  • resolution=4: 1600px
  • resolution=5: 2560px
  • resolution=6: 4928px – Original file size

Expectable that those resolutions matches media queries of responsive design:

  • Resolution 0: Mobile Portrait
  • Resolution 1: Mobile Landscape
  • Resolution 2: Tablet Portrait
  • Resolution 3: Tablet Landscape
  • Resolution 4,5,6: Desktop

Finally, request an image

After adding all those parameters to the ‘_layouts/15/getpreview.ashx’ you will get the image your desired format.
The complete url looks then like this:

Whenever you have the need to embed an image in your SPFX web part I would recommend to use this new method instead of image renditions. It seems to be more future oriented.
I also tried to use the url to an image rendition on a classic publishing page. I got a message that this url doesn’t seem to be valid, but in the end was able to embed the image correctly.
Even if you still use the old user experience on Office 365, you should consider to use this new way of retrieving pictures from SharePoint.

In future it would be great to make these renditions configurable too because sometimes you need an image with a fixed height rather then a fixed width from a web designer point of view.

Important Update

By the way: The new SharePoint Framework now reach the general availability state
I
f you already have web parts built with SPFx please make sure to check out the GA Release notes too.

  • David Hartman

    I’m running into an issue using this method on a Picture Library … have you run into this before?

  • D’arce Hess

    I think it’s a great use case. One question I have is that since there is no interface for a user to select what the rendition should look like as you could in classic, we run the risk of some very interesting crops. Have you come across this?

    • Sadly yes. This might lead to some really interesting crops. Haven’t found any documentation yet that tells you how to manage the perfect crop.
      From my point of view there are many things missing of features.