Add webp alternative to reduce loading time

Also, edit CSS version to clear cache

21 files changed, 55 insertions, 36 deletions

diff --git a/content/posts/2021-05-30-css-stylus.md b/content/posts/2021-05-30-css-stylus.md
index 65a9e8f..b5206ae 100644
--- a/content/posts/2021-05-30-css-stylus.md
+++ b/content/posts/2021-05-30-css-stylus.md
@@ -29,7 +29,10 @@ privacy policy:
 I've customized my theme to look a bit like my vim theme, badwolf, but with a
 lighter background:
 
-![badwolf-ish](/posts/badwolf-ish.png)
+<picture>
+  <source srcset="images/badwolf-ish.webp" type="image/webp">
+  <img alt="badwolf-ish theme" src="/images/badwolf-ish.png">
+</picture>
 
 Here is the CSS I used:
 
diff --git a/content/posts/2021-06-21-ipwhl-update.md b/content/posts/2021-06-21-ipwhl-update.md
index 342dd34..c431561 100644
--- a/content/posts/2021-06-21-ipwhl-update.md
+++ b/content/posts/2021-06-21-ipwhl-update.md
@@ -76,37 +76,59 @@ programming meme groups.  It represents an underlying problem of having too
 many packages depending on each other.  PyPI is saner, I would say, but it does
 have that problem.
 
-![xkcd comics "Dependency":
-A tower of blocks is shown. The upper half consists of many tiny blocks
-balanced on top of one another to form smaller towers, labeled:
-"All modern digital infrastructure"
-The blocks rest on larger blocks lower down in the image, finally on a
-single large block. This is balanced on top of a set of blocks on the left,
-and on the right, a single tiny block placed on its side. This one is
-labeled: A project some random person in Nebraska has been thanklessly
-maintaining since 2003](/images/xkcd-dependency.png "Such dependency, wow")
-*(Image Attribution[^0])*
+<figure>
+  <picture>
+    <source srcset="/images/xkcd-dependency.webp" type="image/webp">
+    <img title="Such dependency, wow" alt='xkcd comics "Dependency":
+  A tower of blocks is shown. The upper half consists of many tiny blocks
+  balanced on top of one another to form smaller towers, labeled:
+  "All modern digital infrastructure"
+  The blocks rest on larger blocks lower down in the image, finally on a
+  single large block. This is balanced on top of a set of blocks on the left,
+  and on the right, a single tiny block placed on its side. This one is
+  labeled: A project some random person in Nebraska has been thanklessly
+  maintaining since 2003' src="/images/xkcd-dependency.png">
+  </picture>
+  <figcaption>
+   <a href="https://xkcd.com/2347">Original XKCD comics</a> shared under a
+   CC-BY-NC 2.5 License.<br>  Transcript retrieved (with some edits) from
+   <a href="https://explainxkcd.com/wiki/index.php/2347:_Dependency">
+   ExplainXKCD</a> shared under a CC-BY-SA 3.0 License.
+  </figcaption>
+</figure>
 
 I would even say if the package dependency were like the above illustration, it
 would be simple.  In reality, *circular dependency* makes it impossible to
 declare one package without declaring the other, which can be demonstrated by
 this tensegrity shape:
 
-![A tensegrity structure](/images/tensegrity.png
-"Remove any part and it's broken")
-*(I drew this!)*
+<figure>
+  <picture>
+    <source srcset="/images/tensegrity.webp" type="image/webp">
+    <img alt='a tensegrity structure' src="/images/tensegrity.png">
+  </picture>
+  <figcaption>
+    A tensegrity structure, drawn by me
+  </figcaption>
+</figure>
 
 Or, in some cases, such as for `tox`, it can even be like this:
 
