I successfully created my website with Hugo, but the images in my posts are way too large (1.3Mb).
I have seen that there is a [imaging]
parameter to reduce the quality, so I modified my hugo.toml
config file to the following
baseURL = 'http://my_beautiful_site/'
languageCode = 'en-en'
title = 'My Beautiful Site'
theme = 'papermod'
[imaging]
bgColor = '#ffffff'
hint = 'photo'
quality = 1
resampleFilter = 'Box'
However, it does not change the image quality when I build the website, it just copies the initial image in the public
folder.
Here are the logs when executing Hugo :
> rm -rf public/
> hugo --gc
....
> hugo
Start building sites …
hugo v0.134.3-.. BuildDate=2024-09-19T14:28:20Z VendorInfo=snap:0.134.3
WARN deprecated: .Site.Social was deprecated in Hugo v0.124.0 and will be removed in a future release. Use .Site.Params instead.
| EN
-------------------+-----
Pages | 12
Paginator pages | 0
Non-page files | 3
Static files | 0
Processed images | 0
Aliases | 2
Cleaned | 0
Total in 82 ms
My images are considered as Non-page files
and there are no Processed images
.
My images are in a page bundle, as illustrated from this example from Hugo website :
content/
├── my-post/
│ ├── index.md
│ └── my-image.jpg
Do you know where it might come from ? Do you know if [imaging]
parameters apply to page bundle images ?
Thank you in advance for you help,
Hugo
After a bit of research, it seems that the [imaging]
parameter does not apply to images in page bundle.
However, using image processing features as suggested by @bogdanoff worked nicely.
To do so, I modified the default render hook for images like so
File layouts/_default/_markup/render-image.html
{{ $original := .Destination }}
{{ $resource := .Page.Resources.GetMatch $original }}
{{ if $resource }}
{{ $optimized := $resource.Resize "800x webp q75" }}
<img src="{{ $optimized.RelPermalink }}" alt="{{ .Text }}">
{{ else }}
<img src="{{ $original }}" alt="{{ .Text }}">
{{ end }}
This allow to automatically resize the images that come from page bundles, and to display other images (urls, /static) without resizing.