ResponsiveWebPSourceSet 1.1.0

ResponsiveWebPSourceSet

Automatic WebP Conversion

Converts JPG, JPEG, PNG, and GIF images into optimized WebP files automatically.

Responsive Images

Generates <picture> and <source> elements with responsive srcset support.

Performance Optimized

Supports lazy loading, fetch priority, CLS reduction, and SEO-friendly markup.

Features

• ✅ Convert JPEG, PNG, and GIF to WebP
• ✅ Generate responsive picture elements
• ✅ Automatic srcset generation
• ✅ Configurable media breakpoints
• ✅ Automatic width and height detection
• ✅ CLS reduction
• ✅ Lazy loading support
• ✅ Fetch priority support
• ✅ SEO-friendly markup
• ✅ Responsive by default
• ✅ Lightweight and fast
• ✅ Easy to use

Installation

Install the package from NuGet using the .NET CLI:

dotnet add package ResponsiveWebPSourceSet

Registration

Register the Tag Helper in your Razor Pages or MVC project:

@addTagHelper *, ResponsiveWebPSourceSet

View

@page
@model IndexModel
@inject IWebHostEnvironment env
@addTagHelper *, ResponsiveWebPSourceSet

@{
    var webRootImagePath =
        System.IO.Path.Combine(env.WebRootPath, "images", "photo1.jpg");

    var externalImagePath =
        System.IO.Path.Combine(@"D:\data", "images", "photo2.jpg");
}

Basic usage of the `responsive-webpsourceset` Tag Helper:
<responsive-webpsourceset
    Url="/images/photo1.jpg"
    SourceImagePath="@webRootImagePath">
</responsive-webpsourceset>


External Images: images that use `SourceImagePath` outside the web root require a controller to serve image files.
<responsive-webpsourceset
    Url="/external-images/photo2.jpg"
    SourceImagePath="@externalImagePath">
</responsive-webpsourceset>


Custom Configuration: Customize media breakpoints, lazy loading, fetch priority, CSS attributes, and alternative text.
Example using UserDefMedia="2500:1400,1400:800,800:600"
<responsive-webpsourceset
    Url="/images/photo1.jpg"
    SourceImagePath="@webRootImagePath"
    UserDefMedia="2500:1400,1400:800,800:600"
    isLazyLoading="true"
    isFetchpriorityHigh="false"
    cssStyle="border:1px solid black;"
    cssClass="custom-class"
    Alt="Description of the image">
</responsive-webpsourceset>

Generated HTML

On the initial page load, only an <img> element is rendered because the WebP images are generated in the background. No <source> elements are available yet. After the generation process has completed, the corresponding <source> elements with srcset attributes become available.

Basic Usage - Generated HTML
<picture>
  <source srcset="/images/photo1-size2500.webp" media="(min-width:1400px)">
  <source srcset="/images/photo1-size1400.webp" media="(min-width:1200px)">
  <source srcset="/images/photo1-size1200.webp" media="(min-width:992px)">
  <source srcset="/images/photo1-size992.webp" media="(min-width:768px)">
  <source srcset="/images/photo1-size768.webp" media="(min-width:576px)">
  <source srcset="/images/photo1-size576.webp" media="(min-width:420px)">
  <img style="max-width:100%; height:auto;" src="/images/photo1.jpg" alt="photo1" width="4800" height="4000" />
</picture>


Custom Usage - Generated HTML
Use UserDefMedia to define custom image widths and media breakpoints.
Example with UserDefMedia="2500:1400,1400:800,800:600"
<picture>
  <source srcset="/images/photo-size2500.webp" media="(min-width:1400px)">
  <source srcset="/images/photo-size1400.webp" media="(min-width:800px)">
  <source srcset="/images/photo-size800.webp" media="(max-width:600px)">
  <img src="/images/photo.jpg" alt="Sample photo" style="max-width:100%; height:auto;" width="3535" height="1032" />
</picture>

Controller for External Images Only

using Microsoft.AspNetCore.Mvc;
namespace WebRazor10.Controllers
{
    public class ImagesController : Controller
    {
        [HttpGet("/external-images/{fileName}")]
        public IActionResult GetImage(string fileName)
        {
            var imagePath = Path.Combine(@"D:\data", "images", fileName);
            if (!System.IO.File.Exists(imagePath))
            {
                return NotFound();
            }

            var extension = Path.GetExtension(fileName).ToLowerInvariant();
            var contentType = extension switch
            {
                ".jpg" or ".jpeg" => "image/jpeg",
                ".png" => "image/png",
                ".gif" => "image/gif",
                ".webp" => "image/webp",
                _ => "application/octet-stream"
            };
            return PhysicalFile(imagePath, contentType);
        }
    }
}

Available Attributes

Supported Formats

Input

• JPG
• JPEG
• PNG
• GIF

Output

• WebP

Requirements

• .NET 8 or later
• ASP.NET Core
• SixLabors.ImageSharp