yeah, this makes sense 100%, thanks Marc!

I want to add - I'm using Azure with Akamai CDN (because at the time of writing of this post Verizon doesn't gzip anything more than 1MB)

And then I would have URL with with and height cropping for imageprocessor, however there Azure CDN would cache only 1 image per url with querystring.

So you have to change the setting to cache each version different by querystring - Cache every unique URL

More about it you can read here https://docs.microsoft.com/en-us/azure/cdn/cdn-query-string

Hi Vojtěch,

Are you able to share your configuration for this please? (web.config, cache.config and security.config)

I am also using Umbraco 8 but I noticed on your website all of your images are coming directly from your CDN url with a direct 200 get and not with a 302/200 request.

Are you using the AzureBlobCache plugin for this? I have tried replicating the behaviour of your website and there is a setting for "StreamCacheImage" but when turning this to true my images are loading from http://mywebsite.com/media/ and are very slow. When using this to false I am getting first a 302 request then 200 get to my CDN url. This is somewhat faster but still slower than my previous site.

I was previously using the package AzureCDNToolkit to get the CDN link directly with GetCropCdnURL. This was very fast but the package is no longer supported on Umbraco8. Please let me know how you have accomplished this to get the CDN cache url of images directly, thanks!

Hello,

here is my other post about it

https://our.umbraco.com/forum/using-umbraco-and-getting-started/98364-compression-of-generated-images-via-remote-service

I ended up ditching azureStorageCache - because of the redirect. The way it works now it's the CDN domain (https://duckferries-web-prod.azureedge.net) is proxy is pointed to the WWW domain (https://www.duckferries.com). That way if the image is not present in the CDN you hit your webserver with ImageProcessor pipeline. You have to configure CDN to register the querystring to make it work.. That in my mentioned post above..

Here are my configs.

CacheConfig

<?xml version="1.0" encoding="utf-8"?>
<caching currentCache="DiskCache">
  <caches>
    <cache name="DiskCache" type="ImageProcessor.Web.Caching.DiskCache, ImageProcessor.Web" maxDays="365" memoryMaxMinutes="1" browserMaxDays="7">
      <settings>
        <setting key="VirtualCachePath" value="~/app_data/cache" />
      </settings>
    </cache>
  </caches>
</caching>

here is security config.

<?xml version="1.0" encoding="utf-8"?>
<security>
  <services>
    <!--<service name="LocalFileImageService" type="ImageProcessor.Web.Services.LocalFileImageService, ImageProcessor.Web" />-->
    <!--Disable the LocalFileImageService and enable this one when using virtual paths. -->
    <service prefix="media/" name="CloudImageService" type="ImageProcessor.Web.Services.CloudImageService, ImageProcessor.Web">
      <settings>
        <setting key="Container" value="umb-media" />
        <setting key="MaxBytes" value="8194304" />
        <setting key="Timeout" value="30000" />
        <setting key="Host" value="https://xxx.azureedge.net/" />
      </settings>
    </service>
    <service prefix="remote.axd" name="RemoteImageService" type="ImageProcessor.Web.Services.RemoteImageService, ImageProcessor.Web">
      <settings>
        <setting key="MaxBytes" value="4194304" />
        <setting key="Timeout" value="3000" />
        <setting key="Protocol" value="http" />
      </settings>
      <whitelist>
      </whitelist>
    </service>
  </services>
</security>

And here is my CDN creating URL helper method

    public static class CdnUrl
    {
        public static IHtmlString GetCdnUrl(this UrlHelper urlHelper,
            IPublishedContent mediaItem,
            int? width = null,
            int? height = null,
            string propertyAlias = Umbraco.Core.Constants.Conventions.Media.File,
            string cropAlias = null,
            int? quality = null,
            ImageCropMode? imageCropMode = null,
            ImageCropAnchor? imageCropAnchor = null,
            bool preferFocalPoint = false,
            bool useCropDimensions = false,
            string furtherOptions = null,
            ImageCropRatioMode? ratioMode = null,
            bool upScale = true,
            bool htmlEncode = true)
        {    

            var url = Configuration.CdnEndpoint +
                      urlHelper.GetCropUrl(mediaItem, width, height, propertyAlias, cropAlias, quality, imageCropMode,
                          imageCropAnchor, preferFocalPoint, useCropDimensions, false, furtherOptions, ratioMode,
                          upScale, htmlEncode);    

            return new HtmlString(url);
        }
    }

The important thing is CdnEndpoint which is ConfigurationManager.AppSettings["mediaCdnEndpoint"]

which is my CDN proxy to WWW on Azure..

Than its uses like this

 <meta property="og:image" content="@CdnUrl.GetCdnUrl(Url, content.CoverImage, width: 800, height: 800, quality: 80)" />

And that's it I guess, ping me if need more information..

Hi Planx42

Key thing is to make sure in your html you are requesting the image first via the CDN

<img src="https://cdn.mydomain.com/media/someimage.jpg?width=40" />

and the CDN is then setup, if the image doesn't exist in the CDN to request it from your site via the /media folder (including querystrings), which then enables ImageProcessor to do it's thing, and return the processed image from it's image processing cache

By default this will be via a 302 redirect but with

 <setting key="StreamCachedImage" value="true"/>

the image should be streamed back to the CDN, so future requests do not involve a redirect, or any request to the umbraco site and are served directly from the CDN.

(this is different to how you would work with the AzureCDNToolkit, where you'd be trying to get the CDN url before rendering the page)

regards

Marc

Hi Vojtěch,

Thanks very much, it is working great! I was able to take your example code and added a key in my web.config for my CDN root. My endpoint is now pointing to the website root instead of Blob Storage account. Now the images are loading much faster than the delay I was getting for each image request. Very much appreciate the suggestions and example!

Thanks Marc appreciate the description of how this can be setup to work with AzureBlobCache better and I will try that also.

is working on a reply...