Image Scaling

With MatchPoint version 4.1.0/5.1.0 we are addressing one of the challenges faced by SharePoint administrators and site visitors: Users uploading huge images. A typical SharePoint based solution needs to deal with this, for a couple of reasons mentioned below. This can be accomplished with the image scaler functionality introduced with the current version of MatchPoint.

Why do we need this?

In MatchPoint Snow for example, we aggregate all pictures using the search service application and display them using tiles which aren't bigger than about 400 x 400 pixels. The images can either be located in a document library or in a picture library. Pictures taken with a decent camera often exceed 5 MB and have a resolution bigger than 5000 x 3000 pixels. The default page size in MatchPoint Snow is 10, which can lead to up to 50 MB being downloaded by each end user. Imagine using a cell phone with a bad connection... Or imagine being abroad and having a limited or expensive data package on the cell phone...

Therefore, we introduced the image scaler functionality that enables developers to render images that are scaled dynamically and cached in-memory on the web front end.

The benefits are obvious: Bandwidth required for transferring images from the server to the client/browser is reduced. This improves network performance for pages affected, especially in mid- to large-size intranets, in extranet scenarios or for mobile access. Moreover, the client browsers are not required to scale big images on-the-fly, which could otherwise lead to unresponsive behavior. MatchPoint achieves this without altering any existing content and without storing any additional, scaled images within SharePoint or the file system.

The MatchPoint implementation differs from a similar SharePoint functionality called "Image Renditions". The standard SharePoint functionality explicitly requires a publishing site collection. On top of that, a "BlobCache" must be specified in the web.config, plus the Image Renditions must be configured for every site collection.

In MatchPoint, we wanted to avoid the above constraints and provide a simple, lightweight approach to solve the challenge of serving scaled images. Please read on to see how this is implemented and how it can be used.

Components

The image scaler functionality is part of MatchPoint. It consists out of following three main components:

  • An HTTP Handler hosted using MatchPoint that scales and caches images based on two URL parameters: One defines the URL of the image, the other defines the desired size.
  • A node in the MatchPointConfiguration.xml specifies a couple of configuration options regarding the caching mechanism. Please see the member descriptors for additional information.
  • The GetScaledImageUrl method on the MPUtility ExpressionVariable is used to return an URL pointing to the scaled image handler with the required parameters (size, image URL).

How to render scaled images

To render images using the scaler functionality the following expression should be used:

MPUtility.GetScaledImageUrl("/Workspaces/WS_01/Pictures/MyImage.jpg", 380)

In the RowTemplate of a PatternTransformer for example you would use something like this:

<img src="{MPUtility.GetScaledImageUrl(DataItem.PictureUrl, 380)}"/>

The GetScaledImageUrl method has following parameters:

  • ImageUrl: The absolute or server relative URL pointing to the image to be scaled. This URL must point to a SharePoint list. Images in the hive and other file system locations are not supported. If such an URL is specified, this method will return the original URL.
  • ImageSize: This value defines the desired minimum size for the shorter edge (i.e. width or height) of the scaled image. The ImageSize parameter does not scale up ("zoom") images.

Following two examples illustrate this behavior:

  • If the ImageSize parameter of 400 is specified for a picture with the original dimensions of 800px x 1000px, the resulting scaled image will be 400px x 500px in size.
  • If the ImageSize parameter of 400 is specified for a picture with the original dimensions of 250px x 350px, no scaling will occur and the original image will be rendered.

Permissions and caching

The cache stores all scaled images by size and URL. Please note that this in-memory cache is located within the app domain of the application pool. This has following implications:

  • There is one cache per web front end
  • This is where the physical memory will be allocated
  • After an iisreset the cache is cleared

To ensure that users will only see existing and up to date images for which they have access, MatchPoint performs some checks before serving images from the cache:

  • We verify the image availability,
  • make sure the cached version is not outdated,
  • and ensure whether the requesting user has permissions to view the item.

If this is not the case, MatchPoint will return the appropriate HTTP status codes (404 Not Found or 403 Forbidden). For other error cases a 500 Internal Server Error will be returned.

As with every cache, there needs to be some kind of cleanup logic. In this case it's simple: Whenever the limit specified for the total cache size (MaxCacheSize) is reached, the least served images from the cache are purged first according to the cleanup rule (CleanupRatio). The Cleanup ratio is enforced on both size and number of items.

Example: MaxCacheSize is set to 500 (MB) and the CleanupRatio is set to 0.2. This means that once the cache size limit is reached, 20% of the cache size (i.e. 100MB) and 20% of the number of files will be removed.

Next to the server side caching the images are also cached by the browser, as is the case with regular images.

Additional Info

  • To disable the cache, specify a MaxCacheSize of 0 in the ImageScalerSettings in the MatchPoint Configuration.
  • To disable the whole image scaler functionality set the IsEnabled flag to false. The GetScaledImageUrl method will the return the original image URL, so no other configuration adjustments are required.
  • As this functionality is intended simply to improve performance, we didn't implement any additional parameters like specifying a specific region to clip, image quality, etc. If this is required, we will consider implementing this for a future version.
  • The image scaler functionality writes detailed logs to ULS if the Log Level is set to Trace. All log entries are prefixed with "ImageScaler:".
  • The out of the box MatchPoint Snow installation makes use of this functionality for following views:
    • Picture overview
    • Workspace overview
    • And for the workspace Logo within the workspace

results matching ""

    No results matching ""