blob: b89f06468c877a1ba4e42478c75d674032e753b0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
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>`][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."
|
