Configuring Optimizely Azure Blob Storage

Working in web development you are more than likely will come across a conversation at some point around image optimization.

In the world of Optimizely, there are a number of tools / libraries to help with image optimization some of these include:

• Cloudflare - Used when working within the Optimizely DXP, has great built in features for automatically optimizing images.

• Responsive images using imageresizer, for the older .net framework versions of Optimizely. Requires a bit more effort however the output can make a real difference to the sites performance.

• Responsive images CMS 12 using picturerenderer

All these solutions help with image optimization, however none of these will work if we have configured our blob storage setup incorrectly.

In the post I will focus on the last point Optimizely CMS 12 and configuring azure blobstorage provider.

The first thing you need to do it add a connectionstring to your appsettings.json file:

"EPiServerAzureBlobs": "DefaultEndpointsProtocol=https;AccountName=your_account_name;AccountKey=your_account_key;"

Next in the your Startup.cs or where your configure services, you can now configure the azure blobstorage:

services.AddAzureBlobProvider(o =>
        {
            o.ConnectionString = _configuration.GetConnectionString("EPiServerAzureBlobs");
            o.ContainerName = "your_mediafolder";
        });

This is the basic steps needed to configure the azure blobstorage. However we also should configure some image optimization.

There are a number of discussions around the web on how best to perform this and it is still in discussion as we read. One approach that is being used in the Optimizely world, is to use the follow package Baaijte.Optimizely.ImageSharp.Web, this builds upon the SixLabors.ImageSharp library already present in the Optimizely system.

To configure the Baaijte.Optimizely.ImageSharp.Web library perform the following:

Add the following to the configure service in your Startup.cs, as early as possible in the configuration.

services.AddImageSharp()
            .Configure<AzureBlobStorageCacheOptions>(options =>
            {
                options.ConnectionString = _configuration.GetConnectionString("EPiServerAzureBlobs");
                options.ContainerName = "your_mediafolder";
            })
            .ClearProviders()
            .AddProvider<BlobImageProvider>()
            .SetCache<AzureBlobStorageCache>();

Note as part of this you will also need to install the 'SixLabors.ImageSharp.Web.Providers.Azure' package also.

Next you will need to configure the app by adding the following:

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseBaaijteOptimizelyImageSharp();
}

With all the configuration in place now you should now be able to render images from azure blobstorage and also be able to resize them appropriately.

Thanks for reading! Please feel free to comment and share your thoughts.