HTML - Images

Insertion d'images

<img src="url-de-l-image" alt="texte-alternatif">

<img src="exemple.jpg" alt="Image d'exemple" width="500" height="300">

Positionnement d'images

La balise <img> est utilisée pour insérer des images dans un document HTML, mais vous pouvez contrôler le positionnement et la mise en page des images à l'aide de CSS. CSS dispose de plusieurs propriétés qui vous permettent de positionner les images dans votre page web.

Une façon de positionner les images est d'utiliser la propriété float. La propriété float vous permet de placer une image à gauche ou à droite du contenu qui l'entoure. Lorsqu'une image est flottante, le texte ou les éléments à côté s'enrouleront autour d'elle.

<img src="example.jpg" alt="Image d'exemple" class="float-left">
<p>Voici du texte qui s'enroulera autour de l'image flottante.</p>

.float-left {
  float: left;
  margin-right: 10px;
}

Dans cet exemple, l'image est flottante à gauche en utilisant float: left, et une marge droite est ajoutée pour créer un espace entre l'image et le texte à côté.

Une autre façon de positionner les images est d'utiliser la propriété display. Par défaut, les images sont des éléments en ligne, ce qui signifie qu'elles s'intègrent dans le texte. Cependant, vous pouvez modifier l'affichage des images en utilisant des valeurs telles que block, inline-block, ou flex.

<img src="example.jpg" alt="Image d'exemple" class="display-block">

.display-block {
  display: block;
  margin: 0 auto;
}

Dans ce cas, l'image est affichée comme un élément de niveau bloc en utilisant display: block, et elle est centrée horizontalement en utilisant margin: 0 auto.

La propriété position est un autre outil pour le positionnement des images. Elle vous permet de positionner les images par rapport à leur position normale (position: relative), par rapport à l'ancêtre positionné le plus proche (position: absolute), ou fixe par rapport à la fenêtre du navigateur (position: fixed).

<div class="container">
  <img src="example.jpg" alt="Image d'exemple" class="position-absolute">
</div>

.container {
  position: relative;
  height: 400px;
}

.position-absolute {
  position: absolute;
  top: 20px;
  left: 20px;
}

Dans cet exemple, l'image est positionnée de manière absolue à 20 pixels du haut et de la gauche de son ancêtre positionné le plus proche (la <div> avec la classe container).

En combinant ces techniques de positionnement CSS avec d'autres propriétés comme margin, padding, et z-index, vous pouvez contrôler le placement et la mise en page des images dans vos pages web. Essayez différentes méthodes de positionnement pour trouver la meilleure approche pour vos besoins de conception.

Images réactives

Le HTML offre plusieurs techniques pour créer des images réactives.

Une façon de servir des images réactives est d'utiliser l'attribut srcset sur la balise <img>. L'attribut srcset permet de spécifier plusieurs sources d'images avec leurs largeurs ou densités de pixels respectives. Le navigateur peut alors choisir l'image la plus appropriée en fonction de la taille et de la résolution de l'écran de l'appareil.

<img src="image-small.jpg"
     srcset="image-small.jpg 400w,
             image-medium.jpg 800w,
             image-large.jpg 1200w"
     alt="Image réactive">

L'attribut srcset fournit trois sources d'images différentes avec leurs largeurs correspondantes (400w, 800w et 1200w). Le navigateur sélectionnera l'image qui correspond le mieux à la taille et à la résolution de l'écran de l'appareil.

Une autre technique pour les images réactives est l'utilisation de l'élément <picture>. L'élément <picture> sert de conteneur pour plusieurs éléments <source>, chacun spécifiant différentes sources d'images et requêtes média. Cela permet de définir différentes images pour différentes tailles d'écran ou caractéristiques d'appareil.

<picture>
  <source media="(min-width: 1200px)" srcset="image-large.jpg">
  <source media="(min-width: 800px)" srcset="image-medium.jpg">
  <img src="image-small.jpg" alt="Image réactive">
</picture>

L'élément <picture> contient deux éléments <source> avec des requêtes média. Le premier élément <source> spécifie une image pour les écrans d'une largeur minimale de 1200px, tandis que le deuxième élément <source> cible les écrans d'une largeur minimale de 800px. L'élément <img> à l'intérieur de l'élément <picture> sert de solution de repli pour les navigateurs qui ne prennent pas en charge l'élément <picture>.

