When loading Web pages, pictures are most often a performance laggard. SharePoint picture libraries have a nice feature that can help you here: every time you upload a picture, SharePoint actually stores 3 files: the original picture, a version optimized for the Web, and a thumbnail.

A classic trap

You’ll often see that in order to create a thumbnail, people just take the original picture and force its dimensions. For example:

<img src=”MyPicture.jpg” width=”60px” height=”40px” />

Sure, the result looks like a thumbnail. But still, the browser has actually downloaded the full size picture.

Where SharePoint helps

Let’s take an example. Here is the URL of a picture that has a full size of 405 kb:
http://www.pathtosharepoint.com/PhotoVideo/LiJiang/IMG_0496.JPG

I have uploaded it to a picture library called PhotoVideo. Automatically SharePoint has generated two more pictures:
– a Web friendly picture of 52 kb, 8 times smaller than the original picture:
http://www.pathtosharepoint.com/PhotoVideo/LiJiang/_w/IMG_0496_JPG.jpg
– a thumbnail: 5 kb, 80 times smaller than the original picture:
http://www.pathtosharepoint.com/PhotoVideo/LiJiang/_t/IMG_0496_JPG.jpg

So how does it work? Well, if you upload a picture called CutePic.jpg to a picture library called PictureLibrary, then:
– you can find the thumbnail ïn the “_t” folder: PictureLibrary/_t/CutePic_jpg.jpg
– the Web copy will be in the “_w” folder: PictureLibrary/_w/CutePic_jpg.jpg

As for OtherCutePic.png:
– thumbnail: PictureLibrary/_t/OtherCutePic_png.jpg
– Web copy: PictureLibrary/_w/OtherCutePic_png.jpg

How to automate the retrieval of Web formats and thumbnails?

Let’s assume you have a picture library, and for any given picture you want a script to generate the URL of the derived image – Web optimized or thumbnail. It turns out that SharePoint already has a function for this:

function CreateDerivedImageUrl(originalImageUrl, subdirStr)
{
	var url=originalImageUrl.replace(/\.([^\.]+)$/, "_$1");
	url=url+".jpg";
	url=url.replace(/\/([^\/]+)$/, subdirStr+"$1");
	return url;
}

originalImageUrl is the URL of the full size picture; subdirStr will take the values “/_t/” for thumbnail or “/_w/” for Web preview.

I am using a similar script for my Image Rotator.

How about XSLT, for example if you want to include thumbnails in a Data View Web Part? The expression below is taken from a comment by Drasko (in this post, on novoculus.com) :
{@FileDirRef}/_t/{concat(substring-before(@FileLeafRef,concat(’.’,@FileType)),’_’,@FileType,’.’,@FileType)}
 For Web previews, simply replace _t with _w.

So, do your site visitors a favor: save them time by taking advantage of SharePoint’s Web friendly formats!