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.

https://{my-tenant}.sharepoint.com/sites/{my-site}/_layouts/15/getpreview.ashx?guidSite={site-id}&guidWeb={web-id}&guidFile={file-uniqueId}&resolution=2

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 //www.sharepointeurope.com/sites/cfo/SiteAssets/SitePages/About-us/49603-IMG_0404.JPG in a SharePoint site.

https://velingeorgiev.sharepoint.com/_api/v2.0/sharePoint:/sites/cfo/SiteAssets/SitePages/About-us/49603-IMG_0404.JPG:/driveItem/thumbnails/0/large/content?preferNoRedirect=true

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

<img https://velingeorgiev.sharepoint.com/_api/v2.0/sharePoint:/sites/cfo/SiteAssets/SitePages/About-us/49603-IMG_0404.JPG:/driveItem/thumbnails/0/large/content?preferNoRedirect=true" alt="Grapefruit slice atop a pile of other slices" />

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:

fetch("https://velingeorgiev.sharepoint.com/_api/v2.0/sharePoint:/sites/cfo/SiteAssets/SitePages/About-us/49603-IMG_0404.JPG:/driveItem/thumbnails/0/large", {
 method: "GET",
 headers: {
 "Content-Type": "application/json",
 "Accept": "application/json"
 }
})
 .then((response) => {
 return response.json();
 })
 .then((json) => {
 // do something with the value
 });

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:

{
 "@odata.context": "https://velingeorgiev.sharepoint.com/_api/v2.0/$metadata#oneDrive.thumbnail",
 "height": 533,
 "url": "https://westeurope1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=JPG&cs=fFNQTw&correlationId=5d56e69e-f0ce-0000-af1c-98e8d52c52dd&docid=https%3A%2F%2Fvelingeorgiev%2Esharepoint%2Ecom%2F%5Fapi%2Fv2%2E0%2Fdrives%2Fb%21DZT8YEBxcEudMJrjzj6UfxP52HwrbHdNoNG63eFjSQfFQS3GbBAWQpXM9sDzO5Uo%2Fitems%2F01NOIMHAK6T3QKGN6V6BE2ADFRTIBJPSSA%3Ftempauth%3DeyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0%2EeyJhdWQiOi..%26version%3DPublished&width=800&height=800",
 "width": 800
}

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.

// https://graph.microsoft.com/v1.0/sites/{site-id}/lists/{list-id}/items/{item-id}/driveItem/thumbnails/0/large

https://graph.microsoft.com/v1.0/sites/velingeorgiev.sharepoint.com,60fc940d-7140-4b70-9d30-9ae3ce3e947f,7cd8f913-6c2b-4d77-a0d1-badde1634907/lists/4a909813-d3f1-4cf7-9401-1283ae06a420/items/2/driveItem/thumbnails/0/large

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:

https://velingeorgiev.sharepoint.com/_api/v2.0/sites/velingeorgiev.sharepoint.com,60fc940d-7140-4b70-9d30-9ae3ce3e947f,7cd8f913-6c2b-4d77-a0d1-badde1634907/lists/4a909813-d3f1-4cf7-9401-1283ae06a420/items/2/driveItem/thumbnails/0/large 

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:

https://velingeorgiev.sharepoint.com/_api/v2.0/sharePoint:/sites/cfo/SiteAssets/SitePages/About-us/49603-IMG_0404.JPG:/driveItem/thumbnails/0/large/content

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:

https://velingeorgiev.sharepoint.com/_api/v2.0/sharePoint:/sites/cfo/SiteAssets/SitePages/About-us/49603-IMG_0404.JPG:/driveItem/thumbnails/0/c1920x999999/content

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.

// Get image from within SharePoint with fixed small size

https://velingeorgiev.sharepoint.com/_api/v2.0/sharePoint:/sites/cfo/SitePages/About-us.aspx:/driveItem/thumbnails/0/small

// The same image from within SharePoint with custom size of 1024x768

https://velingeorgiev.sharepoint.com/_api/v2.0/sharePoint:/sites/cfo/SitePages/About-us.aspx:/driveItem/thumbnails/0/c1024x768

// The same image from the Microsoft Graph with fixed large size

https://graph.microsoft.com/v1.0/sites/velingeorgiev.sharepoint.com:/sites/cfo:/lists/da468955-6faf-45fe-9d90-c48046015fb0/items/1/driveItem/thumbnails/0/large

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.

// Get Word document from within SharePoint with fixed small size

https://velingeorgiev.sharepoint.com/_api/v2.0/sharePoint:/sites/cfo/Shared%20Documents/TestDocument.docx/:/driveItem/thumbnails/0/small/content?preferNoRedirect=true

// Get Word document from the Microsoft Graph endpoint with fixed large size

https://graph.microsoft.com/v1.0/sites/velingeorgiev.sharepoint.com:/sites/cfo:/lists/da468955-6faf-45fe-9d90-c48046015fb0/items/1/driveItem/thu

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.

This blog is part of SharePoint Week. For more great content, click here

About the Author:

Cloud Architect with hands on code

I have 10 years of planning, design and development using

  1. Microsoft 365 mostly SharePoint
  2. Microsoft Azure App Development
  3. Nodejs and Reactjs
  4. .NET Framework and .NET Core

Member of Microsoft 365 Patterns and Practices (PnP) team

Microsoft Most Valuable Professional (Microsoft MVP)

Maintainer of CLI for Microsoft 365

Reference:

Georgiev, G. (2021). SharePoint Framework performance optimization list. Available at: https://blog.velingeorgiev.com/sharepoint-framework-performance-optimization [Accessed: 13th September 2021].

Share this on...

Rate this Post:

Share: