From 52ff45a7c687d502492be0fa6e54f9b99d501465 Mon Sep 17 00:00:00 2001
From: Prefetch
Date: Mon, 27 Feb 2023 15:03:21 +0100
Subject: Publish "Website adventures" part 4 about images
---
.../blog/2022/website-adventures-basics/index.md | 5 +-
.../2022/website-adventures-generators/index.md | 7 +-
source/blog/2022/website-adventures-maths/index.md | 5 +-
.../website-adventures-images/avif-reddit.avif | Bin 0 -> 59792 bytes
.../blog/2023/website-adventures-images/index.md | 394 +++++++++++++++++++++
.../website-adventures-images/jpeg-arithmetic.jpg | Bin 0 -> 308893 bytes
.../website-adventures-images/jpeg-huffman.jpg | Bin 0 -> 339094 bytes
.../website-adventures-images/png-original.png | Bin 0 -> 1207860 bytes
.../png-oxipng-zopfli.png | Bin 0 -> 973478 bytes
.../2023/website-adventures-images/png-oxipng.png | Bin 0 -> 982403 bytes
.../website-adventures-images/png-zopflipng.png | Bin 0 -> 975943 bytes
.../website-adventures-images/simulation-full.png | Bin 0 -> 973478 bytes
.../website-adventures-images/simulation-half.avif | Bin 0 -> 27563 bytes
.../website-adventures-images/simulation-half.jpg | Bin 0 -> 127051 bytes
.../website-adventures-images/simulation-half.png | Bin 0 -> 246421 bytes
.../website-adventures-images/simulation-half.webp | Bin 0 -> 55982 bytes
.../website-adventures-images/webp-lossless.webp | Bin 0 -> 766604 bytes
.../2023/website-adventures-images/webp-lossy.webp | Bin 0 -> 139868 bytes
.../webp-near-lossless.webp | Bin 0 -> 492606 bytes
.../know/concept/modulational-instability/index.md | 2 +-
20 files changed, 405 insertions(+), 8 deletions(-)
create mode 100644 source/blog/2023/website-adventures-images/avif-reddit.avif
create mode 100644 source/blog/2023/website-adventures-images/index.md
create mode 100644 source/blog/2023/website-adventures-images/jpeg-arithmetic.jpg
create mode 100644 source/blog/2023/website-adventures-images/jpeg-huffman.jpg
create mode 100644 source/blog/2023/website-adventures-images/png-original.png
create mode 100644 source/blog/2023/website-adventures-images/png-oxipng-zopfli.png
create mode 100644 source/blog/2023/website-adventures-images/png-oxipng.png
create mode 100644 source/blog/2023/website-adventures-images/png-zopflipng.png
create mode 100644 source/blog/2023/website-adventures-images/simulation-full.png
create mode 100644 source/blog/2023/website-adventures-images/simulation-half.avif
create mode 100644 source/blog/2023/website-adventures-images/simulation-half.jpg
create mode 100644 source/blog/2023/website-adventures-images/simulation-half.png
create mode 100644 source/blog/2023/website-adventures-images/simulation-half.webp
create mode 100644 source/blog/2023/website-adventures-images/webp-lossless.webp
create mode 100644 source/blog/2023/website-adventures-images/webp-lossy.webp
create mode 100644 source/blog/2023/website-adventures-images/webp-near-lossless.webp
(limited to 'source')
diff --git a/source/blog/2022/website-adventures-basics/index.md b/source/blog/2022/website-adventures-basics/index.md
index 64ed446..02aebef 100644
--- a/source/blog/2022/website-adventures-basics/index.md
+++ b/source/blog/2022/website-adventures-basics/index.md
@@ -5,7 +5,7 @@ layout: "blog"
toc: true
---
-Published on 2022-11-20, last updated on 2022-11-28.
+Published on 2022-11-20, last updated on 2023-02-27.
Making and managing this personal website has been an adventure.
In this series, I go over the technical challenges I've encountered
@@ -13,7 +13,8 @@ and philosophical decisions I've made,
and I review some of the tools I've used along the way.
After [part 1](/blog/2022/website-adventures-generators/),
this is part 2,
-followed by [part 3](/blog/2022/website-adventures-maths/).
+followed by [part 3](/blog/2022/website-adventures-maths/)
+and [part 4](/blog/2023/website-adventures-images/).
diff --git a/source/blog/2022/website-adventures-generators/index.md b/source/blog/2022/website-adventures-generators/index.md
index 42a6230..da7dde4 100644
--- a/source/blog/2022/website-adventures-generators/index.md
+++ b/source/blog/2022/website-adventures-generators/index.md
@@ -5,14 +5,15 @@ layout: "blog"
toc: true
---
-Published on 2022-11-15, last updated on 2022-11-28.
+Published on 2022-11-15, last updated on 2023-02-27.
Making and managing this personal website has been an adventure.
In this series, I go over the technical challenges I've encountered
and philosophical decisions I've made,
and I review some of the tools I've used along the way.
-This is part 1, followed by [part 2](/blog/2022/website-adventures-basics/)
-and [part 3](/blog/2022/website-adventures-maths/).
+This is part 1, followed by [part 2](/blog/2022/website-adventures-basics/),
+[part 3](/blog/2022/website-adventures-maths/)
+and [part 4](/blog/2023/website-adventures-images/).
diff --git a/source/blog/2022/website-adventures-maths/index.md b/source/blog/2022/website-adventures-maths/index.md
index a49b473..879a7e3 100644
--- a/source/blog/2022/website-adventures-maths/index.md
+++ b/source/blog/2022/website-adventures-maths/index.md
@@ -5,7 +5,7 @@ layout: "blog"
toc: true
---
-Published on 2022-11-28.
+Published on 2022-11-28, last updated on 2023-02-27.
Making and managing this personal website has been an adventure.
In this series, I go over the technical challenges I've encountered
@@ -13,7 +13,8 @@ and philosophical decisions I've made,
and I review some of the tools I've used along the way.
After [part 1](/blog/2022/website-adventures-generators/)
and [part 2](/blog/2022/website-adventures-basics/),
-this is part 3.
+this is part 3,
+followed by [part 4](/blog/2023/website-adventures-images/).
diff --git a/source/blog/2023/website-adventures-images/avif-reddit.avif b/source/blog/2023/website-adventures-images/avif-reddit.avif
new file mode 100644
index 0000000..686672a
Binary files /dev/null and b/source/blog/2023/website-adventures-images/avif-reddit.avif differ
diff --git a/source/blog/2023/website-adventures-images/index.md b/source/blog/2023/website-adventures-images/index.md
new file mode 100644
index 0000000..d678362
--- /dev/null
+++ b/source/blog/2023/website-adventures-images/index.md
@@ -0,0 +1,394 @@
+---
+title: "Adventures in making this website: image optimization"
+date: 2023-02-27
+layout: "blog"
+toc: true
+---
+
+Published on 2023-02-27.
+
+Making and managing this personal website has been an adventure.
+In this series, I go over the technical challenges I've encountered
+and philosophical decisions I've made,
+and I review some of the tools I've used along the way.
+After [part 1](/blog/2022/website-adventures-generators/),
+[part 2](/blog/2022/website-adventures-basics/)
+and [part 3](/blog/2022/website-adventures-maths/),
+this is part 4.
+
+
+
+## Principles
+
+After some consideration,
+I settled on the following five commandments of image optimization
+for this website:
+
+1. **Provide the originals.**
+ If any scaling or lossy compression has been done
+ on an image displayed on the page,
+ wrap it in `` linking to the full-size lossless original file.
+
+2. **Prioritize quality**.
+ My server provider doesn't charge me for traffic,
+ and there aren't many images on this website,
+ so I can afford to keep the quality high.
+ The degradation of an 80% JPEG compared to 90%
+ isn't worth it just to save a few kilobytes.
+ You should do your own tests to decide what quality
+ is acceptable for the kind of images you have.
+
+3. **Limit the resolutions.**
+ It's wasteful to use a 2000px wide image
+ if it's only 200px wide on a user's screen.
+ I use the following rules to choose resolutions:
+
+ 1. If an image is `W`px wide my screen,
+ its resolution should be roughly `1.5*W`px:
+ a 50% surplus is friendly to high-DPI screens,
+ and prevents scaling artefacts.
+ This rule also works in reverse:
+ if I have an `X`px file for whatever reason,
+ its scale should be chosen such that it takes up around `0.67*X`px on my screen.
+
+ 2. Because my website's `` is ~720px wide for me,
+ the largest sensible image width is ~1080px.
+ But sometimes more is needed to show all details:
+ in that case, display a downscaled image on the page,
+ linking to the original.
+ When downscaling, always divide the width and height
+ by an integer divisor of both.
+
+4. **Use modern formats.**
+ The JPEG standard was released in 1992,
+ and in the three decades since then,
+ a lot of research has been done in image and video compression.
+ If a modern format can shrink files by 75%
+ with little to no change in quality, why wouldn't I use it?
+
+5. **Maintain compatibility.**
+ Modern image formats are great, but some are so modern
+ that almost nobody can use them, so fallbacks should be provided.
+ Fortunately, HTML has a built-in way to do this, see below.
+
+The HTML `