La Direction artistique est un autre concept lié aux images réactives. La Direction artistique consiste à servir différents recadrages ou compositions d'image en fonction de la taille de l'écran ou du rapport d'aspect de l'appareil. Cela garantit que les parties les plus importantes de l'image sont visibles sur différents appareils.

<picture>
  <source media="(min-width: 1200px)" srcset="image-large.jpg">
  <source media="(min-width: 800px)" srcset="image-medium-recadree.jpg">
  <img src="image-small-recadree.jpg" alt="Image réactive">
</picture>

Les éléments <source> à l'intérieur de l'élément <picture> spécifient différents recadrages d'image pour différentes tailles d'écran. Les images "image-medium-recadree.jpg" et "image-small-recadree.jpg" sont des versions recadrées de l'image originale, optimisées respectivement pour les écrans moyens et petits.

En utilisant des techniques d'images réactives comme srcset, <picture> et la Direction artistique, vous pouvez offrir une expérience visuelle optimale aux utilisateurs sur divers appareils. Ces techniques vous aident à servir des images adaptées à différentes tailles d'écran, résolutions et rapports d'aspect, ce qui se traduit par des chargements de page plus rapides et une meilleure engagement des utilisateurs.

Accessibilité

L'accessibilité est un aspect important de la conception web, assurant que votre contenu puisse être utilisé par tous, y compris les personnes handicapées. En ce qui concerne les images, plusieurs points sont à prendre en compte pour améliorer l'accessibilité.

Fournir un texte alternatif pour les images est essentiel. Le texte alternatif, ou "alt text", est une brève description d'une image qui s'affiche lorsque l'image ne peut pas être chargée ou qui est lue à voix haute par les lecteurs d'écran pour les utilisateurs malvoyants. L'attribut alt de la balise <img> est utilisé pour fournir ce texte alternatif.

<img src="example.jpg" alt="Un coucher de soleil sur l'océan">

Lors de la rédaction du texte alternatif, essayez de décrire brièvement le contenu et l'objectif de l'image. Pour les images décoratives qui n'ajoutent pas de contenu significatif, vous pouvez laisser l'attribut alt vide (alt="").

Pour les images complexes, telles que les graphiques, les diagrammes ou les schémas, fournir un court texte alternatif peut ne pas suffire. Dans ces cas, vous pouvez utiliser l'attribut longdesc pour fournir un lien vers une description détaillée de l'image. Ou bien, vous pouvez inclure la description dans le texte principal près de l'image.

<img src="chart.jpg" alt="Graphique des ventes" longdesc="description-graphique.html">

Dans l'exemple ci-dessus, l'attribut longdesc pointe vers un fichier HTML (description-graphique.html) qui contient une description détaillée du graphique.

Une autre bonne pratique d'accessibilité est d'éviter d'utiliser des images pour du texte. Bien qu'il puisse être tentant d'utiliser des images pour afficher du texte stylisé ou des titres, cela peut poser problème pour les lecteurs d'écran et les utilisateurs malvoyants. Utilisez plutôt du texte réel et stylisez-le avec CSS. Cela garantit que le texte est accessible, sélectionnable et peut être redimensionné par les utilisateurs si nécessaire.

<h1 class="titre-stylise">Bienvenue sur notre site web</h1>

.titre-stylise {
  font-family: "Police décorative", cursive;
  font-size: 36px;
  color: #ff0000;
}

En utilisant CSS pour styliser le texte, vous conservez l'accessibilité tout en obtenant l'effet visuel souhaité.

En résumé, pour améliorer l'accessibilité des images :

En suivant ces directives d'accessibilité, vous vous assurez que vos images peuvent être comprises par tous les utilisateurs, créant ainsi une expérience web plus inclusive.

Cartes d'image

Les cartes d'image vous permettent de créer des zones cliquables sur une image, transformant différentes parties de l'image en liens interactifs. Cette technique est utile lorsque vous souhaitez fournir plusieurs liens au sein d'une seule image ou créer un système de navigation basé sur une image.

Pour créer une carte d'image, vous devez utiliser les balises <map> et <area> en combinaison avec une balise <img>. La balise <map> définit la carte d'image et lui attribue un nom, tandis que les balises <area> définissent les zones cliquables à l'intérieur de l'image.

