TIFF fax images, picture libraries, incorrect thumbnail generation, and SharePoint

A welcomed feature of SharePoint is the picture library. This is similar to a document library but rather than storing documents, you can store pictures. You can store pictures in a document library too, you just don't get as rich a UX from it as you can with a picture library. Pictures uploaded to a picture library offer a few new features like slideshow views and auto-thumbnail generation. However, TIFF images sometimes have to be treated a little bit differently and this is where the thumbnail generation fails.

When you upload an image to a picture library two additional images are generated. A thumbnail image that's size down to 160 pixels wide, and a web preview image that's 640 pixels wide. Andy Burns has a good blog entry on where these images are stored and Tech Training Notes has a good entry here on how to fetch this information in say a dataview web part for doing image previews.

The auto-generated thumbnail is a great feature but problems arise when you upload some TIFF files. Recently I put together an image preview for fax images that were being sent to an email-enabled picture library. Knowing that the picture library would generate my thumbnails automatically I leveraged the fact that we could use this to avoid having to write a custom solution to do file manipulation. In addition to their image size, TIFF files can carry a resolution (represented in dpi or dots-per-inch). Most images (by default) are at 96dpi.

You might recognize 96dpi because that's the default resolution that the Windows desktop renders at. This was Microsoft's attempt at achieving device-indpendent programming under Windows by using "device-indepndent units" or the oxymoron definition "device-independent pixels". In any case, 96dpi means that if you draw a one-inch square object then it will be rendered at 96 units high by 96 units wide. When the desktop is configured to run at 96dpi (the default) then that one-inch square will be 96 pixels wide by 96 pixels high.

When a TIFF image is uploaded to a document library, SharePoint kicks off some .NET code (buried in an AutoThumbnailer class in the SharePoint Object Model) and generates those thumbnails for you. It does this by taking the image size and scaling it down as best as possible (I believe it will use the width as the norm and scale it down to 160 and 640 pixels wide for the two preview images and then adjust the height accordingly).

The issue is that the fax images I was dealing with had two different resolutions defined in them. A resolution is the dpi that the image should be rendered at. Remember we said 96dpi rendered on a 96dpi display will be one-inch (or 96 pixels). Most images are built to this resolution by default and also (by default) the horizontal and vertical resolution is the same. Look at a picture on your hard drive in Windows Explorer by right clicking on it and selecting Properties. Click on the Summary tab and you'll see the details then click on the Advanced button (if you're looking at the "Simple" view) and you'll see not only the image size (width and height) but the image resolution (usually by default 96dpi but can be bigger or smaller).

The fax images that I was dealing with had a height of 865 pixels and a width 1728 pixels but a vertical resolution of 98 and a horizontal resolution of 204. This is standard for TIFF images from fax machines (aka TIFF Class "F"). The thumbnails that SharePoint would create were of the matching aspect ratio. The numbers above look funny but using an online aspect ratio calculator like this one, you can see that 1728x865 is indeed the same aspect ratio as 640x320 and 160x80 (the sizes of the thumbnails generated). When the thumbnail images are created they're not taking into consideration resolution, only the size. So 640x320 is correct if the image was created for 96dpi. With a mismatched horizontal/vertical resolution the image is skewed and looks squashed. Clicking on the actual TIFF file in the picture library will launch the Windows Picture and Fax Viewer which adjust the image based on resolution and not dimensions.

There isn't much that can be done to fix this since the thumbnails are already created. There are a couple of solutions, for example building your own event handler to resize images might be an option and there are plenty of image viewers out there that will correctly size things as they work from the original image. If you are building a custom solution just remember to take into consideration the image resoution vs. the screen resolution rather than image size. I'm just considering a custom solution myself to generate the thumbnails (via an event handler) and dropping them into the same named folders ("_t" for thumbnails, "_w" for web previews) which can be attached to a document library and will give you auto-thumbnails for any document library (rather than having to resort to a picture library). If you build your own then adjust the size like this:

int adjustedWidth = screenResolution * (image.Width / image.HorizontalResolution);
int adjustedHeight = screenResolution * (image.Height / image.VerticalResolution);

So to render my original fax images on the Windows desktop (at 96 dpi) here's the results:

width: 96 * (1728 / 204);
height: 96 * (865 / 98)

New image size (properly rendered) is 814 wide by 847 high. That's a more rectangular aspect ratio and matches the original fax (letter size). Now the image can be resized down to a thumbnail and won't be skewed.

Long winded techno-babble post but hopefully that might clear up why your fax images in SharePoint picture libraries are skewed. Enjoy!