aboutsummaryrefslogtreecommitdiff
path: root/content/posts
diff options
context:
space:
mode:
authorPaul Duncan <pabs@pablotron.org>2022-01-29 00:03:05 -0500
committerPaul Duncan <pabs@pablotron.org>2022-01-29 00:03:05 -0500
commit81824c0bcf96e0a850d4df7222c4590e00b7918c (patch)
tree0a9eba27586fa60be6d0c2f0a858c6659fa68193 /content/posts
parentd98b24264c0be06e6096dd21ad55d07468851454 (diff)
downloadpablotron.org-81824c0bcf96e0a850d4df7222c4590e00b7918c.tar.bz2
pablotron.org-81824c0bcf96e0a850d4df7222c4590e00b7918c.zip
add posts/2022-01-28-site-update-media-shrinkage.md
Diffstat (limited to 'content/posts')
-rw-r--r--content/posts/2022-01-28-site-update-media-shrinkage.md88
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."