What is Image Rendition?

Definition: Image rendition is the feature in SharePoint, which can be used to create multiple instances of the same image with different dimensions (Height and Width).

Some points:

  • This feature is only available with Publishing SharePoint Site or SharePoint site with Publishing feature enabled.
  • If BLOB is not enabled, we cannot access Image Renditions.
  • To enable Blob Cache, Go to Web.config file of web application >> Search for “> Set attribute “enabled” to “true”.
  • Image Renditions can be created from Site Settings >> Look and Feel >> Image Renditions.
  • By default, there are some renditions created. You can modify or create new renditions by specifying Name, height and width.
  • After setting different renditions, you can upload images to Asset Library.
  • To find out different renditions of uploaded image, go to Asset Library where you have uploaded image >> click on menu/ellipsis (...) of the image >> click on Edit Renditions. You will be able to see all the renditions of that image.

How to use Rendition images:

One way:

  • Create a web part page and add a content editor web part in it.
  • Add Image using ribbon tool bar >> Select uploaded image, click on “Pick Rendition” from Ribbon >> Select the rendition you want to use or you can crop the image by clicking on last option - “Edit Renditions”.

Second way:

You can specify image rendition by either RenditionID or Width or Height parameter directly in image url like mentioned below.

  • Using RenditionId:

<img src=""/sites/testSite/Assets/space.jpg?RenditionID=5"" />

  • Using Width AND Height: If there are multiple renditions with same width or height, it is advisable to use both parameters in image url to specify the image

<img src=""/sites/testSite/Assets/space.jpg?Width=700&Height=300"" />

  • Using Width: we can use width as only parameter in image url if there is no any other rendition with same width

<img src=""/sites/testSite/Assets/space.jpg?Width=700"" />

  • Using Height: we can use height as only parameter in image url if there is no any other rendition with same height

<img src=""/sites/testSite/Assets/space.jpg?Height=300"" />

NOTE: If all the three parameters - RenditionId, Width and Height are specified in image url, then image will be picked by Rendition ID.

© 2019 Code SharePoint