Cet article couvre les shortcodes imgswap et img. Les images peuvent également être intégrées directement à l'aide de markdown ![Ferris](ferris.svg), mais il est préférable d'utiliser un shortcode afin de pouvoir définir explicitement la largeur et la hauteur, cela aidera à empêcher le changement de mise en page du contenu, ce qui améliore l'expérience utilisateur et le score Google Lighthouse.
img Shortcode
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)
Utilisation (même chemin)
{{img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400)}}
Sortir
<imgsrc="ferris-happy.svg"alt="Ferris est heureux"width="600"height="400"loading="lazy"/>
Utilisation (chemin relatif ./)
{{img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" w=600 h=400)}}
Sortir
<imgsrc="img/ferris-gesture.svg"alt="Ferris dit bonjour"width="600"height="400"loading="lazy"/>
Utilisation (chemin racine /)
{{img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé" w=600 h=400)}}
Sortir
<imgsrc="https://deploy-preview-133--abridge.netlify.app/overview-rich-content/ferris.svg"alt="Ferris le Rustacé"width="600"height="400"loading="lazy"/>