Lighthouse and YellowLabTools optimizations

23 files changed, 35 insertions, 37 deletions

diff --git a/README.md b/README.md
index 0db22ce..be9f552 100644
--- a/README.md
+++ b/README.md
@@ -356,6 +356,13 @@ leanify -i 7777 *.png
 leanify -i 7777 *.ico
 ```
 
+With larger displays and greater pixel density becoming common it is probably a good idea to use atleast a littly bit of lossy compression. For example you can use pngquant with a 93% quality and you will often get images around 1/2 the size. Understand that pngquant is cumulative, so you should keep your original images somewhere, and only ever use pngquant once per image, if you use it again and again on the same image then you will lower the image quality each time. Always use oxipng afterwards, oxipng is lossless.
+
+```bash
+pngquant --skip-if-larger --strip --quality=93-93 --speed 1 *.png
+oxipng -o max --strip all -a -Z *.png
+```
+
 ### Pre gzip/brotli content to serve with nginx:
 
 If you are serving your site with nginx, you can pre gzip your content.
diff --git a/content/overview-images/ferris-gesture.png b/content/overview-images/ferris-gesture.png
index e9c8708..67f6cd1 100644
--- a/content/overview-images/ferris-gesture.png
+++ b/content/overview-images/ferris-gesture.png
diff --git a/content/overview-rich-content/index.fr.md b/content/overview-rich-content/index.fr.md
index 819b2db..e768252 100644
--- a/content/overview-rich-content/index.fr.md
+++ b/content/overview-rich-content/index.fr.md
@@ -34,18 +34,18 @@ Le `video` shortcode prend un `sources` paramètre (un tableau de chaînes) et r
 
 Le `image` shortcode renvoie une `<picture>` balise et accepte trois paramètres : `sources` (un tableau de chaînes), `fallback_path`, et `fallback_alt` (les deux chaînes).
 
-Chaque chaîne du `sources` tableau doit être un chemin vers un fichier image d'un type différent (`webp`, `png`, `jpg`, etc). `fpath` et
+Chaque chaîne du `sources` tableau doit être un chemin vers un fichier image d'un type différent (`avif`, `webp`, `png`, `jpg`, etc). `fpath` et
 `falt` sont utilisés pour créer une `<img>` balise sur laquelle le navigateur peut se replier si les autres formats ne sont pas encore pris en charge, fw et fh définissent la largeur et la hauteur de la solution de repli
 
 ### Usage
 ```rs
