Merge 3d296b572432573d53fc8141f1d020f3ec7cdb7e into 3b0ee00eb05135a162fdb83de65576b968bab4f0

README.md

@@ -18,24 +18,58 @@ Current "main" changes are as follows:
 - Built-in Chroma instead of client-side syntax highlighting with HLJS
 - Responsive Table of Contents with side display support
 - Responsive "hamburger" menu for mobile
+- Image optimization with next-gen image formats
 - Simple reading progress bar
 - Refactored RSS template (proper Atom feed)
 - Bunch of CSS and other changes
 
+### Image Optimization
+
+Images are optimized by default without requiring
+[shortcodes](https://gohugo.io/content-management/shortcodes/), by using a [custom](./layouts/_default/_markup/render-image.html) image [render hook](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks), which in turn uses the [image partial](./layouts/partial/image.html) that does all the heavy lifting.
+
+By default, the theme creates resized versions of images ranging from 300 to 700 pixels wide in increments of 100 pixels.
+
+If the image format is not [WebP](https://en.wikipedia.org/wiki/WebP), the image is converted. The original file format will serve as a fallback for browsers that don't support the WebP format.
+
+Note that only images that are part of the [page bundle](https://gohugo.io/content-management/page-bundles/) are processed.
+If served from the `static/` directory or external sources, the image will be displayed but not be processed.
+
+Additionally, all images are lazily loaded to save the bandwidth of your users.
+
 ### Credits
 Additional credits:
 - [PaperModX](https://github.com/reorx/hugo-PaperModX/) by reorx
+- [Hugo Gruvbox](https://github.com/schnerring/hugo-theme-gruvbox) theme (Image Optimization code)
 
 ### Configure
-Most of the installation process and settings are shared with the original PaperMod, so check out [their documentation](https://github.com/adityatelange/hugo-PaperMod/wiki/Installation). One noticeable difference though is that in order to enable syntax highlighting, you have to add this to your `config.yml` :
+Most of the installation process and settings are shared with the original PaperMod, so check out [their documentation](https://github.com/adityatelange/hugo-PaperMod/wiki/Installation). The noticeable differences though are the additional `config.yml` options:
+- in order to enable syntax highlighting, add:
 
-```
-markup:
-    highlight:
-        style: dracula
-        noClasses: false
-        guessSyntax: true
-```
+  ```
+  markup:
+      highlight:
+          style: dracula
+          noClasses: false
+          guessSyntax: true
+  ```
 
-See [Hugo documentation](https://gohugo.io/getting-started/configuration-markup#highlight) for more options.
-*Note: for some reason, the `guessSyntax` doesn't actually work but is required. Please make your code fences explicit for the time being.*
+  See [Hugo documentation](https://gohugo.io/getting-started/configuration-markup#highlight) for more options.
+  *Note: for some reason, the `guessSyntax` doesn't actually work but is required. Please make your code fences explicit for the time being.*
+
+- to change the image compression quality from the default 75%, per the [official Image Processing Config Hugo docs](https://gohugo.io/content-management/image-processing/#image-processing-config):
+
+  ```yaml
+  imaging:
+    quality: 75
+  ```
+
+- to change the default resize behavior:
+
+  ```yaml
+  params:
+    imageResize:
+      min: 300
+      max: 700
+      increment: 100
+  ```

assets/css/core/reset.css

@@ -116,4 +116,5 @@ textarea:-webkit-autofill {
 img {
     display: block;
     max-width: 100%;
+    height: auto;
 }

layouts/_default/_markup/render-image.html

@@ -1 +1 @@
-<img loading="lazy" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
+{{ partial "image.html" (dict "src" (.Destination | safeURL) "alt" .PlainText "caption" .Title "page" .Page "lazy" true) }}

layouts/partials/image.html

@@ -0,0 +1,108 @@
+<!-- prettier-ignore -->
+{{- if or (or .title .caption) .attr -}}
+  <figure>
+{{ end }}
+
+{{ if (strings.HasPrefix .src "http") }}
+  <!-- External image -->
+  <img
+    src="{{ .src }}"
+    alt="{{ .alt }}"
+    {{ with .caption }}title="{{ . | markdownify | plainify }}"{{ end }}
+    {{ if .lazy }}loading="lazy"{{ end }}
+  />
+{{ else if (strings.HasPrefix .src "/") }}
+  <!-- Image from static/ -->
+  {{ $imageConfig := imageConfig (path.Join "static" .src) }}
+  <img
+    src="{{ .src }}"
+    alt="{{ .alt }}"
+    {{ with .caption }}title="{{ . | markdownify | plainify }}"{{ end }}
+    {{ if .lazy }}loading="lazy"{{ end }}
+    width="{{ $imageConfig.Width }}"
+    height="{{ $imageConfig.Height }}"
+  />
+{{ else }}
+  {{ $src := .src }}
+  {{ if strings.HasPrefix $src "./" }}
+    <!-- Strip "./" prefix from relative path -->
+    {{ $src = substr $src 2 }}
+  {{ end }}
+  <!-- Image from page bundle -->
+  {{ $images := .page.Resources.ByType "image" }}
+  {{ $image := $images.GetMatch $src }}
+  {{ if eq $image.MediaType.SubType "svg" }}
+    <!-- No processing for SVGs -->
+    <img src="{{ $image.RelPermalink }}" alt="{{ .alt }}" />
+  {{ else }}
+    {{ $image := $image.Filter (images.AutoOrient) }}
+    <!-- Calculate resize widths in increments of 100px -->
+    {{ $minWidth := .page.Site.Params.imageResize.min | default 300 }}
+    {{ $maxWidth := .page.Site.Params.imageResize.max | default 700 }}
+    {{ $increment := .page.Site.Params.imageResize.increment | default 200 }}
+    {{ $widths := seq $minWidth $increment $maxWidth }}
+    {{ if lt $image.Width $maxWidth }}
+      {{ $widths = $widths | append $image.Width }}
+    {{ end }}
+    {{ $widthsCount := len $widths }}
+
+    {{ $sizes := slice }}
+    {{ $srcSet := slice }}
+    {{ $webpSrcSet := slice }}
+    {{ range $i, $width := $widths }}
+      {{ if ge $image.Width $width }}
+        {{ if eq $i (sub $widthsCount 1) }}
+          {{ $sizes = $sizes | append (printf "%dpx" $width) }}
+        {{ else }}
+          {{ $maxWidth := (add $width (sub $increment 1)) }}
+          {{ $sizes = $sizes | append (printf "(max-width: %dpx) %dpx" $maxWidth $width) }}
+        {{ end }}
+        {{ $resized := $image.Resize (printf "%dx" $width) }}
+        {{ $srcSet = $srcSet | append (printf "%s %dw" $resized.RelPermalink $resized.Width) }}
+        {{ if not (eq "webp" $image.MediaType.SubType) }}
+          <!-- If image format is not WebP, add conversions -->
+          {{ $webp := $image.Resize (printf "%dx webp" $width) }}
+          {{ $webpSrcSet = $webpSrcSet | append (printf "%s %dw" $webp.RelPermalink $webp.Width) }}
+        {{ end }}
+      {{ end }}
+    {{ end }}
+
+
+    <picture>
+      <source
+        type="image/webp"
+        {{ with $webpSrcSet }}srcset="{{ delimit . "," }}"{{ end }}
+        {{ with $sizes }}sizes="{{ delimit . "," }}"{{ end }}
+      />
+      <img
+        src="{{ $image.RelPermalink }}"
+        {{ with $srcSet }}srcset="{{ delimit . "," }}"{{ end }}
+        {{ with $sizes }}sizes="{{ delimit . "," }}"{{ end }}
+        alt="{{ .alt }}"
+        {{ with .caption }}title="{{ . | markdownify | plainify }}"{{ end }}
+        {{ if .lazy }}loading="lazy"{{ end }}
+        width="{{ $image.Width }}"
+        height="{{ $image.Height }}"
+      />
+    </picture>
+  {{ end }}
+{{ end }}
+
+
+<!-- prettier-ignore -->
+{{- if or (or .title .caption) .attr -}}
+  <figcaption>
+    {{ with .title -}}
+        {{ . }}
+    {{- end -}}
+    {{- if or .caption .attr -}}<p>
+        {{- .caption | markdownify -}}
+        {{- with .attrlink }}
+            <a href="{{ . }}">
+        {{- end -}}
+        {{- .attr | markdownify -}}
+        {{- if .attrlink }}</a>{{ end }}</p>
+    {{- end }}
+  </figcaption>
+</figure>
+{{ end }}

layouts/shortcodes/figure.html

@@ -5,27 +5,6 @@
     {{- if .Get "link" -}}
         <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
     {{- end }}
-    <img loading="lazy" src="{{ .Get "src" }}{{- if eq (.Get "align") "center" }}#center{{- end }}"
-         {{- if or (.Get "alt") (.Get "caption") }}
-         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
-         {{- end -}}
-         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
-         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
-    /> <!-- Closing img tag -->
+    {{ partial "image.html" (merge .Params (dict "page" .Page "lazy" true)) }}
     {{- if .Get "link" }}</a>{{ end -}}
-    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
-        <figcaption>
-            {{ with (.Get "title") -}}
-                {{ . }}
-            {{- end -}}
-            {{- if or (.Get "caption") (.Get "attr") -}}<p>
-                {{- .Get "caption" | markdownify -}}
-                {{- with .Get "attrlink" }}
-                    <a href="{{ . }}">
-                {{- end -}}
-                {{- .Get "attr" | markdownify -}}
-                {{- if .Get "attrlink" }}</a>{{ end }}</p>
-            {{- end }}
-        </figcaption>
-    {{- end }}
 </figure>