<img src="image.jpg" alt="Carte d'image" usemap="#imagemap">

<map name="imagemap">
  <area shape="rect" coords="0,0,100,100" href="lien1.html" alt="Lien 1">
  <area shape="circle" coords="200,200,50" href="lien2.html" alt="Lien 2">
  <area shape="poly" coords="300,100,350,200,250,200" href="lien3.html" alt="Lien 3">
</map>

Lors de la définition des coordonnées pour les zones cliquables, vous devez connaître les emplacements exacts en pixels des régions souhaitées dans l'image. Vous pouvez utiliser un logiciel d'édition d'images ou des outils en ligne pour trouver ces coordonnées.

Les cartes d'image sont moins couramment utilisées de nos jours en raison de l'essor du design web responsive et de la difficulté à créer et maintenir des coordonnées précises pour différentes tailles d'images. Cependant, dans certains cas, comme la création d'infographies interactives ou la fourniture de liens au sein d'une image spécifique, les cartes d'image peuvent encore être une technique utile.

Lors de l'utilisation de cartes d'image, assurez-vous de fournir un texte alternatif clair et descriptif pour chaque zone cliquable afin de garantir l'accessibilité pour les utilisateurs qui dépendent de technologies d'assistance.

Images d'arrière-plan

En plus d'insérer des images dans les documents HTML à l'aide de la balise <img>, vous pouvez également définir des images comme arrière-plan pour les éléments en utilisant CSS. Les images d'arrière-plan peuvent améliorer l'attrait visuel de vos pages web et créer des effets intéressants.

Pour définir une image d'arrière-plan pour un élément, utilisez la propriété background-image en CSS. La valeur de cette propriété est une URL qui pointe vers le fichier image que vous souhaitez utiliser comme arrière-plan.

.element {
  background-image: url("background.jpg");
}

Par défaut, les images d'arrière-plan se répètent horizontalement et verticalement pour couvrir l'ensemble de l'élément. Cependant, vous pouvez contrôler le comportement de répétition à l'aide de la propriété background-repeat. Les valeurs disponibles sont :

.element {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
}

Vous pouvez également contrôler le positionnement de l'image d'arrière-plan à l'aide de la propriété background-position. Cette propriété prend deux valeurs : la position horizontale et la position verticale. Les valeurs peuvent être des mots-clés (left, center, right pour l'horizontal ; top, center, bottom pour le vertical) ou des longueurs spécifiques (par exemple, des pixels ou des pourcentages).

.element {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}

Les images d'arrière-plan peuvent être utilisées pour créer des effets visuels intéressants, comme le défilement parallaxe. Le défilement parallaxe est une technique où l'image d'arrière-plan se déplace à une vitesse différente du contenu de la page, créant une sensation de profondeur.

.parallax {
  background-image: url("parallax-background.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
}

Pour créer un effet parallaxe :

1. Définissez l'image d'arrière-plan avec background-image.
2. Utilisez background-attachment: fixed pour fixer l'image d'arrière-plan en place pendant que le contenu de la page défile par-dessus.
3. Positionnez l'image d'arrière-plan comme souhaité avec background-position.
4. Définissez background-repeat: no-repeat pour empêcher l'image de se répéter.
5. Utilisez background-size: cover pour vous assurer que l'image couvre l'ensemble de l'élément, même si elle doit être redimensionnée.
6. Définissez une height suffisante pour l'élément afin de créer l'effet de défilement parallaxe.

Lors de l'utilisation d'images d'arrière-plan, gardez à l'esprit les bonnes pratiques suivantes :

• Optimisez vos images pour le web afin de maintenir des tailles de fichiers réduites et des temps de chargement de page rapides.
• Utilisez des formats d'image appropriés (par exemple, JPEG pour les photographies, PNG pour les images avec transparence).
• Tenez compte de la lisibilité du contenu lors du choix des images d'arrière-plan. Assurez-vous qu'il y a suffisamment de contraste entre le texte et l'arrière-plan.
• Soyez attentif à l'accessibilité. Fournissez un texte alternatif ou des descriptions pour les images d'arrière-plan si elles transmettent des informations importantes.