<rrw:image>

Ce widget fournit une image modifiable

<rrw:image id="myimg" width="xxx" height="xxx" />

Le widget <rrw:image> est rendu comme un image <img> lors de la publication.

Les attributs disponibles sont :

• id="xxx" [obligatoire] L'identifiant unique du widget Image, caractères alphanumériques uniquement.

• width="xxx" [obligatoire] La largeur en pixel de l'image

• height="xxx" [obligatoire] La hauteur en pixel de l'image

• class="xxx" [optionnel] Liste de classes associées à cette image

• alt="texte alternatif" [optionnel] Texte alternatif à l'affichage de l'image

• data-rrw-lazy="no" [optionnel] Désactive le chargement différé de l'image

• data-rrw-srcset="auto" [optionnel] Définit les tailles alternatives de l'image selon la taille de l'écran pour les images responsive.

Optimisation de l'image

Quelque soit la taille de l'image sur votre ordinateur, elle sera redimensionnée dans les dimensions définies par les attributs du widget. Un action sur la molette de la souris permet de zoomer/dézoomer l'image, un cliquer/déplacer permet de la recadrer.

Conformément aux bonnes pratiques SEO, les images PNG et JPG sont également optimisées pour réduire leur taille et accroitre les performances de votre site.

Chargement différé ou lazy-loading

Le chargement différé consiste à ne charger l'image depuis le serveur au moment ou celle-ci va apparaitre à l'écran, cela permet d'optimiser les temps de chargement de page. Par défaut cette fonctionnalité est activé par RunRunWeb lors de l'utilisation du widget Image, elle peut être désactivée en précisant l'attribut data-rrw-lazy="no".

Image responsive

Sur un site responsive, c'est à dire qui s'adapte à la taille de l'écran (ordinateur, mobile, tablette), une même image peut avoir une taille différente. HTML prévoit cette fonctionnalité avec l'attribut srcset d'une balise <IMG>. RunRunWeb va automatiquement générer plusieurs déclinaisons de l'image dans une taille différente et créer le rendu HTML avec les attributs qui conviennent.

Pour activer cette fonctionnalité, il faut ajouter l'attribut data-rrw-srcset="auto". Selon la taille initiale de l'image, deux versions, 640px de largeur et 320px de largeur, vont être créés et proposés au chargement (la hauteur est calculée pour conserver les proportions de l'image). Ces valeurs automatiques peuvent être personnalisées, en remplaçant la valeur auto par la taille en pixel suivie de w, par exemple 500w pour une largeur de 500px. Plusieurs tailles sont possibles en séparant les tailles par une virgule, par exemple, 100w,500w,800w va générer les tailles 100 pixels de large, 500 et 800.