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.
Is the GUID of the site collection – without curly brackets
Is the GUID of the current web – without curly brackets
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.
This simply indicates that you use it in a modern web part.
Last but not least the resolution you like to get. This is defined by a numeric value ranging from 0 to 6
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.
By the way: The new SharePoint Framework now reach the general availability state
If you already have web parts built with SPFx please make sure to check out the GA Release notes too.