Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Per Bolmstedt 9 posts 99 karma points
    1 week ago
    Per Bolmstedt
    0

    Image CDN & dynamic crops

    Is anyone using Azure CDN (or another CDN) & dynamic crops, i.e. requesting specific crops when requesting an image?

    We are planning a web site around dynamic crops (aka custom crops) like this:

    <img src="@Model.Image.GetCropUrl(height: 300, width: 400)" />
    

    But I'm having a hard time figuring out how to combine this with an Azure CDN on top of an Azure BLOb Storage container.

    We normally use the Azure BLOb Storage File System Provider and have the media served from public BLOb Storage URLs. But this only works for normal media, or pre-rendered crops of some sort.

    If we serve media via Umbraco, i.e. using https://web.site/media/x/image.png?cropSettings as image URLs, then dynamic crops would work. But this takes a CDN out of the equation.

    Using Azure CDN on a Storage container (or using public BLOb Storage container URLs) means all crops would have to be pre-rendered somehow.

    Or would we have to use an Azure CDN that works as a reverse proxy and pulls media from the web site using the normal web site crop URL? I.e. not a CDN that extends an existing BLOb Storage container.

    Or is there some other way to go about this?

  • Marc Goodson 1350 posts 9103 karma points MVP 5x c-trib
    1 week ago
    Marc Goodson
    1

    Hi Per

    Yes, normally the Azure CDN is setup to have it's source point to the media folder of the website.

    You update all your requests for images in your templates to be prefixed by the CDN domain

    <img src="https://cdn.mydomain.com/media/223232/fish.jpg?width=150" />
    

    If the image has been processed before, it's already in the CDN and that is what's returned, the website doesn't ever receive the image request, the CDN is doing it's job!

    If the image isn't in the CDN then the CDN will request it from the website (make sure to set the Azure CDN to cache each querystring uniquely, otherwise the first crop request will be used for all subsequent requests for that image)

    When the request comes in from the CDN to the website, then Image Processor handles the request, and if the site is configured to use blob storage that's where the image will be retrieved from - with the default configuration in place, Image processor will perform a redirect to wherever it's configured to store it's cache of processed images (usually also in blob storage) and returns the image, which the CDN then remembers for future requests.

    There is a config setting for Image Processor in /config/imageprocessor/cache.config called StreamCachedImage, if you set this to true, then you avoid the default redirect hop, which is unnecessary now your using a CDN

    https://imageprocessor.org/imageprocessor-web/plugins/azure-blob-cache/#config

    That's the gist of it anyhow!

    Regards

    Marc

  • Per Bolmstedt 9 posts 99 karma points
    1 week ago
    Per Bolmstedt
    0

    Thank you.

    So, essentially,

    • don't use Storage as an origin type
    • use the web site itself as the origin
    • serve all media through Umbraco
    • cache each full URL (including query string) separately

    From preliminary testing it seems to work right out of the box for e.g.

    https://x.azureedge.net/y/image.png?mode=crop&height=100&width=100&rnd=123&format=jpg
    

    Good stuff!

    However, I don't understand the redirect part. I'm not seeing any redirects, neither from https://web.site/media/x/y.png?cropSettings nor from the CDN endpoint. Can you elaborate?

  • Marc Goodson 1350 posts 9103 karma points MVP 5x c-trib
    1 week ago
    Marc Goodson
    1

    Hi Per

    There is a good explanation on the issue which I think led to the stream cached image being added...

    https://github.com/JimBobSquarePants/ImageProcessor/issues/178

    That hopefully explains it a bit better than me!

    Regards

    Marc

  • Per Bolmstedt 9 posts 99 karma points
    1 week ago
    Per Bolmstedt
    0

    I see.

    We don't use the Azure BLOb Storage Cache, we use the ootb AppData cache, which means no redirects are made. So our current setup seems sufficient.

    And seeing that the entire ImageProcessor is deprecated (and most likely won't be in Unicore, I suppose) it looks like we don't want to configure it more than necessary. So we'll probably leave the ImageProcessor cache at the default AppData setting and only store actual media in Azure BLOb Storage.

    Or is there a reason why using AppData as ImageProcessor cache while using Azure BLOb Storage for media would be undesirable?

  • Marc Goodson 1350 posts 9103 karma points MVP 5x c-trib
    7 days ago
    Marc Goodson
    1

    Hi Per

    I think there will be plans to use ImageSharp in the .net core version of Umbraco, and so it will be a similar experience, but also that's over a year away!

    But yes, if you are not putting your Image Processor cache in blob storage then that's why you are not seeing the redirect I was talking glibly about needing to handle!

    The only thing to consider with having the cache stored in Appdata is how big it grows too, which will depend on your site, and how many images etc, and how often it's purged etc - I've had the cache eat up server resources before and take a site down - so I tend to always put the cache also in blob storage... but it's not a must-do if that's an unlikely situation in your circumstances...

    regards

    Marc

  • Per Bolmstedt 9 posts 99 karma points
    7 days ago
    Per Bolmstedt
    0

    Thanks for the heads-up. No glibbity, I assure you.

    I'll do some experimenting with using Azure BLOb Storage as an ImageProcessor cache, and configuring it to stream cached files instead of redirecting!

    Also, it sounds like there are some "best practices" here. Let's hope this forum thread can serve as inspiration to others, for want of a proper best practice knowledge base.

  • Marc Goodson 1350 posts 9103 karma points MVP 5x c-trib
    7 days ago
    Marc Goodson
    0

    Hi Per

    (Yes this kind of is the knowledge base :-P)

    But the documentation accepts PRs!

    https://github.com/umbraco/UmbracoDocs

    could put together an Azure CDN guide?

    But the question is 'where would you expect to find it?' maybe here perhaps?

    https://our.umbraco.com/Documentation/Extending/FileSystemProviders/Azure-Blob-Storage/

    it's certainly a common enough query.

    regards

    Marc

Please Sign in or register to post replies

Write your reply to:

Draft