authelia/docs/layouts/_default/_markup/render-image.html

{{ $image := "" -}}
{{ if (urls.Parse .Destination).IsAbs }}
  {{ $image = resources.GetRemote .Destination -}}
{{ else -}}
  {{ $image = .Page.Resources.GetMatch .Destination -}}
{{ end -}}
{{ with $image -}}
  {{ $lqip := $image.Resize site.Params.lqipWidth -}}

  {{ $imgSrc := "" -}}
  {{ $imgSrcSet := slice -}}

  {{ $widths := site.Params.landscapePhotoWidths -}}
  {{ if gt $image.Height $image.Width -}}
    {{ $widths = site.Params.portraitPhotoWidths -}}
  {{ end -}}

  {{ range $widths -}}
    {{ $srcUrl := (printf "%dx" . | $image.Resize).Permalink -}}
    {{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}}
    {{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}}
  {{ end -}}
  {{ $imgSrcSet = (delimit $imgSrcSet ",") -}}

  {{ if gt $image.Width site.Params.smallLimit -}}
    <figure class="figure">
      <img class="figure-img img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.Permalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}">
      <noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}"></noscript>
      {{ with $.Title }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end -}}
    </figure>
  {{ else -}}
    <img class="img-fluid lazyload blur-up" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}">
  {{ end -}}
{{ else -}}
  {{ erroridf "image-not-found" "Image not found" -}}
{{ end -}}