Image Optimization
The loading speed of a web page is based on the size of all the components required to render the page including images, HTML, JavaScript, and CSS. By optimizing the images with compression and resizing, we can offset the effects of very large images and increase the performance. Image rendition in SharePoint is a capability which helps to optimize images in a site by having the same image but in different sizes. This will enhance the user experience as well when browsing the site from different devices.
There are scenarios we can use Azure blob storage to store images and retrieve them from there. In such a situation, the developers have to implement a custom solution to handle the image rendition for Azure images.
Options to implement an Image Resizer
1. Using Nuget package
A Nuget package
is available called ‘Image Resizer’, which is an open source ASP.NET library
that handles the image processing dynamically. Based on the parameters defined
in the URL, it will handle the image transformation and provide the resized
version of the image in run time.
For
example: If the image source url is
defined as <ImageUrl>? width=108&height=70, this will return the
resized image for given dimensions.
Steps to follow:
1. Create an Asp.Net web application and install
all the NuGet packages for Image Resizer and Azure plugins.
2. Configure the application to connect to Blob
storage as an image processing platform.
3. Create a new Azure Web App to deploy the
solution.
4. Publish the application to Azure Web App.
2. Azure Blob Trigger Function
Create an Azure
Blob Trigger Function/Web job which will be executed whenever a new image is
added to the blob storage and handle the resizing of the image in the
background. The result image with the reduced size can be saved to a different
container with the same name.
There are some
extensions available for Asp.Net and Azure:
ImageProcessor.Web
ImageResizer.WebConfig
No comments:
Post a Comment