Ajouter une image au HTML – De la syntaxe de base aux techniques avancées
Cet article explore les différentes méthodes d’ajout d’images au HTML, des balises <img> de base aux techniques avancées telles que l’utilisation de CSS et de JavaScript. Il aborde également les meilleures pratiques en matière de performances et d’accessibilité et fournit des exemples HTML pour vous aider à intégrer facilement des images dans vos projets web.
Images en HTML
Si les pages web n’étaient que du texte, elles seraient plutôt ennuyeuses. Les images et autres types de médias jouent un rôle crucial en rendant le contenu visuellement attrayant, captivant et informatif. L’ajout d’images au code HTML est donc un élément fondamental du développement web.
**Le choix du bon format d’image a une incidence sur la vitesse de chargement et la qualité :
- JPEG – le meilleur pour les photographies et les images complexes ;
- PNG – supporte la transparence, idéal pour les icônes et les logos ;
- SVG – format vectoriel modulable idéal pour les graphiques web ;
- GIF – supporte l’animation mais est limité à 256 couleurs ;
- WebP – format moderne avec une compression et une qualité supérieures.
Pour des performances et un référencement optimaux, compressez les images pour réduire la taille des fichiers et utilisez des noms de fichiers descriptifs pour améliorer la visibilité dans les moteurs de recherche.
Note: Les moteurs de recherche lisent également les noms de fichiers des images et les prennent en compte pour l’optimisation des requêtes de recherche. Donnez donc à vos images des noms significatifs : landscape.jpg est préférable à img1.jpg.
Ajout d’images à l’aide de la balise <img>
La manière la plus simple d’ajouter une image à une page HTML est d’utiliser la balise <img>. Cet élément ne contient pas de balise fermante et nécessite l’utilisation d’au moins un attribut – src, qui contient le chemin d’accès à l’image que vous souhaitez intégrer dans la page. Cependant, pour un meilleur référencement, nous recommandons d’utiliser également d’autres attributs. Les principaux attributs sont les suivants :
src– spécifie une URL pointant vers l’image que vous souhaitez intégrer dans la page. Il peut s’agir d’une URL relative, d’une URL absolue ou de données encodées en Base64. Sans l’attributsrc, l’élément<img>n’a pas d’image à charger.alt– fournit un texte alternatif pour l’accessibilité et le référencement. Le texte Alt doit indiquer l’intention, le but et la signification de l’image.widthetheight– spécifient la largeur et la hauteur de l’image en pixels. Siwidthetheightne sont pas spécifiés, la page web peut scintiller pendant le chargement de l’image.
Si votre image s’appelle landscape.jpg et se trouve dans le même répertoire que votre page HTML, vous pouvez l’intégrer comme indiqué ci-dessous :
1<img src="landscape.jpg" alt="Summer landscape – a field with windmills." width="400" height="150">Note: De nombreuses images sur l’internet sont protégées par des droits d’auteur. La violation des droits d’auteur est illégale. Si vous n’avez pas créé l’image et que vous l’avez prise sur le web, vous devez vous assurer qu’elle est dans le domaine public ou que vous avez l’autorisation de l’utiliser.
Ajout d’images provenant de différentes sources
Les images en HTML peuvent être ajoutées à l’aide de chemins d’accès locaux, d’URL distants ou intégrées directement avec le codage Base64.
Images locales
L’utilisation d’images locales est souvent préférable à celle d’images distantes car elles se chargent plus rapidement, réduisent la dépendance à l’égard des serveurs externes et garantissent la disponibilité même si la connexion internet est lente ou si le serveur distant est indisponible. Les images locales améliorent également la sécurité en empêchant le suivi potentiel ou les modifications non autorisées provenant de sources tierces.
Si l’image se trouve dans un sous-répertoire images dans le même répertoire que la page HTML, vous pouvez l’intégrer comme suit :
1<html>
2 <body>
3 <h1>Adding Images Using img Tag</h1>
4 <img src="images/landscape.png" alt="Summer landscape – a field with windmills." width="400" height="150" >
5 <p>When an image is loaded without specified width and height attributes, the browser initially doesn’t reserve space for it, causing content to shift as the image loads.</p>
6 </body>
7</html>Largeur et hauteur de l’image
Lorsqu’une image est chargée sans que les attributs width et height soient spécifiés, le navigateur ne lui réserve pas d’espace au départ, ce qui entraîne un déplacement du contenu au fur et à mesure du chargement de l’image. Ce phénomène a un impact négatif sur l’expérience de l’utilisateur, car la page semble instable, en particulier sur les connexions plus lentes. En spécifiant width et height, le navigateur peut allouer de l’espace à l’image avant son chargement, évitant ainsi les changements soudains de mise en page. Cette pratique permet non seulement d’améliorer la stabilité visuelle, mais aussi d’améliorer les paramètres de base du web, ce qui contribue à améliorer le référencement et les performances globales du site.
La figure ci-dessous montre des exemples de pages web : sans espace réservé pour une image qui n’a pas encore été chargée (a) ; un espace est réservé sur la page web pour l’image puisque les attributs height et width ont été spécifiés dans la balise <img> (b) ; une page web avec une image chargée (c).
Note: Lorsqu’une page web est chargée, le navigateur récupère l’image du serveur web au chemin spécifié dans src et l’insère dans la page. Si l’image est manquante, le navigateur affiche une icône de lien brisé et le texte alt.
Images à distance
Un chemin d’accès absolu est le chemin d’accès complet au fichier image, à partir de la racine du serveur web ou à l’aide d’une URL complète. Vous pouvez également intégrer l’image en utilisant son URL absolue, par exemple :
1<img src="https://docs.aspose.com/svg/images/api/lioness.jpg" alt="The muzzle of a lioness close-up." width="350" height="200" >Toutefois, l’utilisation d’URL absolues n’est pas recommandée. Dans la mesure du possible, vous devez héberger les images que vous souhaitez utiliser sur votre site, ce qui, dans les configurations simples, signifie stocker les images de votre site sur le même serveur que votre HTML.
Encodage Base64
Le codage Base64 permet d’intégrer des images directement dans le code HTML sous la forme d’URI de données, ce qui élimine la nécessité d’utiliser des fichiers d’images séparés. Cela permet de réduire les requêtes HTTP et d’améliorer les temps de chargement des petites images ou des icônes. Toutefois, les images codées en Base64 augmentent la taille du fichier HTML, ce qui peut avoir une incidence sur les performances. Il est préférable de les utiliser pour les graphiques intégrés, tels que les logos ou les petits éléments d’interface utilisateur, plutôt que pour les grandes images.
Cet extrait de code montre comment intégrer des images Base64 dans le code HTML :
1<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ..." alt="Red circle" width="300" height="200" >The following HTML code shows how to add an image to an HTML file from three different types of image sources:
1<html>
2 <body>
3 <h1>Add Image to HTML</h1>
4 <!-- Adding image to HTML using local path -->
5 <img src="images/georgia-castle.png" alt="Ananuri fortress complex in Georgia" width="350" height="200" >
6
7 <!-- Adding image to HTML using absolute URL -->
8 <img src="https://docs.aspose.com/svg/images/api/lioness.jpg" alt="The muzzle of a lioness close-up." width="350" height="200" >
9
10 <!-- Adding image to HTML using Base64 encoded data -->
11 <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8Y2lyY2xlIGN4PSIxNTAiIGN5PSIxMDAiIHI9I
12 jgwIiBzdHlsZT0iZmlsbDpyZWQ7IHN0cm9rZS13aWR0aDo1OyBzdHJva2U6dGVhbCIgLz4NCjwvc3ZnPg==" alt="Red circle" width="300" height="200" >
13 </body>
14</html>L’image illustre le fichier HTML écrit ci-dessus. Nous voyons trois images chargées à partir d’un fichier local, d’une URL source distante et de données encodées en Base64.
Summarize
- Utilisez la balise
<img>– Ajoutez des images avec les attributssrc,alt,width, etheight. Tous ces attributs sont importants pour l’accessibilité et le référencement. - Choisissez le bon format – Utilisez les formats JPEG (photos), PNG (transparence), SVG (modulable), WebP (optimisé). L’utilisation du format WebP offre une compression et une qualité supérieures à celles des formats tels que JPEG ou PNG.
- Images locales ou distantes – Les images locales se chargent plus rapidement et sont plus fiables ; les images distantes dépendent de serveurs externes.
- Optimisez les performances – Compressez les images, utilisez des noms de fichiers descriptifs et préférez l’hébergement local pour des raisons de rapidité et de référencement.
Images d’arrière-plan HTML
Outre l’affichage d’images à l’aide de la balise <img>, vous pouvez utiliser CSS pour manipuler les images d’autres manières, par exemple en définissant une image d’arrière-plan. Les images d’arrière-plan sont principalement utilisées à des fins décoratives, par exemple pour ajouter des textures, des dégradés ou des motifs afin d’améliorer l’attrait visuel d’un site web. Pour ajouter une image d’arrière-plan à HTML, vous pouvez utiliser :
- l’attribut
stylede l’élément HTML désiré avec la propriétébackground-image; - l’élément
<style>avec des informations sur l’image d’arrière-plan d’un document ou d’une partie d’un document, dans l’élément<head>.
Image d’arrière-plan pour une page entière
Si vous souhaitez ajouter une image d’arrière-plan à l’ensemble de la page web, vous pouvez définir la propriété CSS background-image sur l’élément <body> dans l’élément <style>. Par défaut, une image d’arrière-plan sera répétée si elle est plus petite que l’élément spécifié, dans ce cas, l’élément <body> :
1<html>
2 <head>
3 <style>
4 body {
5 background-image: url("lioness.png");
6 }
7 </style>
8 </head>
9 <body>
10 <h1>Background Image for an Entire Page</h1>
11 </body>
12</html>Si vous souhaitez que l’image d’arrière-plan couvre l’ensemble de l’élément, vous pouvez fixer la propriété background-size à cover :
1body {
2 background-image: url("lioness.png");
3 background-size: cover;
4}Pour éviter la répétition de l’image d’arrière-plan, définissez la propriété background-repeat à no-repeat :
1body {
2 background-image: url("lioness.png");
3 background-repeat: no-repeat;
4}La figure suivante illustre trois écrans d’ordinateur (diminués) avec des images d’arrière-plan qui ont été ajoutées en utilisant les propriétés background-image avec les paramètres par défaut (a), background-size : cover (b), et background-repeat : no-repeat (c) :
Note:
Les images d’arrière-plan sont purement décoratives et ne nécessitent pas d’attributs tels que alt, width ou height, car elles ne font pas partie du contenu réel de la page. Contrairement aux images insérées à l’aide de la balise <img>, les images d’arrière-plan ne transmettent pas d’informations significatives aux utilisateurs et ne sont pas lues par les lecteurs d’écran, ce qui rend l’attribut alt inutile pour l’accessibilité. De plus, leurs dimensions sont contrôlées par CSS, il n’est donc pas nécessaire de définir explicitement width ou height.
Image d’arrière-plan pour un élément HTML
Une image d’arrière-plan pour un élément HTML est spécifiée en utilisant la propriété CSS background-image, ce qui permet de l’appliquer à des éléments tels que p, div, body, ou section. Vous pouvez contrôler le positionnement d’une image d’arrière-plan avec background-position, ajuster l’échelle avec background-size, et améliorer la réactivité avec background-repeat.
L’exemple 1 suivant montre comment ajouter une image d’arrière-plan à un élément <p> en utilisant l’attribut style et la propriété CSS background-image :
Exemple 1
1<p style="background-image: url('winter.png'); "> A background image for an HTML element is set using CSS with the background-image property...</p>L’exemple suivant montre comment ajouter une image de fond à un élément <div> en utilisant l’élément <style> dans le <head> du document et la propriété CSS background-image :
Exemple 2
1<html>
2 <head>
3 <style>
4 div {
5 background-image: url("winter.png");
6 }
7 </style>
8 </head>
9 <body>
10 <h1>HTML Background Images</h1>
11 <div>
12 <h2>Background Image for an HTML Element</h2>
13 <p> A background image for an HTML element is set using CSS with the background-image property, allowing you to apply images to elements like div, body, or section... </p>
14 <br>
15 </div>
16 </body>
17</html>La figure suivante montre le résultat du rendu des exemples 1 et 2 : l’image d’arrière-plan est ajoutée à l’aide de l’attribut style à l’élément <p> (a) ; l’image d’arrière-plan est ajoutée à l’aide de l’élément <style> et appliquée à l’élément <div> (b).
Summarize
- Les images d’arrière-plan sont utiles dans la conception de sites web lorsque des éléments visuels décoratifs sont nécessaires sans affecter la structure du document.
- Utilisez la propriété CSS
background-imagepour ajouter des images à des éléments tels que<body>,<div>, ou<p>. Cela peut être fait en ligne dans l’attributstylede l’élément, dans un bloc<style>ou dans un fichier CSS externe. - L’attribut
altn’est pas nécessaire. Les images d’arrière-plan sont décoratives et ne font pas partie du contenu. Elles n’ont donc pas besoin des attributsalt,widthouheight. Les outils d’accessibilité ne les lisent pas. - Les images d’arrière-plan peuvent ralentir le temps de chargement des pages, surtout si elles sont volumineuses ou non optimisées. Pour améliorer les performances, utilisez des formats d’image modernes tels que WebP pour une meilleure compression.
Ajout d’images via JavaScript
Si l’utilisation de la balise <img> est plus simple pour le contenu statique, JavaScript est le meilleur choix lorsque les images doivent être ajoutées ou modifiées de manière dynamique.
1<html>
2 <body>
3 <h1>Adding Image via JavaScript</h1>
4 <script>
5 // Create a new image element
6 let img = document.createElement("img");
7
8 // Set the image source
9 img.src = "https://docs.aspose.com/svg/images/api/lioness.jpg";
10
11 // Set alternative text, width and height for accessibility and SEO
12 img.alt = "The muzzle of a lioness close-up. The lioness looks away.";
13 img.width = 350;
14 img.height = 200;
15
16 // Append the image to the body
17 document.body.appendChild(img);
18 </script>
19 </body>
20</html>Si l’utilisation de la balise <img> est plus simple pour le contenu statique, JavaScript est le meilleur choix lorsque des images doivent être ajoutées ou modifiées de manière dynamique. L’ajout d’images via JavaScript permet le chargement conditionnel et le chargement paresseux, ce qui améliore les performances et la flexibilité. Contrairement aux balises <img> statiques, cette approche permet de gérer les erreurs, d’effectuer des mises à jour en temps réel et d’améliorer la maintenabilité des applications interactives.
Utilisation de SVG en ligne pour les graphiques vectoriels
L’utilisation de SVG en ligne dans HTML vous permet d’intégrer des graphiques vectoriels évolutifs directement dans votre document sans avoir besoin de fichiers d’images externes. Les SVG étant indépendants de la résolution, ils restent nets quelle que soit la taille de l’écran, ce qui les rend idéaux pour les icônes, les logos et les graphiques complexes.
1<html>
2 <head>
3 <style>
4 .page {
5 width: 160mm;
6 height: 90mm;
7 border: 2px solid #026dc5;
8 text-align: center;
9 }
10 h1,p {
11 color: #054c87;
12 }
13 </style>
14 </head>
15 <body>
16 <div class="page">
17 <h1>Using Inline SVG as image in HTML</h1>
18 <p>Because SVGs are resolution-independent, they remain crisp on screens of all sizes, making them ideal for icons, logos, and complex graphics...</p>
19 <svg height="140" width="140" viewBox="-40 0 140 140" xmlns="http://www.w3.org/2000/svg">
20 <path d="M 25 78 C -26 28 97 -15 98 91 C 86 34 16 33 25 78" fill="#3993c9"/>
21 <path d="M 25 78 C -26 28 97 -15 98 91 C 86 34 16 33 25 78" fill="#f3622a" transform= "rotate(90 30 64) translate(5 -14)"/>
22 <path d="M 25 78 C -26 28 97 -15 98 91 C 86 34 16 33 25 78" fill="#c1af2c" transform= "rotate(180 25 78) translate(-19 9)"/>
23 <path d="M 25 78 C -26 28 97 -15 98 91 C 86 34 16 33 25 78" fill="#499c43" transform= "rotate(-90 25 78) translate(-5 14)"/>
24 <circle cx="34.5" cy="73.5" r="40" fill="white" fill-opacity="0.3" />
25 </svg>
26 </div >
27 </body>
28</html>La figure suivante illustre le fichier HTML écrit ci-dessus. Le fichier utilise un SVG intégré, qui est le logo de la société Aspose :
Voir aussi
- Dans l’article Comment ajouter une image au HTML?, vous apprendrez comment insérer une image dans le HTML en utilisant la bibliothèque Aspose.HTML for .NET.
- Découvrez le monde des noms de couleurs HTML ! Apprenez à utiliser les noms de couleur HTML dans la conception de sites web et quand choisir une alternative.
- L’article Comment changer la couleur du texte en HTML? montre comment utiliser la bibliothèque Aspose.HTML for .NET pour contrôler la couleur du texte dans un document HTML.
- Dans l’article Comment changer la couleur d’arrière-plan en HTML?, vous trouverez des exemples en C# démontrant différentes façons de définir ou de changer la couleur d’arrière-plan pour l’ensemble du document HTML et pour ses éléments individuels.
- L’article Comment changer la couleur des bordures en HTML? traite des différentes façons de définir ou de changer la couleur des bordures dans les fichiers HTML à l’aide de la bibliothèque Aspose.HTML for .NET.