SharePoint Picture Libraries offer an out-of-box feature for image compression and optimization, specially when working with thumbnails. After uploading an image to a Picture Library, you will be able to get an optimized version and thumb version just calling the same image using an specific URL pattern. In this blog post we cover a simple JavaScript function that lets you get picture thumbnail URL programmatically in SharePoint.

First, it’s important to say what is a thumbnail! According to Wikipedia, “Thumbnails are reduced-size versions of pictures or videos, used to help in recognizing and organizing them, serving the same role for images as a normal text index does for words”.

It’s extremely useful when you need to develop a custom web part to present an image inside a Library and you want to save bandwidth for your users at the same time that your site has better performance too. Working with the thumbnail version of your images will let SharePoint handle cache and performance in a more efficient way, making your system more reliable and faster.

So how to get the picture thumbnail URL programmatically in SharePoint?

Generating the thumbnail URL

Explanation of thumbnail URL feature in SharePoint

Basically it works transforming a given string in another one that respects the pattern required to generate the URL. You just need to pass an image URL that is stored inside a Picture Library. It will transform an URL like the example below and you can get thumbnail URL programmatically in SharePoint:

• Original URL: https://wiliammbr.sharepoint.com/PictureLibraryImages/image-example.png
• Thumbnail: https://wiliammbr.sharepoint.com/PictureLibraryImages/_t/image-example_png.jpg
• Optimized: https://wiliammbr.sharepoint.com/PictureLibraryImages/_w/image-example_png.jpg

In addition to that, if you are working with images you may end up facing some problems with Image Renditions. Maybe this post is for you!

References:
StackOverflow