Balise HTML img : comment insérer des images sur votre site Web ?
La balise img vous permet d’insérer facilement des images sur votre site Web. De nombreux formats sont pris en charge. Grâce à un grand nombre d’attributs différents, le tag s’intègre encore mieux dans le format HTML.
- Sécurisez vos transferts de données
- Renforcez la confiance de vos clients
- Améliorez votre positionnement sur Google
À quoi sert la balise img ?
La balise HTML img permet d’insérer des images et des graphiques dans les sites Web. La balise img sert en quelque sorte d’espace réservé. Lorsqu’un site Web est appelé, l’attribut src déposé renvoie à l’emplacement réel de l’image. Celui-ci est alors intégré dans le site Web. En plus de l’attribut src, la balise img a besoin d’un attribut alt qui dépose un texte alternatif au cas où l’image ne peut pas être affichée. Les formats pris en charge par la balise img en HTML sont entre autres JPEG, GIF et PNG.
Quelle est la syntaxe de la balise img en HTML ?
La syntaxe d’une balise img est très claire et ne nécessite que peu de composants. La variante la plus simple est celle-ci :
<img src="voiturerouge.png" alt="Voiture de sport rouge à un feu">Lorsque vous utilisez une balise img, il est cependant plus sûr de toujours définir au moins la hauteur et la largeur de l’image sur le site. Vous pouvez ainsi vous assurer que celle-ci s’affiche correctement. Vous effectuez ces réglages à l’aide des attributs HTML width et height. Le code correspondant ressemble à ça :
<img src="voiturerouge.png" width="500" height="200" alt="Voiture rouge à un feu">L’attribut loading est également recommandé pour la balise img en HTML. Ainsi, l’image correspondante n’est chargée que lorsque les utilisateurs font défiler la page jusqu’à l’endroit correspondant. Pour cela, il suffit de régler la valeur de l’attribut loading sur lazy. Voici comment se présente le code :
<img src="voiturerouge.png" width="500" height="200" alt="Voiture rouge à un feu" loading="lazy">Quels attributs peuvent être utilisés pour la balise img en HTML ?
Outre les attributs width, height et loading mentionnés, il existe de nombreux autres attributs pris en charge par la balise img. Il s’agit notamment de tous les attributs universels, d’événements et d’autres attributs spécifiques. Voici un extrait des attributs qui peuvent être utilisés avec le tag :
| Attribut | Valeur | Description |
| alt | "Text" | Obligatoire ; indique un texte alternatif pour l’image. |
| crossorigin | anonymous, use-credentials | Définit quels sites Web étrangers peuvent accéder à l’image correspondante par un script. |
| decoding | auto, sync, async | Définit comment et si une image peut être décodée. |
| height | Pixel ou pourcentage | Définit la hauteur de l’image sur le site Web. |
| ismap | true, false | Règle l’accès de l’image à une image-map côté serveur. |
| loading | auto, eager, lazy | Détermine le moment où une image doit être chargée. |
| referrerpolicy | no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url | Définit si l’image peut également provenir d’une source non sûre. |
| sizes | sizes | Définit les tailles d’image pour différentes mises en page. |
| src | URL | Obligatoire ; indique l’adresse URL de l’image. |
| srcset | Listes d’URL | Dépose une liste d’images pour différentes utilisations, par exemple différents appareils et différentes tailles. |
| usemap | #mapname | Associe l’élément à une image-map spécifique. |
| width | Pixel ou pourcentage | Indique la largeur de l’image. |
Vous rêvez de votre propre site Web professionnel ? L’outil de création de site Web de IONOS est exactement l’outil qu’il vous faut. Celui-ci vous permet de créer votre propre page, même sans connaissances préalables. Si vous préférez laisser cette tâche à des professionnels, nos experts se tiennent à votre disposition.