add posts/2022-01-28-site-update-media-shrinkage.md

1 files changed, 88 insertions, 0 deletions

diff --git a/content/posts/2022-01-28-site-update-media-shrinkage.md b/content/posts/2022-01-28-site-update-media-shrinkage.md
new file mode 100644
index 0000000..d11dee2
--- /dev/null
+++ b/content/posts/2022-01-28-site-update-media-shrinkage.md
@@ -0,0 +1,88 @@
+---
+slug: site-update-media-shrinkage
+title: "Site Update: Media Shrinkage"
+date: "2022-01-28T08:54:25-04:00"
+draft: true
+
+tables:
+  shrinkage:
+    cols:
+      - id: "text"
+        name: "Description"
+      - id: "size"
+        name: "Total Size (kB)"
+        tip: "Total size, in kilobytes."
+        align: "right"
+      - id: "percent"
+        name: "Reduction (%)"
+        tip: "Size reduction relative to baseline."
+        align: "right"
+    rows:
+      - text: "Baseline uncached front page load"
+        size: "596 kB"
+        percent: "0%"
+      - text: "WebP and minified SVGs"
+        size: "324 kB"
+        percent: "45%"
+      - text: "WebP, minified SVGs, and `mod_deflate` update"
+        size: "**185 kB**"
+        percent: "**68%**"
+---
+
+Last night I made the following site improvements:
+
+1. Minified [SVGs][svg] with [minify][].
+2. Created lossless [WebPs][webp] of [PNGs][png] in recent content.
+3. Created a [Hugo shortcode][shortcode] for the [`<picture>`][picture]
+   element wrapped in a [`<figure>`][figure].
+5. Updated bitmap images in recent content to default to [WebP][] with a
+   fallback to [PNG][] ([progressive enhancement][]).
+6. Configured [`mod_deflate`][mod_deflate] to compress [SVGs][svg].
+
+### Results
+
+68% cumulative reduction the total size of an uncached front page load
+in [Chrome][]:
+
+{{< table "shrinkage" >}}
+
+### Notes
+
+* I also investigated [AVIF][].  Better compression than [WebP][], worse
+  tool support, and worse browser support.
+* Convert [PNG][] to lossless [WebP][] with [Imagemagick][]:
+  `convert -quality 100 -define webp:lossless=true src.png dst.png`
+* [Apache][] [`mod_deflate`][mod_deflate] config:
+  `AddOutputFilterByType image/svg+xml`
+* [Debian][]: Add `image/webp webp` to `/etc/mime.types`.
+
+[svg]: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
+  "Scalable Vector Graphics"
+[minify]: https://github.com/tdewolff/minify/tree/master/cmd/minify
+  "Command-line SVG, JavaScript, HTML, and CSS minifier."
+[webp]: https://en.wikipedia.org/wiki/WebP
+  "WebP image format."
+[png]: https://en.wikipedia.org/wiki/Portable_Network_Graphics
+  "Portable Network Graphics"
+[shortcode]: https://gohugo.io/content-management/shortcodes/
+  "Simple snippets in content files calling built-in or custom templates"
+[figure]: https://gohugo.io/content-management/shortcodes/#figure
+  "Hugo figure shortcode"
+[progressive enhancement]: https://en.wikipedia.org/wiki/Progressive_enhancement
+  "Progressive enhancement"
+[picture]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
+  "picture HTML element"
+[figure]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
+  "figure HTML element"
+[mod_deflate]: https://httpd.apache.org/docs/current/mod/mod_deflate.html
+  "Apache DEFLATE output filter."
+[chrome]: https://www.google.com/chrome
+  "Google Chrome web browser."
+[avif]: https://en.wikipedia.org/wiki/AVIF
+  "AV1 Image Format"
+[debian]: https://www.debian.org/
+  "Debian Linux distribution."
+[imagemagick]: https://imagemagick.org/
+  "Command-line image conversion tools."
+[apache]: https://httpd.apache.org/
+  "Apache web server."