Feature: fetchPriority hints (#17)

* Feature: fetchPriority hints

PictureRenderer/Constants.cs

@@ -25,4 +25,12 @@ public enum ImageDecoding
         Auto,
         None
     }
+
+    public enum FetchPriority
+    {
+        None,
+        Auto,
+        Low,
+        High,
+    }
 }

PictureRenderer/Picture.cs

@@ -105,8 +105,9 @@ private static string RenderImgElement(PictureData pictureData, PictureProfileBa
             var loadingAttribute = lazyLoading == LazyLoading.Browser ? "loading=\"lazy\" " : string.Empty;
             var classAttribute = string.IsNullOrEmpty(pictureData.CssClass) ? string.Empty : $"class=\"{HttpUtility.HtmlEncode(pictureData.CssClass)}\"";
             var decodingAttribute = profile.ImageDecoding == ImageDecoding.None ? string.Empty :  $"decoding=\"{Enum.GetName(typeof(ImageDecoding), profile.ImageDecoding)?.ToLower()}\" ";
+            var fetchPriorityAttribute = profile.FetchPriority == FetchPriority.None ? string.Empty :  $"fetchPriority=\"{Enum.GetName(typeof(FetchPriority), profile.FetchPriority)?.ToLower()}\" ";
 
-            return $"<img{idAttribute} alt=\"{HttpUtility.HtmlEncode(pictureData.AltText)}\" src=\"{pictureData.ImgSrc}\" {widthAndHeightAttributes}{loadingAttribute}{decodingAttribute}{classAttribute}/>";
+            return $"<img{idAttribute} alt=\"{HttpUtility.HtmlEncode(pictureData.AltText)}\" src=\"{pictureData.ImgSrc}\" {widthAndHeightAttributes}{loadingAttribute}{decodingAttribute}{fetchPriorityAttribute}{classAttribute}/>";
         }
 
         private static string GetImgWidthAndHeightAttributes(PictureProfileBase profile, string imgWidth)

PictureRenderer/PictureRenderer.csproj

@@ -2,7 +2,7 @@
 
   <PropertyGroup>
     <TargetFramework>netstandard2.0</TargetFramework>
-    <Version>3.8</Version>
+    <Version>3.9</Version>
     <Authors>Erik Henningson</Authors>
     <Company />
     <Product />

PictureRenderer/Profiles/PictureProfileBase.cs

@@ -67,6 +67,11 @@ public int FallbackWidth
         /// </summary>
         public ImageDecoding ImageDecoding {get; set;}
 
+        /// <summary>
+        /// Img element fetchPriority attribute.
+        /// </summary>
+        public FetchPriority FetchPriority {get; set;}
+
         public bool ShowInfo { get; set; }
 
 

PictureRendererTests/ImageSharpTests.cs

@@ -71,6 +71,78 @@ public void RenderWithWidthAndHeightAndNoDecoding()
             Assert.Equal(expected, result);
         }
 
