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.
Certificats SSL IONOS
Gagnez la confiance de vos visiteurs en protégeant votre site Web avec un certificat SSL !
À 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.
Articles similaires
Élément HTML div : tout ce qu’il faut savoir sur le conteneur div
La balise div n’ayant pas de caractéristiques sémantiques propres, son utilisation n’est recommandée depuis l’introduction de HTML5 que lorsqu’aucun élément plus approprié n’est disponible. Vous apprendrez ici tout ce qu’il faut savoir sur le conteneur div, comment l’utiliser à l’aide d’exemples pratiques et pourquoi div en HTML ne joue pratiquement plus aucun rôle.
Exemple de titre pour votre site Web
La balise HTML style est le meilleur moyen de concevoir l’apparence des différents éléments d’un site Web et de construire ainsi la page de manière optimale. Vous apprendrez ici à quoi sert exactement la balise style, comment elle est structurée et quels attributs HTML sont compatibles. Vous pouvez ainsi facilement intégrer la balise dans votre code.
_target : définir des liens à cibler en HTML
Si vous souhaitez intégrer des liens sur votre site Web, vous pouvez utiliser l’attribut HTML target pour définir le lien ainsi que l’endroit où il doit s’ouvrir. Vous décidez ainsi si les utilisateurs restent sur votre site Internet ou passent au suivant. Vous apprendrez dans cet article détaillé comment utiliser _target et ce à quoi vous devez faire attention.
