Looking for solutions to prevent duplicated image generation in Hugo when using a partial multiple times

support
1

Issue with Duplicated Image Generation in Hugo Partial

I have a partial that generates the same image with multiple sizes (image opt.) using a provided URL, but when I call this partial multiple times with the same URL, Hugo generates multiple copies of the same resized images, leading to redundancy and performance issues.

Here’s an example of how I’m using the partial in my Hugo template:

{{ partial "image" ( dict 
                        "src" "https://some.image.com/sample"
                        "alt" "alt text" 
                        "sizes" (slice "100x100" "150x150" "200x200")
                    )
}}

And here’s a simplified version of the image.html partial:

<!-- image.html -->

{{ $src = .src }}
{{ $class = .src }}
{{ $alt = .src }}
{{ $sizes := default (slice "300x" "600x" "1200x") .sizes }}

{{$r := partial "fetch-image" (dict "src" $src) }}

{{- if $r }}

  {{/* Generating resized images */}}

  {{ $scaledImages := slice }}
  {{ range $index, $size := $sizes }}
    {{ $scaledImage := $r.Resize ( printf "%s webp photo" $size)}}
    {{ $scaledImages = $scaledImages | append $scaledImage }}
  {{ end }}

  {{ $sources := slice }}
  {{ range $index, $scaledImage := $scaledImages }}
    {{ $sources = $sources | append (printf "%s %dw" $scaledImage.RelPermalink $scaledImage.Width) }}
  {{ end }}

  {{- /* Render image element. */ -}}

  <img class="{{ .class }}" alt="{{ .alt }}" 
      src="{{ (index $scaledImages 0).RelPermalink }}" 
      srcset="{{ delimit $sources "," }}">
{{- end -}}

I’ve noticed that when I call the partial with the same URL but with different parameters (eg. class, alt) multiple times, Hugo generates new images even though the URLs are identical. This is causing unnecessary image duplication and negatively impacting my site’s performance.

I’ve considered implementing caching or hash-based filenames to solve this issue, but I’m not sure how to go about it within the context of Hugo’s templating system. I’m looking for guidance on the best approach to prevent Hugo from generating duplicated images.

Any advice, code examples, or suggestions would be greatly appreciated. Thank you in advance for your help!

Non-working strategies

PartialCached

As far as I can tell, it seems that Hugo has the ability to generate multiple sites parallel. However, this means that if in the rendering pipeline, there are two sites processing the same image, it will be duplicated.

2

What does this mean? That the image is written multiple times to the public directory, each overwriting the last? Or that there are identical images with different names in the resources directory? Or something else?

3

In the public directory, there are two or more identical images with different names.

For example:
These images are identical:

  • 25-1280x853_7180580289028486155_hu2941149e8f024d64f44cf4fabbd82b4f_0_300x0_resize_q75_h2_box_2.webp

  • 25-1280x853_12294490075568201594_hu2941149e8f024d64f44cf4fabbd82b4f_0_300x0_resize_q75_h2_box_2.webp

Only the highlighted parts differ.

4

Can you post the images somewhere I can download them? Do not paste into this forum; they won’t be the originals.

Also, with a simple site using your partials, I’m not sure how to reproduce the behavior. Perhaps you can tell me what’s different about your setup.

git clone --single-branch -b hugo-forum-topic-45700 https://github.com/jmooring/hugo-testing hugo-forum-topic-45700
cd hugo-forum-topic-45700
rm -rf public/ && hugo && tree public
5

While I tried to reproduce the problem, I found that my test data contained different URLs referencing to the same image. Thus the problem is changed a little bit.

6

I don’t know what that means. As described, I am still not able to reproduce the problem.