Insérer des images avec HTML - comment cela fonctionne
Si vous souhaitez insérer une image sur votre site Web en HTML, utilisez la balise img. Lisez ici comment cela fonctionne exactement et ce à quoi vous devez faire attention.
Comment insérer des images avec HTML - les bases
- Avec le jour
peut insérer des images. - La source de l'image est donnée dans la balise:
insère le fichier "testbild.webp" du sous-dossier "images" du site. - Des sources externes via URL sont également possibles:
intègre le logo CHIP de nos serveurs.
Attributs HTML pour les images incorporées
De nombreux attributs peuvent être ajoutés dans la balise img:
- Utilisez "largeur" et "hauteur" pour déterminer la taille de l'image sur le site: L'image
est affiché carré avec une longueur de côté de 100 pixels. - Avec "alt" vous définissez un texte alternatif qui s'affiche si l'image respective ne peut pas être chargée. Vous devez toujours définir cet attribut lors de l'insertion d'images avec HTML.
- L'attribut "bordure" spécifie l'épaisseur du cadre en pixels. Une photo avec
a un cadre qui est relativement épais avec cinq pixels. - Utilisez "aligner" pour aligner le graphique. Les valeurs de cet attribut sont "bottom", "top", "middle", "left", "right" and "center".
- Avec "hspace" et "vspace", vous pouvez (horizontalement et verticalement) définir une distance à l'image.
Quel format dois-je utiliser?
Il existe différents formats d'image que vous pouvez inclure dans le code HTML.
- JPG: les images au format JPG sont le plus souvent utilisées pour les pages Web. Ce format représente 16, 7 millions de couleurs De plus, un JPG peut très bien être compressé. Le fichier image peut donc être rendu très petit, ce qui permet un temps de chargement rapide.
- PNG: Le format PNG peut également afficher 16, 7 millions de couleurs et peut être compressé. L'avantage par rapport au format JPG est que la compression est possible sans pertes.
- Les zones définies au format PNG peuvent également être affichées de manière transparente. Cependant, les très anciens navigateurs ont des problèmes d'affichage des transparents.
- GIF: Si vous souhaitez insérer des images animées avec HTML, le format GIF convient. Seules 256 couleurs sont affichées dans ce format et la compression a lieu automatiquement sans aucune option de réglage.
- Le format GIF convient le mieux aux petits graphiques ou logos animés. Pour garantir que les logos s'intègrent harmonieusement dans une page, les transparents peuvent être utilisés au format GIF comme un PNG.
exemple HTML
- Cela intègre le logo CHIP de notre site Web.
- Il est affiché avec une hauteur de 100 pixels et une largeur de 200 pixels.
- S'il ne peut pas être chargé, "CHIP-Logo" s'affiche sous forme de texte vierge.
- L'image est encadrée par un cadre à deux pixels.
- Il est aligné à droite et est à 50 pixels des autres éléments latéraux.