Resize SharePoint Online image by using the Microsoft Graph APIs

We had our ways to resize images in SharePoint, but the Microsoft Graph APIs seem more suitable

In the past I used SharePoint api to render images in different resolutions and it looked like that.

The resolution param controls the different size and @Stefan Bauer has a nice article how to change the image renditions for SharePoint files, but the Microsoft Graph thumbnail apis seem more suitable to me since utilizing the Microsoft Graph APIs is already the preferred and also recommended approach by Microsoft.

Use the Microsoft Graph APIs get a SharePoint image

We can call Microsoft Graph APIs from within SharePoint calling the /_api/v2.0, so here is how to resize image uploaded to /sites/cfo/SiteAssets/SitePages/About-us/49603-IMG_0404.JPG in a SharePoint site.

Calling the API with content at the end will get the actual image so it can be used in html image tags like:

In case it has to be used with JavaScript, then the /content can be removed and promise will resolve with JSON details about the image. Example with using the fetch api to get the details:

The response will give us the data with information about the image that we can utilize and pass it to other piece of logic. Here is how the response looks:

In case multiple sizes are needed, the /large at the end of the URL can be removed and the response will contain 3 different renditions for small, medium and large.

The Microsoft Graph endpoint can be used as well to execute the query, but the url for the request to be constructed is different.

The same call can be used with the /_api/v2.0 apis of SharePoint if this would be your preference over the first approach I have taken up so the request URL would look like:

How to control the image size and has it in different resolutions

The API documentation has two approaches that can be used. There are predefined size options, but custom thumbnail sizes can be requested as well. Specifying large, small and medium in the request URL will result in fixed predefined resolutions and the URL looks like:

The fixed sizes can be replaced by custom size with the following format /c1920x1080 where the number after the c is width and the number after x is the height. If just the width is important then a big number can be added to the height like /c1920x999999 so the request URL looks like:

Here is a short video of my experiments just to give an overview how it works.

Use the Microsoft Graph APIs get a SharePoint site page thumbnail

Here are the GET requests URLs that can be executed from SharePoint and Microsoft Graph.

Appending /content to the SharePoint calls will give us the image as was mentioned in the above sections. Here is another short video with my experiments:

Use the Microsoft Graph APIs get a SharePoint file thumbnail

Most of the files uploaded to SharePoint document libraries also have thumbnails. No matter if they are Word, PowerPoint or PDF they can have image generated to be used as thumb. Here is a code sniped and short video showing how to do that.

Conclusion

The Microsoft Graph API seems promising and can be used in custom applications to render images in different sizes. This is highly needed when SharePoint custom development is required and most of the development is on the front end.