fix: update image processing configurations for improved performance and quality

hugo.toml

@@ -37,6 +37,15 @@ enableEmoji = true
 # otherwise it returns the section with the most pages.
 # mainSections = ["posts"]
 
+# -------------------------------------------------------------------------------------
+# Imaging Configuration
+# See: https://gohugo.io/configuration/imaging/
+# -------------------------------------------------------------------------------------
+
+[imaging]
+_merge = "shallow"
+quality = 75
+
 # -------------------------------------------------------------------------------------
 # Menu Configuration
 # See: https://fixit.lruihao.cn/documentation/basics/#menu-configuration
@@ -1083,6 +1092,7 @@ feedId = ""
 userId = ""
 
 # FixIt 0.3.17 | NEW Image config
+# Combined with Hugo's image processing option `imaging` for image optimisation
 [params.image]
 # cache remote images for better optimisations
 cacheRemote = false
@@ -1343,14 +1353,6 @@ scale = true
 # whether to add FullscreenControl
 fullscreen = true
 
-# FixIt 0.3.0 | NEW [Experimental] cache remote images locally
-# See: https://github.com/hugo-fixit/FixIt/pull/362
-# TODO remove (works on image-legacy.html)
-[params.page.cacheRemoteImages]
-enable = false
-# replace remote image URL with local image URL (place in public/images/remote/)
-replace = false
-
 # FixIt 0.3.0 | NEW Related content config (https://gohugo.io/content-management/related/)
 [params.page.related]
 enable = false

layouts/_markup/render-image.html

@@ -9,9 +9,9 @@ A Markdown image has three components: the image description, the image destinat
 */ -}}
 {{- $params := .Page.Params | merge site.Params.page -}}
 {{- $optim := slice 
-  (dict "Process" "resize 800x webp q75" "descriptor" "800w")
-  (dict "Process" "resize 1200x webp q75" "descriptor" "1200w")
-  (dict "Process" "resize 1600x webp q75" "descriptor" "1600w")
+  (dict "Process" "resize 800x webp" "descriptor" "800w")
+  (dict "Process" "resize 1200x webp" "descriptor" "1200w")
+  (dict "Process" "resize 1600x webp" "descriptor" "1600w")
 -}}
 {{- if .Title -}}
   {{- $linked := ne $params.lightgallery false -}}

layouts/_partials/home/profile.html

@@ -7,9 +7,9 @@
     <div class="home-avatar">
       {{- $menus := $.Site.Menus.main | default slice -}}
       {{- $optim := slice 
-        (dict "Process" "fill center 96x96 webp q75" "descriptor" "96w")
-        (dict "Process" "fill center 144x144 webp q75" "descriptor" "144w")
-        (dict "Process" "fill center 192x192 webp q75" "descriptor" "192w") 
+        (dict "Process" "fill center 96x96 webp" "descriptor" "96w")
+        (dict "Process" "fill center 144x144 webp" "descriptor" "144w")
+        (dict "Process" "fill center 192x192 webp" "descriptor" "192w") 
       -}}
       {{- $avatarMenuIndex := 0 -}}
       {{- if $profile.avatarMenu -}}

layouts/_partials/init/index.html

@@ -1,4 +1,4 @@
-{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251223031039-a78c07f7" -}}
+{{- hugo.Store.Set "version" "v0.4.0-alpha.3-20251223064514-52a7b434" -}}
 {{- .Store.Set "this" dict -}}
 
 {{- partial "init/detection-env.html" . -}}

layouts/_partials/single/post-author.html

@@ -2,9 +2,9 @@
 {{- $author := partial "function/get-author-map.html" .Params.author -}}
 {{- .Store.Set "author" $author -}}
 {{- $optim := slice 
-  (dict "Process" "resize 16x16 Center webp q75" "descriptor" "16w")
-  (dict "Process" "resize 24x24 Center webp q75" "descriptor" "24w")
-  (dict "Process" "resize 32x32 Center webp q75" "descriptor" "32w")
+  (dict "Process" "resize 16x16 Center webp" "descriptor" "16w")
+  (dict "Process" "resize 24x24 Center webp" "descriptor" "24w")
+  (dict "Process" "resize 32x32 Center webp" "descriptor" "32w")
 -}}
 
 <span class="post-author">

layouts/posts/single.html

@@ -145,11 +145,11 @@
     {{- if $image | or (gt (len $matches) 0) -}}
       <div class="featured-image">
         {{- $optim := slice 
-          (dict "Process" "resize 800x webp q75" "descriptor" "800w")
-          (dict "Process" "resize 1200x webp q75" "descriptor" "1200w")
-          (dict "Process" "resize 1600x webp q75" "descriptor" "1600w") 
+          (dict "Process" "resize 800x webp" "descriptor" "800w")
+          (dict "Process" "resize 1200x webp" "descriptor" "1200w")
+          (dict "Process" "resize 1600x webp" "descriptor" "1600w") 
         -}}
-        {{- dict "Src" $image "Title" $.Description "Resources" .Resources "Matches" $matches "Loading" "eager" "OptimConfig" $optim | partial "plugin/image.html" -}}
+        {{- dict "Src" $image "Title" $.Description "Resources" .Resources "Matches" $matches "Loading" "eager" "Sizes" "(max-width: 680px) 100vw, (max-width: 960px) 80vw, (max-width: 1440px) 56vw, 800px" "OptimConfig" $optim | partial "plugin/image.html" -}}
       </div>
     {{- end -}}
 

layouts/summary.html

@@ -13,9 +13,9 @@
     <div class="featured-image-preview">
       <a href="{{ $.RelPermalink }}" aria-label="{{ $.Title }}">
         {{- $optim := slice 
-          (dict "Process" "fill 800x336 Center webp q75" "descriptor" "800w")
-          (dict "Process" "fill 1200x504 Center webp q75" "descriptor" "1200w")
-          (dict "Process" "fill 1600x672 Center webp q75" "descriptor" "1600w") 
+          (dict "Process" "fill 800x336 Center webp" "descriptor" "800w")
+          (dict "Process" "fill 1200x504 Center webp" "descriptor" "1200w")
+          (dict "Process" "fill 1600x672 Center webp" "descriptor" "1600w") 
         -}}
         {{- dict "Src" $image "Title" $.Title "Resources" $.Resources "Matches" $matches "Loading" "eager" "Width" "800" "Height" "336" "Sizes" "(max-width: 680px) 100vw, (max-width: 960px) 80vw, (max-width: 1440px) 56vw, 800px" "OptimConfig" $optim "Alt" (printf "Featured image for %v" $.Title) | partial "plugin/image.html" -}}
       </a>