Approach to image optimisation

[robertocarroll]

What approaches can we take to make the experience as good as possible for users on different (esp poor) connections?

This point has emerged in particular around the In the field slideshow on the situation layout #56 , but it is a wider issue. Things that come to mind:

• Lazyloading slideshow images - so only the first image is loading until the user interacts with the slideshow.
• Responsive image solutions - what kind of approaches are built in to Sharepoint 2013?
• Editing - ensure the image is a optimised as possible (tinypng, etc) and not putting too many images in the slideshow (< 7?)

It would be great to hear what you think.

[kyleschaeffer]

Hi, Rob. Good questions, and certainly a worthy concern. If we can enable the "blob cache" feature within the SharePoint environment, we can make use of "Image Renditions" to ensure our images are optimized and in the smallest file size possible. This way, content authors can upload a huge (non-optimized) image, and we can use an automatically-generated thumbnail within our templates by simply appending "?Rending=5" to the end of the image file URL. This is under the assumption that these images will be stored and hosted within SharePoint.

SharePoint doesn't have any responsive image solutions we can implement server-side, so that would have to be a customization we can write into the system, or we would have to use a client-side approach (many of which exist, but they generally have some accessibility issues).

Lazy-loading images is certainly an option, and probably one we want to use for any slideshows and image-heavy content that we create.

[simmigaba]

This issue is taken care as part of AV Gallery project implementation hence closing this issue here. To give details the BLOB cache feature is enabled in SharePoint for Public beta website. And 4 new Image renditions are defined - Thumbnail, Large Thumbnail, Medium View and Large View. An image rendition defines the dimensions that are used to display images in SharePoint publishing sites. Image renditions enable you to display differently sized versions of an image on different pages in a publishing site, based on the same source image. When you create an image rendition, you specify the width and/or height for all images that use that image rendition. The image renditions are available for every image that is uploaded to a library in that site collection. For example, designers can create an image rendition to display thumbnail images and another image rendition to display banner images. When an image is added to a page, the author can specify the image rendition to use on that image. Image renditions enable you to render a single image in multiple ways. An image can be displayed in various sizes. The first time that an image is requested, SharePoint Server uses the specified image rendition to generate the image. When a user views a SharePoint site, the correctly sized version of the image is downloaded to the client computer. This reduces the size of the file that is downloaded to the client, which improves site performance. The disk-based BLOB cache controls the caching for binary large objects (BLOBs), such as frequently used image, audio, and video files, and other files that are used to display webpages, such as .css files and .js files.