How to prevent creating duplicated image with different name?

[TetraTheta]

Sorry for the vague title.

All images in my site are either WebP or SVG, except for few exception that I can't control.
Also, most of those images are resized to 1280px from the beginning, unless larger size is needed.

I recently found out that, when my site is built, there are two image files that have same size but different name present.

![](001.webp)

If I use this syntax, there would be two identical files generated like this:

• 001.webp
• 001.7eebcbbf9ae545df1f4136558619a1d9.webp

I downloaded these two images for file size comparision, but they had same file size.

I know that serving file with hash in its name (a.k.a. hashed) will ensure the viewer will always have correct image, even if the site is behind Cloudflare CDN which caches images from their side.

But having two identical image eats up server storage, and Cloudflare Pages limitation.

Recently, I migrated my site from Cloudflare Pages to dedicated server, which is much slower than CF Pages', because my site is rejected from them. The build result had too many files and exceeded Cloudflare Page's 20,000 files limitation. I think this behavior ― having hashed and unhashed file together ― ate up Cloudflare Page file limit.

In my theory, you'll catch up CF Pages file limitation with 100 posts that each post have 100 images in it.

 

First, I suspected hugomods/images module so I disabled it from my module.yml file like this:

imports:
  #- path: github.com/hugomods/images

hugomods/images is the only module that puts hash into file name that I know, so disabling it will prevent image duplication.

But it didn't changed anything. Since my custom shortcodes rely on it, Hugo should fail to serve or build site, but it didn't. Site were built without any problem, and the generated site still had two same file, hashed one and unhashed one.

When I run hugo mod graph, it turned out that hbstack/blog was relying on hugomods/images.

MySiteSource>hugo mod graph | findstr images
github.com/hbstack/[email protected] github.com/hugomods/[email protected]

In this case, disabling hugomods/images won't work at all because hbstack/blog will load it anyway. I can't disable hbstack/blog. :(

---

Of course, I might be able to create a script that deletes every unhashed files blindly.

But this might break the site if there was any reference to unhashed file. My shortcodes rely on hugomods/images so they won't reference to unhashed file, but there is still a chance that there is reference to unhashed file, like OpenGraph image thing.

I think letting Hugo (and hugomods/images) decide whether unhashed image should be deleted or not is better idea, because Hugo can determine if unhashed image is referenced or not.

Or, if hbstack/blog doesn't rely on hugomods/images, I can safely remove hugomods/images module from my site. In this case, I will loose those fancy ![](001.webp#center) thing, of course.

 

So, can you do either one of these?

1. Modify hugomods/images to delete unreferenced unhashed file when building site
2. Remove depedency of hugomods/images from hbstack/blog

Or, any idea for way of safely remove unreferenced unhashed files from build result.

[razonyang]

No, I think the problem is that all page resources will be published by default, so you will got duplicated resources, disable it should work.

// config.yaml
cascade:
  - _target:
      kind: page
      path: /*/**
    _build:
      publishResources: false

I'vent test, tweak it to suit your needs.

See

• https://gohugo.io/getting-started/configuration/#cascade
• https://gohugo.io/content-management/build-options/

[TetraTheta]

Using /*/** works, but it also removes MP4 video in build result of my page, so I have to modify it. (Sorry, should've mention it too)

But /*/*.webp, /*/**.webp and **/*.webp doesn't remove 'original resource' me. How can I filter WebP images for path? The document says that it uses glob but I can't figure out pattern for only WebP images.

[razonyang]

I think the condition is applied on page s, not files.

As to the videos, you should publish it explicitly. It deepens how you use it.

https://gohugo.io/hugo-pipes/introduction/#asset-publishing

[TetraTheta]

I checked the code of my shortcode that uses those MP4 video. It used those MP4 file directly, rather than using them via Page resources.

I'll come back after figuring out and testing about how I can modify it to use the video files via Page resource.

[razonyang]

$res :=.Page.Resources.Get "name.mp4"
$res.Permalink

[TetraTheta]

Thank you!

I had to rewrite my shortcodes to correctly use Page Resources, and all of my posts that used those shortcodes to follow changes done to shortcodes.

Now site's public directory size is much smaller than previous builds (2GB to 1GB), and all of those images including those were referenced only in shortcodes are displayed correctly.

I am very happy now! 😄 Thank you again! I really appreciate you!