DotSee.ResponsiveImages 17.0.23

DotSee.ResponsiveImages

Responsive images for Umbraco CMS 17, driven entirely by configuration:

• <picture> elements with per-breakpoint art direction (<ds:picture>)
• <img> with srcset/sizes (<ds:img>)
• Responsive CSS background images with focal-point-aware background-position (<ds:background>)
• Native lazy loading (loading="lazy") with inline LQIP blur placeholders — no runtime JavaScript
• CSP-safe rendering via a nonce attribute
• <link rel="preload"> hints for the LCP image (<ds:preloads>)
• Crops anchored on the focal point the editor set in the backoffice
• Optional Cloudflare image transformation URLs (/cdn-cgi/image/…) so resizing happens at the edge instead of on your origin
• Optional CDN cache purging when media changes
• Rendered markup and resolved rule sets are cached, and invalidated automatically when content or media changes — including through the cache refreshers that reach every node in a load-balanced setup
• A JSON schema for full appsettings.json IntelliSense, and auto-registration through an Umbraco composer

Quick start

dotnet add package DotSee.ResponsiveImages

Add to _ViewImports.cshtml:

@addTagHelper *, DotSee.ResponsiveImages

Define a rule set in appsettings.json:

{
  "DotSee": {
    "ResponsiveImages": {
      "RuleSets": [
        {
          "Name": "default",
          "ImageQuality": 80,
          "OriginalImageMaxWidth": 1920,
          "CropMode": "Crop",
          "Breakpoints": [
            { "BreakPointWidth": 1920, "Width": 1200 },
            { "BreakPointWidth": 1200, "Width": 900 },
            { "BreakPointWidth": 768, "Width": 600 },
            { "BreakPointWidth": 576, "Width": 400 }
          ]
        }
      ]
    }
  }
}

Use it in a view:

<ds:picture image="@Model.Image" rule-set="default" image-alt="@Model.Image.Content.Name" />

Using with a CDN (Cloudflare and similar)

The package and an image CDN solve different halves of the problem: the CDN optimises bytes per pixel, the package decides how many pixels to send and writes the markup — and it knows the editor's focal point, which no CDN can guess. Keep format negotiation (Polish, format=auto) on, leave UseWebP off, and optionally set "UrlProvider": "Cloudflare" to move the resizing itself to the edge.

Documentation

• Getting started
• Configuration reference
• Tag helpers
• Razor API
• Lazy loading & LQIP

License

MIT. Note: the package references SixLabors.ImageSharp (Six Labors Split License) for building inline LQIP placeholders — review Six Labors' licensing terms for your own use of ImageSharp.