Codegarden: Optimising Images in Umbraco

Preventing CLS using 'aspect-ratio'

The first code snippet helps output an inline style tag including the CSS aspect-ratio which we can inject into our img tag to tell the browser how much space to allocate and prevent our images causing Cumulative Layout Shift.

public static class MediaWithCropsHelper
{
    public static string AspectRatioCss(this MediaWithCrops? media)
    {
        var width = media?.Content.GetProperty("umbracoWidth")?.GetValue() as int?;
        var height = media?.Content.GetProperty("UmbracoHeight")?.GetValue() as int?;
        if (width is null || height is null) return string.Empty;
        return $"aspect-ratio: {(decimal)width/height:0.###};";
    }
}

Dynamic Cropping

Next up we considered Dynamic Cropping by installing my package 'DynamicCrops'.

dotnet add package mttblss.DynamicCrops

More details on how to implement this can be found in the GitHub repository https://github.com/​mttblss/​DynamicCrops. This package expands on the technique described in my earlier article on Variable Aspect Ratio Dynamic Image Cropping with Umbraco 15. The package also overcomes the mathematical inaccuracies described in the previous article.

Other packages referenced

During the presentation I referred to the following packages from fellow Umbraco MVPs :

• Accessible Media Picker^[2]
• Slimsy^[3]
• Cloudfare Image Url Generator^[4]

Alternative text

A brief mention was made to the alt Decision Tree page of the W3C^[5] Web Accessibility Initiative^[6] particularly around the need for context specific alt text content

Presentation

For anyone present at Code Garden, who followed the QR code to get to these resources, I hope you find the above material useful.

For those who have stumbled across this article, I will post an update once the video recording of the talk has been released. Hopefully it will provide context to the above.