From 8eba9d38f2432dbfcfa3b0b019bc926a80251c70 Mon Sep 17 00:00:00 2001 From: Paul Duncan Date: Sat, 29 Jan 2022 00:09:18 -0500 Subject: posts/content/media-shrinkage: minor corrections, change slug, remove draft --- content/posts/2022-01-28-media-shrinkage.md | 87 +++++++++++++++++++++ .../2022-01-28-site-update-media-shrinkage.md | 88 ---------------------- 2 files changed, 87 insertions(+), 88 deletions(-) create mode 100644 content/posts/2022-01-28-media-shrinkage.md delete mode 100644 content/posts/2022-01-28-site-update-media-shrinkage.md (limited to 'content') diff --git a/content/posts/2022-01-28-media-shrinkage.md b/content/posts/2022-01-28-media-shrinkage.md new file mode 100644 index 0000000..b89f064 --- /dev/null +++ b/content/posts/2022-01-28-media-shrinkage.md @@ -0,0 +1,87 @@ +--- +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] + element wrapped in a [`
`][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." diff --git a/content/posts/2022-01-28-site-update-media-shrinkage.md b/content/posts/2022-01-28-site-update-media-shrinkage.md deleted file mode 100644 index d11dee2..0000000 --- a/content/posts/2022-01-28-site-update-media-shrinkage.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -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] - element wrapped in a [`
`][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." -- cgit v1.2.3