fix image shortcodes for multilingual, and other optimizations

2 files changed, 36 insertions, 24 deletions

diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md
index 9a68006..956fdcd 100644
--- a/content/overview-images/index.fr.md
+++ b/content/overview-images/index.fr.md
@@ -20,39 +20,41 @@ Cet article couvre les **shortcodes imgswap et img**. Les images peuvent égalem
 
 - src est le chemin et le nom de fichier de l'image. (obligatoire)
 - class définit une classe pour l'image. (facultatif)
-- alt définit la note alt pour l'image. (recommandé pour google phare)
-- w est la largeur de l'image. (recommandé pour google phare)
-- h est la hauteur de l'image. (recommandé pour google phare)
+- alt définit la note alt pour l'image.
+- w est la largeur de l'image.
+- h est la hauteur de l'image.
+
+** google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs. **
 
 ## Utilisation (même chemin)
 ```rs
-{{/* img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) */}}
+{{/* img(src="ferris-happy.svg" alt="Ferris est heureux") */}}
 ```
 **Sortir**
 ```html
-{{ img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) }}
+{{ img(src="ferris-happy.svg" alt="Ferris est heureux") }}
 ```
-{{ img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) }}
+{{ img(src="ferris-happy.svg" alt="Ferris est heureux") }}
 
 ## Utilisation (chemin relatif ./)
 ```rs
-{{/* img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" w=600 h=400) */}}
+{{/* img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour") */}}
 ```
 **Sortir**
 ```html
-{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" w=600 h=400) }}
+{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour") }}
 ```
-{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" w=600 h=400) }}
+{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour") }}
 
 ## Utilisation (chemin racine /)
 ```rs
-{{/* img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé" w=600 h=400) */}}
+{{/* img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé") */}}
 ```
 **Sortir**
 ```html
-{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé" w=600 h=400) }}
+{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé") }}
 ```
-{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé" w=600 h=400) }}
+{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé") }}
 
 # Image SVG directement dans le code :
 ```html
@@ -69,35 +71,39 @@ Lorsque vous passez votre souris sur l'image, l'image à comparer s'affiche.
 
 - main_src est le chemin et le nom de fichier de l'image par défaut. (obligatoire)
 - swap_src est le chemin et le nom de fichier de l'image d'échange. (obligatoire)
+- class définit une classe pour l'image. (facultatif)
+- alt définit la note alt pour l'image.
 - w est la largeur de l'image.
 - h est la hauteur de l'image.
 
+** google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs. **
+
 ## Utilisation (même chemin)
 ```rs
-{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) */}}
+{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") */}}
 ```
 **Sortir**
 ```html
-{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }}
+{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }}
 ```
-{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }}
+{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }}
 
 ## Utilisation (chemin relatif ./)
 ```rs
-{{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) */}}
+{{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") */}}
 ```
 **Sortir**
 ```html
-{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }}
+{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }}
 ```
-{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }}
+{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }}
 
 ## Utilisation (chemin racine /)
 ```rs
-{{/* imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) */}}
+{{/* imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg") */}}
 ```
 **Sortir**
 ```html
-{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }}
+{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg") }}
 ```
-{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }}
+{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg") }}
diff --git a/content/overview-images/index.md b/content/overview-images/index.md
index b1f07e2..cd3181c 100644
--- a/content/overview-images/index.md
+++ b/content/overview-images/index.md
@@ -20,9 +20,11 @@ This post covers the **imgswap and img shortcodes**. Images can also be embedded
 
 - src is the path and filename of the image. (mandatory)
 - class sets a class for the image. (optional)
-- alt sets the alt note for the image. (recommended for google lighthouse)
-- w is the width of the image. (recommended for google lighthouse)
-- h is the height of the image. (recommended for google lighthouse)
+- alt sets the alt note for the image.
+- w is the width of the image.
+- h is the height of the image.
+
+** google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values. **
 
 ## Usage (same path)
 ```rs
@@ -69,9 +71,13 @@ When you hover your mouse over the image it will display the image to compare.
 
 - main_src is the path and filename for the default image. (mandatory)
 - swap_src is the path and filename for the swap image. (mandatory)
+- class sets a class for the image. (optional)
+- alt sets the alt note for the image.
 - w is the width of the image.
 - h is the height of the image.
 
+** google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values. **
+
 ## Usage (same path)
 ```rs
 {{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") */}}