Improve images performance

Published on 2024-01-20

hugo Testing my blog on web.dev I realized that it could benefit from some improvement and especially in regards to images processing. After some online searches, I discovered that:

even though images are not exactly content or assets, storing them in the static/ folder is not the best option contrary to what I’ve read several times when building this blog
the default hugo shortcode to show your images is not the most optimized one

╭── Image Processing in Hugo

For it to work, Hugo is looking for images in 1) the same folder as the markdown file which means that I would have to move the files and change all the paths in every post, or 2) the assets folder which allowed me to move the files without changing the relative paths in the posts.

╭── Optimized shortcode

After moving all the images from the static/img/ folder to the assets/img/ folder, it was time for an optimized shortcode. I get it from Laura Kalbag , placed it as a img.html file in the layouts/shortcodes/ folder and it looks like that:

{{/* get file that matches the filename as specified as src="" in shortcode */}}
{{ $src := resources.GetMatch (.Get "src") }}

{{ $tinyw := default "500x" }}
{{ $smallw := default "800x" }}
{{ $mediumw := default "1200x" }}

{{/* resize the src image to the given sizes */}}

{{ .Scratch.Set "tiny" ($src.Resize $tinyw) }}
{{ .Scratch.Set "small" ($src.Resize $smallw) }}
{{ .Scratch.Set "medium" ($src.Resize $mediumw) }}

{{/* add the processed images to the scratch */}}

{{ $tiny := .Scratch.Get "tiny" }}
{{ $small := .Scratch.Get "small" }}
{{ $medium := .Scratch.Get "medium" }}
{{ $large := .Scratch.Get "large" }}

{{/* only use images smaller than or equal to the src (original) image size */}}
<img
  {{ with .Get "sizes" }}sizes='{{.}}'
  {{ else }}
  sizes="(min-width: 35em) 720px, 100vw"{{ end }}
  srcset='
  {{ if ge $src.Width "500" }}
    {{ with $tiny.RelPermalink }}{{.}} 500w{{ end }}
  {{ end }}
  {{ if ge $src.Width "800" }}
    {{ with $small.RelPermalink }}, {{.}} 800w{{ end }}
  {{ end }}
  {{ if ge $src.Width "1200" }}
    {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
  {{ end }}'
  {{ if .Get (print $medium) }}
    src="{{ $medium.RelPermalink }}"
  {{ else }}
    src="{{ $src.RelPermalink }}"
  {{ end }}
  {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}
>

Now calling an image in a post is as simple as adding this line:

{{< img src="/img/file.jpg" alt="Alternative text" >}}

With that a new test on web.dev showed a significant decrease in Largest Contentful Paint and the Performance score also went up to 99!

╭── More optimization

Scrolling on Laura Kalbang post, I discovered that she wrote other great shortcodes to further improve any Hugo blog. Since she was nice enough to share her work, I couldn’t resist and used it.

Figures

I’ve created a figure.html file in layouts/shortcodes/ with this shortcode:

<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
  {{.Inner}}
    <figcaption>
      <p>{{ .Get "figcaption" }}</p>
  </figcaption>
</figure>

This allows me to include one or more images wrapped in a figure by using this in my posts:

{{< figure figcaption="TEXT" >}}
  {{< img src="/img/file.jpg" alt="Alternative text" >}}
{{< /figure >}}

Linked images

Finally, I also stole her link shortcode:

<a {{ with .Get "href" }}href="{{.}}"{{ end }}>
  {{.Inner}}
</a>

This one is called in my posts with:

{{< link href="https://site.com" >}}
  {{< img src="/img/file.jpg" alt="Alternative text" >}}
{{< /link >}}

Thanks for your read. Hope it's been useful to you.

Interact with this post using Mastodon or

✄ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈ ┈

More food for thoughts? Check other posts about: #Hugo

www-gem words