-![A tensegrity icosahedron made from straws and string](https://upload.wikimedia.org/wikipedia/commons/5/5d/Icosahedral_tensegrity_structure.png "I don't even know how this work")
-*(Image attribution[^3])*
+<figure>
+  <img alt="A tensegrity icosahedron made from straws and string"
+  src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Icosahedral_tensegrity_structure.png">
+  <figcaption>
+  Icosahedral tensegrity structure, retrieved from 
+  <a href="https://commons.wikimedia.org/wiki/File:Icosahedral_tensegrity_structure.png">WikiMedia</a>, authored by QuarterNotes,
+  shared under a CC-BY-SA 4.0 License.
+  </figcaption>
+</figure>
 
 # How to help
 
 ![Rick from *Rick and Morty* dancing and singing "I'm begging for
 help"](/images/begging-for-help.png "I hope adult swim don't sue me for
 this.")
-*(Image Attribution[^1])*
 
 Due to mentioned problems, it is critical for the project to have contribution.
 To start, please take a look at [the manual page][ipwhl-man]
@@ -142,14 +164,3 @@ Therefore, you can help developing and packaging [docutils-stubs][stub] so we
 can have newer packages on IPWHL
 
 [stub]: https://github.com/tk0miya/docutils-stubs
-
-[^0]: Original XKCD comics: <https://xkcd.com/2347/>, shared under a CC-BY-NC
-  2.5 License.  
-  Transcript retrieved (with some edits) from ExplainXKCD:
-  <https://explainxkcd.com/wiki/index.php/2347:_Dependency>, shared under a
-  CC-BY-SA 3.0 License.
-[^1]: Scene cropped from *Rick and Morty*, a show by *Adult Swim*:
-  <https://www.youtube.com/watch?v=SdsJDLSI_Mo>
-[^3]: Image retrieved from WikiMedia, authored by QuarterNotes:
-  <https://commons.wikimedia.org/wiki/File:Icosahedral_tensegrity_structure.png>,
-  shared under a CC-BY-SA 4.0 License
diff --git a/content/posts/2021-07-03-decentral-contribution.md b/content/posts/2021-07-03-decentral-contribution.md
index 854a320..b3cade5 100644
--- a/content/posts/2021-07-03-decentral-contribution.md
+++ b/content/posts/2021-07-03-decentral-contribution.md
@@ -50,7 +50,10 @@ clicked on the link above, you can see how:
 4. feedback/discussion continues out of band, contributor can push updates to
    the branch, you can pull them down to review
 
-![Illustration of how it works][git-pr-il]
+<picture>
+  <source srcset="/images/git-pr.webp" type="image/webp">
+  <img src="/images/git-pr.png" alt="Illustration of how it works">
+</picture>
 
 In fact, this is described as [one of the common workflows][git-workflow] for
 git and is what happens behind the scene in GitHub pull request (except a
@@ -96,7 +99,6 @@ Disclaimer: I'm not affiliated with codeberg.org, notabug.org, or sr.ht
 [orig-thread]: https://merveilles.town/@maxc/106502916709836497
 [git-pr]: https://merveilles.town/@nasser/106504758341988490
 [git-workflow]: https://git-scm.com/about/distributed
-[git-pr-il]: /images/git-pr.png
 [sourcehut]: https://sourcehut.org/
 
 [^0]: I know [services can't be free or non-free](https://www.gnu.org/philosophy/network-services-arent-free-or-nonfree.html),
diff --git a/content/works.md b/content/works.md
index 84fdeaf..5408f3d 100644
--- a/content/works.md
+++ b/content/works.md
@@ -61,7 +61,10 @@ I have transferred the repo ownership to my friend [dinhanhx][dinhanhx-gh]
 I added face culling and added texture to the 3D shooting game [axuy][axuy] by
 [McSinyx][cnx].
 
-![axuy](axuy.png)
+<picture>
+  <source srcset="/images/axuy.webp" type="image/webp">
+  <img alt="axuy" src="/images/axuy.png">
+</picture>
 
 The game uses [palace](#palace) for 3D audio by the way.
 
diff --git a/content/works/wikt-cli.png b/content/works/wikt-cli.png
deleted file mode 100644
index eed4370..0000000
--- a/content/works/wikt-cli.png
+++ /dev/null
Binary files differdiff --git a/layouts/partials/head-extra.html b/layouts/partials/head-extra.html
index a3bc7b9..94683e8 100644
--- a/layouts/partials/head-extra.html
+++ b/layouts/partials/head-extra.html
@@ -1,5 +1,5 @@
-<link rel="stylesheet" href={{ "/css/custom.css" | absURL }}>
-<link rel="apple-touch-icon" sizes="180x180" href={{ "/images/apple-touch-icon.png" | absURL }}>
-<link rel="icon" type="image/png" sizes="32x32" href={{ "/images/favicon-32x32.png" | absURL }}>
-<link rel="icon" type="image/png" sizes="16x16" href={{ "/images/favicon-16x16.png" | absURL }}>
-<link rel="manifest" href={{ "/images/site.webmanifest" | absURL }}>
+<link rel="stylesheet" href={{ "/css/custom.css?v=20210816" }}>
+<link rel="apple-touch-icon" sizes="180x180" href={{ "/apple-touch-icon.png" }}>
+<link rel="icon" type="image/png" sizes="32x32" href={{ "/favicon-32x32.png" }}>
+<link rel="icon" type="image/png" sizes="16x16" href={{ "/favicon-16x16.png" }}>
+<link rel="manifest" href={{ "/site.webmanifest" }}>
diff --git a/static/images/android-chrome-192x192.png b/static/android-chrome-192x192.png
index 334222b..334222b 100644
--- a/static/images/android-chrome-192x192.png
+++ b/static/android-chrome-192x192.png
Binary files differdiff --git a/static/images/android-chrome-512x512.png b/static/android-chrome-512x512.png
index d935e97..d935e97 100644
--- a/static/images/android-chrome-512x512.png
+++ b/static/android-chrome-512x512.png
Binary files differdiff --git a/static/images/apple-touch-icon.png b/static/apple-touch-icon.png
index 3dcf481..3dcf481 100644
--- a/static/images/apple-touch-icon.png
+++ b/static/apple-touch-icon.png
Binary files differdiff --git a/static/images/favicon-16x16.png b/static/favicon-16x16.png
index 4e2eee7..4e2eee7 100644
--- a/static/images/favicon-16x16.png
+++ b/static/favicon-16x16.png
Binary files differdiff --git a/static/images/favicon-32x32.png b/static/favicon-32x32.png
index 9ad0725..9ad0725 100644
--- a/static/images/favicon-32x32.png
+++ b/static/favicon-32x32.png
Binary files differdiff --git a/content/works/axuy.png b/static/images/axuy.png
index 7c3cd44..7c3cd44 100644
--- a/content/works/axuy.png
+++ b/static/images/axuy.png
Binary files differdiff --git a/static/images/axuy.webp b/static/images/axuy.webp
new file mode 100644
index 0000000..195c47d
--- /dev/null
+++ b/static/images/axuy.webp
Binary files differdiff --git a/content/posts/badwolf-ish.png b/static/images/badwolf-ish.png
index b65afd9..b65afd9 100644
--- a/content/posts/badwolf-ish.png
+++ b/static/images/badwolf-ish.png
Binary files differdiff --git a/static/images/badwolf-ish.webp b/static/images/badwolf-ish.webp
new file mode 100644
index 0000000..65ebed2
--- /dev/null
+++ b/static/images/badwolf-ish.webp
Binary files differdiff --git a/static/images/begging-for-help.webp b/static/images/begging-for-help.webp
new file mode 100644
index 0000000..35d9c70
--- /dev/null
+++ b/static/images/begging-for-help.webp
Binary files differdiff --git a/static/images/favicon.ico b/static/images/favicon.ico
deleted file mode 100644
index d9ff90e..0000000
--- a/static/images/favicon.ico
+++ /dev/null
Binary files differdiff --git a/static/images/git-pr.webp b/static/images/git-pr.webp
new file mode 100644
index 0000000..206e31d
--- /dev/null
+++ b/static/images/git-pr.webp
Binary files differdiff --git a/static/images/tensegrity.webp b/static/images/tensegrity.webp
new file mode 100644
index 0000000..37bcfa8
--- /dev/null
+++ b/static/images/tensegrity.webp
Binary files differdiff --git a/static/images/xkcd-dependency.webp b/static/images/xkcd-dependency.webp
new file mode 100644
index 0000000..12d9f67
--- /dev/null
+++ b/static/images/xkcd-dependency.webp
Binary files differdiff --git a/static/images/site.webmanifest b/static/site.webmanifest
index 45dc8a2..45dc8a2 100644
--- a/static/images/site.webmanifest
+++ b/static/site.webmanifest