-{{/* image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}}
+{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}}
 ```
 ### Sortir
 ```html
-{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
 ```
-{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
 
 ## GIF
 
diff --git a/content/overview-rich-content/index.md b/content/overview-rich-content/index.md
index 8f86d3b..4dc2285 100644
--- a/content/overview-rich-content/index.md
+++ b/content/overview-rich-content/index.md
@@ -41,19 +41,19 @@ parameters: `sources` (an array of strings), `fallback_path`, and
 `fallback_alt` (both strings).
 
 Each string in the `sources` array should be a path to an image file of
-a different type (`webp`, `png`, `jpg`, etc). `fpath` and
+a different type (`avif`, `webp`, `png`, `jpg`, etc). `fpath` and
 `falt` are used to create an `<img>` tag for the browser to fall
 back on if the other formats aren't yet supported, fw and fh set the width and height of the fallback
 
 ### Usage
 ```rs
-{{/* image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}}
+{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}}
 ```
 ### Output
 ```html
-{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
 ```
-{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
 
 ## GIF
 
diff --git a/content/overview-rich-content/over9000-400.avif b/content/overview-rich-content/over9000-400.avif
new file mode 100644
index 0000000..e4c6b1d
--- /dev/null
+++ b/content/overview-rich-content/over9000-400.avif
diff --git a/content/overview-rich-content/over9000-400.webp b/content/overview-rich-content/over9000-400.webp
deleted file mode 100644
index 1b2876f..0000000
--- a/content/overview-rich-content/over9000-400.webp
+++ /dev/null
diff --git a/content/overview-rich-content/over9000-640.avif b/content/overview-rich-content/over9000-640.avif
new file mode 100644
index 0000000..38d314b
--- /dev/null
+++ b/content/overview-rich-content/over9000-640.avif
diff --git a/content/overview-rich-content/over9000-960.avif b/content/overview-rich-content/over9000-960.avif
new file mode 100644
index 0000000..ae3584d
--- /dev/null
+++ b/content/overview-rich-content/over9000-960.avif
diff --git a/content/overview-rich-content/over9000-960.webp b/content/overview-rich-content/over9000-960.webp
deleted file mode 100644
index 28fba9c..0000000
--- a/content/overview-rich-content/over9000-960.webp
+++ /dev/null
diff --git a/sass/abridge.scss b/sass/abridge.scss
index 5573482..2cde0d3 100644
--- a/sass/abridge.scss
+++ b/sass/abridge.scss
@@ -711,23 +711,9 @@ $syntax: true !default;//syntax highlighting for code blocks
       margin-bottom: 0;
       margin-top: 0.2rem;
     }
-    li {
-      display: inline-block;
-      margin: 0 .2rem;
-    }
   }
   main nav {
-    ul {
-      display: flex;
-      padding-left: 0;
-    }
     margin-top: var(--s2);//pagination margin
-    li {
-      margin: .2rem;
-    }
-    li.inp {
-      padding-top: .1rem;
-    }
   }
   .outp {
     padding: 0 .26rem .2rem;
@@ -751,11 +737,7 @@ $syntax: true !default;//syntax highlighting for code blocks
     color: var(--a1);//pagination color current page
   }
   footer nav {
-    ul {
-      margin: 0;
-      padding: 0;
-    }
-    li {
+    i {
       margin: 0 .2rem .4rem;
     }
   }
diff --git a/screenshot.png b/screenshot.png
index cd3a293..ec8d65f 100644
--- a/screenshot.png
+++ b/screenshot.png
diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png
index 4eba45e..3a075c3 100644
--- a/static/android-chrome-192x192.png
+++ b/static/android-chrome-192x192.png
diff --git a/static/android-chrome-192x192m.png b/static/android-chrome-192x192m.png
index f7e37a2..f1e485d 100644
--- a/static/android-chrome-192x192m.png
+++ b/static/android-chrome-192x192m.png
diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png
index 371daf4..b671d86 100644
--- a/static/android-chrome-512x512.png
+++ b/static/android-chrome-512x512.png
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
index b872d32..2923e41 100644
--- a/static/apple-touch-icon.png
+++ b/static/apple-touch-icon.png
diff --git a/static/banner.png b/static/banner.png
index 775bff2..a4a46d5 100644
--- a/static/banner.png
+++ b/static/banner.png
diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png
index e68ac3c..df1736f 100644
--- a/static/favicon-32x32.png
+++ b/static/favicon-32x32.png
diff --git a/static/mstile-150x150.png b/static/mstile-150x150.png
index 41ce573..7a18d2b 100644
--- a/static/mstile-150x150.png
+++ b/static/mstile-150x150.png
diff --git a/templates/base.html b/templates/base.html
index 2ab46f8..fd3c553 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -9,7 +9,7 @@
   {{- macros_head::stylesheets(config=config) }}
   <meta charset="utf-8" />
   <meta http-equiv="x-ua-compatible" content="ie=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
   {{- macros_head::stylesheets_preload(config=config) }}
   {{- macros_head::js(config=config) }}
   <meta name="base" content="{{ config.base_url | safe }}" />
diff --git a/templates/macros/social.html b/templates/macros/social.html
index 6ad83de..1221ce7 100644
--- a/templates/macros/social.html
+++ b/templates/macros/social.html
@@ -1,5 +1,5 @@
 {%- macro social_links(config) %}
-      <nav>
+      <nav><div>
           {%- if config.generate_feed and config.extra.feed -%}
           <a href="{{ get_url(path=config.feed_filename, trailing_slash=false, lang=lang) | safe }}" target="_blank" title="Atom/RSS Feed"><i type="Button" class="svg rss" title="Atom/RSS Feed"></i></a>{% endif -%}
           {%- if config.extra.mail -%}
@@ -54,5 +54,5 @@
           <a href="https://www.buymeacoffee.com/{{ config.extra.buymeacoffee }}/" target="_blank" title="Buy Me A Coffee"><i type="Button" class="svg buymeacoffee" title="Buy Me A Coffee"></i></a>{% endif -%}
           {%- if config.extra.github_sponsor -%}
           <a href="https://github.com/sponsors/{{ config.extra.github_sponsor }}/" target="_blank" title="GitHub Sponsor"><i type="Button" class="svg github-sponsor" title="GitHub Sponsor"></i></a>{% endif -%}
-      </nav>
+      </div></nav>
 {%- endmacro %}
diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html
index 8452ce9..4f9d3de 100644
--- a/templates/shortcodes/image.html
+++ b/templates/shortcodes/image.html
@@ -3,5 +3,5 @@
     {% set type = source | split(pat=".") | last -%}
     <source srcset="{{ config.base_url | safe}}{{ page.path | safe }}{{ source | safe }}" type="{{ 'img/' ~ type }}" />
   {% endfor -%}
-  <img src="{{ fpath }}" alt="{{ falt | default(value='Image') }}"{% if fw %} width="{{fw}}"{% endif %}{% if fh %} height="{{fh}}"{% endif %} />
+  <img src="{{ fpath }}" alt="{{ falt | default(value='Image') }}"{% if fw %} width="{{fw}}"{% endif %}{% if fh %} height="{{fh}}"{% endif %} loading="lazy" />
 </picture>
diff --git a/templates/shortcodes/img.html b/templates/shortcodes/img.html
index cf2a562..f23f783 100644
--- a/templates/shortcodes/img.html
+++ b/templates/shortcodes/img.html
@@ -24,5 +24,8 @@
 {%- endif %}
 
 {%- set img = src | split(pat="/") | last %}
-{%- set name = img | split(pat=".") | first %}
-<img src="{{ path | safe }}{{ img | safe }}"{% if class %} class="{{class}}"{% endif %}{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} />
+
+{%- if not alt %}
+  {%- set alt = img | split(pat=".") | first %}
+{%- endif %}
+<img src="{{ path | safe }}{{ img | safe }}"{% if class %} class="{{class}}"{% endif %}{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} loading="lazy" />
diff --git a/templates/shortcodes/imgswap.html b/templates/shortcodes/imgswap.html
index f8c983c..4397b29 100644
--- a/templates/shortcodes/imgswap.html
+++ b/templates/shortcodes/imgswap.html
@@ -25,8 +25,11 @@
   {%- endif %}
 
   {%- set img = main_src | split(pat="/") | last %}
-  {%- set name = img | split(pat=".") | first %}
-  <img src="{{ path | safe }}{{ img | safe }}" class="img-main{% if class %} {{class}}{% endif %}"{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} />
+
+  {%- if not alt %}
+    {%- set alt = img | split(pat=".") | first %}
+  {%- endif %}
+  <img src="{{ path | safe }}{{ img | safe }}" class="img-main{% if class %} {{class}}{% endif %}"{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} loading="lazy" />
 
   {%- set dirtest = swap_src | trim_start_matches(pat="./") %}
   {%- if dirtest is containing("/") %}
@@ -54,6 +57,9 @@
   {%- endif %}
 
   {%- set img = swap_src | split(pat="/") | last %}
-  {%- set name = img | split(pat=".") | first %}
-  <img src="{{ path | safe }}{{ img | safe }}" class="img-swap{% if class %} {{class}}{% endif %}"{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} />
+
+  {%- if not alt %}
+    {%- set alt = img | split(pat=".") | first %}
+  {%- endif %}
+  <img src="{{ path | safe }}{{ img | safe }}" class="img-swap{% if class %} {{class}}{% endif %}"{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} loading="lazy" />
 </div>