Trying Eric Murphy's render-image

Eric Murphy is a well known YouTuber in niche Linux/Privacy community that do web development. His home base site, ericmurphy.xyz have a really good code design and optimizations.

My 3DS’ web browser able to load his site and even his images! So I want to give it a try.

Here’s his blog post regarding the matter and his code on GitHub.

Here is an adjusted code for my site. I make it centered and italic the image and the caption in my css.

{{ $src := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}

{{ if $src }}
<figure class="render-image">
  {{ $data := newScratch }}
  {{ $maxWidth := 500 }}

  {{ if gt $src.Width $maxWidth }}
    {{ $data.Set "webp" ($src.Resize (printf "%dx webp q90" $maxWidth)) }}
    {{ $data.Set "fallback" ($src.Resize (printf "%dx q90" $maxWidth)) }}
  {{ else }}
    {{ $data.Set "webp" ($src.Resize (printf "%dx webp q90" $src.Width)) }}
    {{ $data.Set "fallback" ($src.Resize (printf "%dx q90" $src.Width)) }}
  {{ end }}

  {{ $webp := $data.Get "webp" }}
  {{ $fallback := $data.Get "fallback" }}
  <a href="{{ $src.RelPermalink }}">
    <picture>
      <source srcset="{{ $webp.RelPermalink }}" type="image/webp">
      <img src="{{ $fallback.RelPermalink }}" alt="{{ .Text }}" loading="lazy" decoding="async"
           width="{{ $fallback.Width }}" height="{{ $fallback.Height }}" />
    </picture>
  </a>
  {{ with .Title }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
</figure>
{{ end }}