Optimize and improve naming of all images in knowledge base

157 files changed, 151 insertions, 169 deletions

diff --git a/source/_includes/image.html b/source/_includes/image.html
new file mode 100644
index 0000000..a9bc3fd
--- /dev/null
+++ b/source/_includes/image.html
@@ -0,0 +1,34 @@
+{% assign name_dot_format = include.file | split: "." %}
+{% assign name   = name_dot_format | first %}
+{% assign format = name_dot_format | last  %}
+
+{% comment %} Let 'suffix' = last 4 chars of 'name', 'prefix' = the rest {% endcomment %}
+{% assign  suffix = name | slice: -4, 4 %}
+{% assign rname   = name | split: "" | reverse | join: "" %}
+{% assign rsuffix = suffix | split: "" | reverse | join: "" %}
+{% assign rprefix = rname | remove_first: rsuffix %}
+{% assign  prefix = rprefix | split: "" | reverse | join: "" %}
+
+{% comment %} If 'name' ends in "full", half-size image must exist {% endcomment %}
+{% assign name_full = name %}
+{% if suffix == "full" %}
+  {% assign name_half = prefix | append: "half" %}
+{% else %}
+  {% assign name_half = name_full %}
+{% endif %}
+
+{% comment %} Insert the image, linking to the full-size version {% endcomment %}
+<p>
+<a href="{{ name_full }}.{{ format }}">
+ {% assign set_width = "width:" | append: include.width %}
+ <picture markdown="0">
+  <source srcset="{{ name_half }}.avif" type="image/avif">
+  {% if name_full == name_half %}
+   <img src="{{ name_half }}.{{ format }}" style="{{ include.style | default: set_width }}" alt="{{ include.alt }}" title="{{ include.alt }}">
+  {% else %}
+   <source srcset="{{ name_half }}.webp" type="image/webp">
+   <img src="{{ name_half }}.jpg" style="{{ include.style | default: set_width }}" alt="{{ include.alt }}" title="{{ include.alt }}">
+  {% endif %}
+ </picture>
+</a>
+</p>
diff --git a/source/know/concept/bernstein-vazirani-algorithm/bernstein-vazirani-circuit.avif b/source/know/concept/bernstein-vazirani-algorithm/bernstein-vazirani-circuit.avif
new file mode 100644
index 0000000..7bfd114
--- /dev/null
+++ b/source/know/concept/bernstein-vazirani-algorithm/bernstein-vazirani-circuit.avif
diff --git a/source/know/concept/bernstein-vazirani-algorithm/index.md b/source/know/concept/bernstein-vazirani-algorithm/index.md
index f91c0ba..85017dc 100644
--- a/source/know/concept/bernstein-vazirani-algorithm/index.md
+++ b/source/know/concept/bernstein-vazirani-algorithm/index.md
@@ -36,9 +36,7 @@ However, the Bernstein-Vazirani algorithm
 allows a quantum computer to do it with only a single query.
 It uses the following circuit:
 
-<a href="bernstein-vazirani-circuit.png">
-<img src="bernstein-vazirani-circuit.png" style="width:52%">
-</a>
+{% include image.html file="bernstein-vazirani-circuit.png" width="52%" alt="Bernstein-Vazirani circuit" %}
 
 Where $$U_f$$ is a phase oracle,
 whose action is defined as follows,
diff --git a/source/know/concept/bloch-sphere/bloch-small.jpg b/source/know/concept/bloch-sphere/bloch-small.jpg
deleted file mode 100644
index e99c0e1..0000000
--- a/source/know/concept/bloch-sphere/bloch-small.jpg
+++ /dev/null
diff --git a/source/know/concept/bloch-sphere/bloch.jpg b/source/know/concept/bloch-sphere/bloch.jpg
deleted file mode 100644
index 9515d84..0000000
--- a/source/know/concept/bloch-sphere/bloch.jpg
+++ /dev/null
diff --git a/source/know/concept/bloch-sphere/index.md b/source/know/concept/bloch-sphere/index.md
index 2cb7742..0ca6f1b 100644
--- a/source/know/concept/bloch-sphere/index.md
+++ b/