+        [Fact()]
+        public void RenderWithWidthAndHeightAndFetchPriorityNone()
+        {
+            const string expected = "<picture><source srcset=\"/myImage.jpg?format=webp&width=150&height=150&quality=80 150w, /myImage.jpg?format=webp&width=300&height=300&quality=80 300w\" sizes=\"150px\" type=\"image/webp\"/><source srcset=\"/myImage.jpg?width=150&height=150&quality=80 150w, /myImage.jpg?width=300&height=300&quality=80 300w\" sizes=\"150px\" /><img alt=\"alt text\" src=\"/myImage.jpg?width=300&height=300&quality=80\" width=\"300\" height=\"300\" loading=\"lazy\" decoding=\"async\" /></picture>";
+            var profile = new ImageSharpProfile()
+            {
+                SrcSetWidths = new[] { 150, 300 },
+                Sizes = new[] { "150px" },
+                AspectRatio = 1,
+                ImgWidthHeight = true,
+                FetchPriority = FetchPriority.None,
+            };
+
+            var result = PictureRenderer.Picture.Render("/myImage.jpg", profile, "alt text");
+
+            Assert.Equal(expected, result);
+        }
+
+        [Fact()]
+        public void RenderWithWidthAndHeightAndFetchPriorityAuto()
+        {
+            const string expected = "<picture><source srcset=\"/myImage.jpg?format=webp&width=150&height=150&quality=80 150w, /myImage.jpg?format=webp&width=300&height=300&quality=80 300w\" sizes=\"150px\" type=\"image/webp\"/><source srcset=\"/myImage.jpg?width=150&height=150&quality=80 150w, /myImage.jpg?width=300&height=300&quality=80 300w\" sizes=\"150px\" /><img alt=\"alt text\" src=\"/myImage.jpg?width=300&height=300&quality=80\" width=\"300\" height=\"300\" loading=\"lazy\" decoding=\"async\" fetchPriority=\"auto\" /></picture>";
+            var profile = new ImageSharpProfile()
+            {
+                SrcSetWidths = new[] { 150, 300 },
+                Sizes = new[] { "150px" },
+                AspectRatio = 1,
+                ImgWidthHeight = true,
+                FetchPriority = FetchPriority.Auto,
+            };
+
+            var result = PictureRenderer.Picture.Render("/myImage.jpg", profile, "alt text");
+
+            Assert.Equal(expected, result);
+        }
+
+        [Fact()]
+        public void RenderWithWidthAndHeightAndFetchPriorityHigh()
+        {
+            const string expected = "<picture><source srcset=\"/myImage.jpg?format=webp&width=150&height=150&quality=80 150w, /myImage.jpg?format=webp&width=300&height=300&quality=80 300w\" sizes=\"150px\" type=\"image/webp\"/><source srcset=\"/myImage.jpg?width=150&height=150&quality=80 150w, /myImage.jpg?width=300&height=300&quality=80 300w\" sizes=\"150px\" /><img alt=\"alt text\" src=\"/myImage.jpg?width=300&height=300&quality=80\" width=\"300\" height=\"300\" loading=\"lazy\" decoding=\"async\" fetchPriority=\"high\" /></picture>";
+            var profile = new ImageSharpProfile()
+            {
+                SrcSetWidths = new[] { 150, 300 },
+                Sizes = new[] { "150px" },
+                AspectRatio = 1,
+                ImgWidthHeight = true,
+                FetchPriority = FetchPriority.High,
+            };
+
+            var result = PictureRenderer.Picture.Render("/myImage.jpg", profile, "alt text");
+
+            Assert.Equal(expected, result);
+        }
+
+        [Fact()]
+        public void RenderWithWidthAndHeightAndFetchPriorityLow()
+        {
+            const string expected = "<picture><source srcset=\"/myImage.jpg?format=webp&width=150&height=150&quality=80 150w, /myImage.jpg?format=webp&width=300&height=300&quality=80 300w\" sizes=\"150px\" type=\"image/webp\"/><source srcset=\"/myImage.jpg?width=150&height=150&quality=80 150w, /myImage.jpg?width=300&height=300&quality=80 300w\" sizes=\"150px\" /><img alt=\"alt text\" src=\"/myImage.jpg?width=300&height=300&quality=80\" width=\"300\" height=\"300\" loading=\"lazy\" decoding=\"async\" fetchPriority=\"low\" /></picture>";
+            var profile = new ImageSharpProfile()
+            {
+                SrcSetWidths = new[] { 150, 300 },
+                Sizes = new[] { "150px" },
+                AspectRatio = 1,
+                ImgWidthHeight = true,
+                FetchPriority = FetchPriority.Low,
+            };
+
+            var result = PictureRenderer.Picture.Render("/myImage.jpg", profile, "alt text");
+
+            Assert.Equal(expected, result);
+        }
+
         [Fact()]
         public void RenderWithFixedHeight()
         {

README.md

@@ -95,6 +95,7 @@ public static class PictureProfiles
 * **ImageDecoding (optional)** - Value for img element `decoding` attribute. Default value: `async`.
 * **ImgWidthHeight (optional)** - If true, `width` and `height` attributes will be rendered on the img element.
 * **ShowInfo (optional)** - If true, an overlay will show info about the currently selected image.
+* **FetchPriority (optional)** - Value for img element `fetchPriority` attribute. Default value: `none` (unset)
 
 ### Render picture element
 Render the picture element by calling `Picture.Render`