diff --git a/README.md b/README.md
index 8f8790e2..421c2593 100644
--- a/README.md
+++ b/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
+ ```
diff --git a/assets/css/core/reset.css b/assets/css/core/reset.css
index d41fcadb..565bf855 100644
--- a/assets/css/core/reset.css
+++ b/assets/css/core/reset.css
@@ -116,4 +116,5 @@ textarea:-webkit-autofill {
img {
display: block;
max-width: 100%;
+ height: auto;
}
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 1acb87d1..0a6230d2 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1 +1 @@
-
+{{ partial "image.html" (dict "src" (.Destination | safeURL) "alt" .PlainText "caption" .Title "page" .Page "lazy" true) }}
\ No newline at end of file
diff --git a/layouts/partials/image.html b/layouts/partials/image.html
new file mode 100644
index 00000000..a6478e99
--- /dev/null
+++ b/layouts/partials/image.html
@@ -0,0 +1,108 @@
+
+{{- if or (or .title .caption) .attr -}}
+
+{{ end }}
+
+{{ if (strings.HasPrefix .src "http") }}
+
+
+{{ else if (strings.HasPrefix .src "/") }}
+
+ {{ $imageConfig := imageConfig (path.Join "static" .src) }}
+
+{{ else }}
+ {{ $src := .src }}
+ {{ if strings.HasPrefix $src "./" }}
+
+ {{ $src = substr $src 2 }}
+ {{ end }}
+
+ {{ $images := .page.Resources.ByType "image" }}
+ {{ $image := $images.GetMatch $src }}
+ {{ if eq $image.MediaType.SubType "svg" }}
+
+
+ {{ else }}
+ {{ $image := $image.Filter (images.AutoOrient) }}
+
+ {{ $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) }}
+
+ {{ $webp := $image.Resize (printf "%dx webp" $width) }}
+ {{ $webpSrcSet = $webpSrcSet | append (printf "%s %dw" $webp.RelPermalink $webp.Width) }}
+ {{ end }}
+ {{ end }}
+ {{ end }}
+
+
+
+
+
+
+ {{ end }}
+{{ end }}
+
+
+
+{{- if or (or .title .caption) .attr -}}
+
+ {{ with .title -}}
+ {{ . }}
+ {{- end -}}
+ {{- if or .caption .attr -}}