---
slug: media-shrinkage
title: "Media Shrinkage"
date: "2022-01-28T08:54:25-04:00"

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%**"
---

Recently 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 and browser support.  Will investigate again later.
* 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."