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.