A picture is worth a thousand words. In many situations images help illustrate and explain thoughts. Without images the Web would be boring and colorless. And while we all are convinced about the power of image and how it enhances telling a story, it is surprising how complex it is to get it right on the Web. Many large images on your website make it download and display slowly. No matter how great the content is, the odds are high that your visitor will not take the time to wait for it. Large images is not something specific to SharePoint. Many Content Management Systems suffer from not being able to automatically provide resized images. And while in many cases there are solutions to that, they are either complex, expensive or both. However the great thing with SharePoint 2010 is, that using its extensibility capabilities you can easily change this…
Imagine…
Let’s have a look at an image inserted on a page using the standard functionality provided with SharePoint 2010.
Look all right, doesn’t it? If you however look beneath the hood you should notice the problem:
While the picture displayed on the page is 304px x 254px the original picture is loaded: 1693px x 1413px 280KB. Although you can resize a picture using the standard SharePoint functionality, all it does is, it includes the new size as in-line CSS styles. On each request the original picture is requested and resized by the browser. Including multiple of such pictures on your page increases the overall page size and makes the page load slower as more data has to be loaded by the browser.
You could of course resize the image to get this done correctly. You would first upload the original photo, fit it on the page, note the desired dimensions, open the picture in your favorite image editor, resize it, upload it to SharePoint and finally add it on the page. Can you imagine doing this every time you want to insert an image?
The answer is: you shouldn’t. This is where Mavention Smart Images come really useful.
Mavention Smart Images
Mavention Smart Images is a custom Solution that allows you to replace your original picture with a resized one on-the-fly without any manual work. This makes it really convenient to work with images and allows you to optimize your pages so that they can be loaded faster.
After installing the Solution a new Web Application Feature is installed in your Farm. Activating this Feature will enable support for dynamically resized images.
The next step is to activate the User Interface which will allow you to replace the URL of the original image with the URL of the Smart Image. In order to enable it you have to activate the Mavention Smart Images Site Collection Feature:
After you activate the Site Collection Feature you can start working with your images. As an example let’s optimize our flower image from the homepage.
Working with Mavention Smart Images
If you go to the Edit Mode and select an image, you will notice a new option in the Picture Tools on the Ribbon. The Convert to Smart Image button allows you to replace the original URL of your image with a URL that dynamically generates a resized version of your image.
After you click the Convert to Smart Image button, the image’s address changes into a dynamic URL. For example:
/SiteAssets/orange_flower.jpg
becomes:
/image.png?img=/SiteAssets/orange_flower.jpg&w=304px&h=254px&f=jpg
Let’s have a closer look at the generated URL. The img parameter contains a server-relative URL to the image that you want to resize. The w and h parameters specify respectively the width and height of the resized image. This is very cool since you can specify the new dimensions either absolutely (ie. using both width and height) or relatively by providing either the width or the height. Additionally you can even use percentages to resize the image!
The last parameter called f specifies the output format of the image. Supported formats are png, jpg, jpeg and gif. Depending on your scenario you might want to use different format. The best practice is to check which one of the provides the best quality/size ratio for your image.
So let’s have a look at the results of our work:
Notice the dimensions of the loaded image but also the size: 16KB instead of 280KB. See the difference?!
Summary
Mavention Smart Images is a great solution if you work a lot with images on your SharePoint website. In fact it is something that simplifies your daily work as a content manager on your corporate Internet-facing website. Using Mavention Smart Images you can dynamically resize and optimize your images without any manual work: Make SharePoint work for you!
Download: Mavention Smart Images (11KB, WSP) from CodePlex
October 20th, 2010 at 12:57 pm
Hi,
does it resize the image always on the fly? I'm afraid of the burden it will cause on the web server.
October 20th, 2010 at 3:22 pm
@Jussi: yes, the images are being resized on the fly. While it has some impact on the server, if configured correctly, the server should be able to cache the image once resized.
October 21st, 2010 at 7:25 am
Hi,
by configuring correctly, I guess you mean enabling BlobCache to cache "png" extensions? Have you tried that this really works?
October 24th, 2010 at 12:56 pm
@Jussi: I haven't tried it but it should work. I would expect a dynamically rendered image to be cached both on the server and by the browser on the client machine.
April 19th, 2011 at 6:21 pm
I had a problem of viewing the image after i applied Mavention Smart Images.
I would also like to know if you have a dirrerent version for purchase.
Thank you.
Girum
April 20th, 2011 at 3:50 pm
@Girum: Yes, we have a commercial version of Mavention Smart Images, which includes support. Although the version we offer at the moment is the same as the free version, the support part would give you the possibility to have us look at your specific scenario and solve the issues you are experiencing within reasonable time. Let me know if you are interested and I would be more than glad to help you out.
June 28th, 2011 at 3:53 am
Nice job Waldek!, I´m testing your other products too (from codeplex)
…I would expect a dynamically rendered image to be cached….
Ok, but if the images are generated on fly, how its possible to keep it in cache?
thx
June 28th, 2011 at 6:04 am
@Rootk: I'm not sure if the image will be picked up by the BLOB cache, but in any case it should get cached in the browser on the client machine.
July 27th, 2011 at 9:09 am
Just discovered that generated images are not picked up by the BLOB cache. As for now the images will be regenerated on every request. Another (commercial) version of Smart Images is available which makes Smart Images to be cached in the browser. At the same time we will be working on a new version which hopefully will allow Smart Images to be properly cached in the BLOB cache.
August 4th, 2011 at 12:24 pm
Yes, this is a very nice solution. But I wasn't that happy with the fact it required web.config modifications, so I removed that part and added an ashx file in the _layouts folder.
I've also added a ribbon button to restore the origional image source url.
Once again: nicely done, thanks for sharing!
August 4th, 2011 at 12:39 pm
@Wouter: using an ashx file is definitely an easier way of deploying it. One serious drawback that you should take into consideration is, that you will not be able to store the generated images in the BLOB cache. I described the issue in another article at: http://blog.mastykarz.nl/inconvenient-caching-dynamically-generated-files-blob-cache/.