Protiviti / SharePoint Blog

SharePoint Blog

September 10
SharePoint Image Governance

Digital cameras have become an integral part of daily life, putting us all just a click away from capturing that priceless image that we want to share with others. The simplicity of taking digital pictures is a mixed blessing for web sites in general, and in specific for content management systems such as SharePoint. With a few quick steps, content authors can upload an image from their computer to an image library, add it as content to a web page and then happily publish without a second thought to the technical burden they’ve just created for the web site’s performance and for users with more limited bandwidth.

Optimizing Images

Even when authors are aware that the photo they uploaded is significantly larger than they really need on their web page, the ability to re-size the image on the page gives them the impression that the impact of the photo has also been reduced. Unfortunately, even though the amount of space the image consumes is smaller, the file weight of the image remains the same: a significantly larger file than necessary.

Overly large images eat up disk storage space and bandwidth, and they increase the page load time for users. Large images have an even higher impact on mobile devices, where they not only significantly increase refresh rate, but can also aggravate users who are keenly aware that they are paying for the data transfer. For these reasons, it makes good sense to optimize images, a process that reduces the file weight while still maintaining the quality appropriate for displaying on the page.

Adobe Photoshop has excellent image optimization tools and the web is filled with tutorials on how to use them to best balance image quality against file size. For the budget conscious, however, there are also many free image optimization programs such as Gimp or Riot, or even Microsoft Paint.

Creating an Image Governance Policy

The first step toward keeping your SharePoint content images under control is to establish a governance policy that sets guidelines for two basic properties of an image.

Maximum Photo Width: The width of a photo should never exceed the width of the available content areas of your page layouts. If your site’s creative design calls for a maximum width of 900px in the largest content area, then photos for that area should be no more than 900px wide. Size reduction alone will bring down file weight.

Maximum File Weight: The quality of photos can also be adjusted to further reduce file weight. Since some photos require more fine detail than others, you may have several categories of photos with different suggested file weights. For instance, background images or gradient tiles might fall in the 5-10kb range, decorative content photos could be optimized for slightly higher at 40kb-60kb, and special feature photos could be allowed to max out at 100kb.

Monitoring Image Compliance

Ideally, photos should be optimized before being uploaded to your SharePoint image libraries, but that level of control isn’t always practical. Instead, you may have to rely on periodic editorial or technical reviews to identify resource-heavy images that authors have unwittingly added to the site.

One way to easily review images is to create a View in your image libraries that displays the following native SharePoint metadata: Name, Thumbnail Preview, File Size and Picture Size. You can also configure the View to Sort by File Size in Descending order.

CarmenCarter1.PNG
 

Selecting this new view shows which images obviously fall outside of reasonable governance guidelines:

CarmenCarter2.PNG
 

These photos can be downloaded and optimized, then uploaded back into the image library to replace the previous bloated version.

References

Tips for Optimizing Your Web Images
http://www.techrepublic.com/blog/web-designer/tips-for-optimizing-your-web-images/

Speed Up Your Website with Better Image Optimization in Photoshop
http://www.uxbooth.com/articles/speed-up-your-website-with-better-image-optimization-in-photoshop/


 


 


 

Quick Launch


© Protiviti 2020. All rights reserved.   |   Privacy Policy