Image optimization for SharePoint Online

The loading speed of a webpage depends on the combined size of all the components required to render the page including images, HTML, JavaScript, and CSS. Images are a great way to make your site more appealing but their size can affect performance. By optimizing your images with compression and resizing, and using sprites, you can offset the effects of very large images. Using SharePoint image renditions, you can upload a single large image, and display sections of the image allowing it to be reused rather than reloaded.

Using sprites to speed up image loading in SharePoint Online

An image sprite contains many smaller images. Using CSS you select a part of the composite image to display on a particular part of the page with absolute positioning. Basically you move a single image around the page instead of loading multiple images and make a small part of that image visible through a small window where the required part of the sprite image is shown to the end user. SharePoint Online uses sprites to display its various icons in the sprite spcommon.png.

What's covered here

  • Image compression

  • Image optimization

  • SharePoint image renditions

Screenshot of spcommon

This can increase performance because you download only one image instead of several and then cache and reuse that image. Even if the image does not remain cached, by having a single image instead of multiple images, this method reduces the total number of HTTP requests to the server which will reduce page loading times. This is really a form of image bundling. This is a very useful technique if the images are not changing very often, for example, icons, as shown in the SharePoint example provided above. You can how to use Web Essentials, a third-party, open-source, community-based project to achieve this easily in Microsoft Visual Studio. For more information, see Minification and bundling in SharePoint Online.

Using image compression and optimization to speed up page loading in SharePoint

Image compression and optimization is about reducing the file size of the images you use on your site. Often, the best technique to reduce the size of an image is to resize the image to the maximum dimensions that it will be viewed on the site. There is no sense in having an image larger than it will ever be viewed. Making sure images are of the correct dimensions using an image editor is a quick and easy way to reduce the size of your page.

Once images are the right size, the next step is to optimize the compression of these images. There are various tools available to use for compression and optimization, including Photo Gallery and third-party tools. The key to compression is to reduce the file size as much as possible without losing any discernible quality for end users. Make sure you test your compressed files on a high-definition display to ensure they will still look good.

Speed up page downloads by using SharePoint image renditions

Image renditions are a feature inSharePoint Online that allows you to serve up different versions of images based on pre-defined image dimensions. This is especially important when there is user-generated image content or the image dimensions such as width and height are fixed by the CSS on the site. Even if an image is fixed by CSS, the full resolution image is still loaded. In this case the file size can be reduced by using image renditions.

Note: Renditions are only available for SharePoint when publishing is enabled. You can enable publishing under Settings > Site Settings > Manage site features > SharePoint Server Publishing. The option will not appear otherwise.

The image rendition resizing works by taking the smallest dimension you define, either width or height, and then resizing the image so that the other dimension is automatically resized based on the locked aspect ratio. By default, it will crop the image from the center by the remaining dimensions. For example, if you define a rendition of 100px wide and 50px high and your original image is 1000px wide and 800px high, it will be resized so that the 800px dimension is now 50px and the 1000px dimension (now 62.5px) is cropped from the center of the image.

The steps are relatively simple but for images to use the renditions, the renditions need to be on the SharePoint site before you add the images. In addition, you also need to have the SharePoint Server Publishing Infrastructure (Site Collection Level) and SharePoint Server Publishing (Site Level) features turned on.

Add an image rendition to speed up page loading
  1. Verify that the user account that is performing this procedure has, at minimum, Design permissions to the top-level site of the site collection, and that the site is being published to a webpage.

  2. In a web browser, go to the top-level site of the publishing site collection.

  3. Choose the Settings icon.

  4. On the Site Settings page, in the Look and Feel section, you will see the built-in image renditions.

    You can use the out of the box renditions or choose Image Renditions to create a new one.

    Screenshot of Image Rendition
  5. On the Image Renditions page, choose Add new item.

    Screenshot of Add New Item
  6. On the New Image Rendition page, in the Name box, enter a name for the rendition.

  7. In the Width and Height text boxes, enter the width and height, in pixels, of the rendition, and then choose Save.

    Screenshot of Image Rendition Name

Custom cropping with image renditions in SharePoint

By default, an image rendition is generated from the center of the image. You can adjust the image rendition for individual images by cropping the portion of the image that you want to use. You can crop the images on an individual basis, per rendition. Cropping the images speeds up page loading by using SharePoint’s blog cache to create a version of the image for each rendition. This way the server load is reduced because the image is only resized once and is then ready to serve to users multiple times. For more information on how to crop an image rendition, see Crop an image rendition.

Share Facebook Facebook Twitter Twitter Email Email

Was this information helpful?

Great! Any other feedback?

How can we improve it?

Thank you for your feedback!