diff options
| -rw-r--r-- | content/posts/2022-01-28-site-update-media-shrinkage.md | 88 |
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." |