HTML et images : guide pratique pour ajouter du visuel

L'intégration d'images est un aspect crucial du développement web, permettant d'améliorer l'engagement utilisateur, d'enrichir le contenu et de rendre votre site plus attrayant. Selon HubSpot, les articles avec des images obtiennent 94% de vues en plus que ceux qui n'en ont pas. Ce guide vous propose un tour d'horizon complet de l'utilisation des images en HTML, des bases aux techniques avancées.

HTML, ou HyperText Markup Language, est le langage de balisage standard pour créer des pages web. Il structure le contenu, définit les titres, les paragraphes, les liens et, bien sûr, les images. HTML fournit les outils de base pour incorporer des images, et combiné à CSS et JavaScript, offre une flexibilité incroyable pour les afficher et les manipuler.

Pourquoi maîtriser l'intégration des images en HTML ?

Il est essentiel de maîtriser l'utilisation des images en HTML pour plusieurs raisons. Premièrement, des visuels bien choisis et optimisés améliorent considérablement l'expérience utilisateur, rendant votre site plus agréable à parcourir. Deuxièmement, l'optimisation des images joue un rôle crucial dans le référencement (SEO), car les moteurs de recherche privilégient les sites rapides et performants. Troisièmement, l'accessibilité est un aspect essentiel à prendre en compte : les images doivent être accompagnées de textes alternatifs pertinents pour les utilisateurs de lecteurs d'écran. Enfin, une gestion efficace des images contribue à réduire le temps de chargement de votre site, ce qui est primordial pour fidéliser les visiteurs. Ce guide vous permettra d'acquérir les compétences nécessaires pour optimiser l'intégration des images, en abordant des sujets tels que les formats d'image, l'optimisation de la taille, les images responsives et l'accessibilité. Vous apprendrez à créer des sites web visuellement riches, performants et accessibles à tous.

Les fondamentaux : la balise `<img>`

Cette section aborde la base de l'intégration des images en HTML : la balise `<img>`. Nous allons explorer sa définition, son rôle et ses attributs essentiels pour une utilisation correcte et efficace.

Présentation de la balise `<img>`

La balise `<img>` est un élément HTML fondamental qui permet d'insérer une image dans une page web. Contrairement aux balises conteneurs comme `<p>` ou `<div>`, la balise `<img>` est une balise orpheline, c'est-à-dire qu'elle n'a pas de balise de fermeture (`</img>`). Elle se suffit à elle-même pour afficher une image, à condition de spécifier l'attribut `src` (source) qui indique l'emplacement du fichier image. Un exemple simple d'utilisation est : `<img src="image.jpg" alt="Description de l'image">`. Cette balise indique au navigateur d'afficher l'image "image.jpg" et fournit un texte alternatif pour l'accessibilité et le SEO, des points clés de l'optimisation de vos images web.

Les attributs essentiels : `src`, `alt`, `width`, et `height`

La balise `<img>` est plus efficace lorsqu'elle est combinée avec ses attributs de base, nous allons donc approfondir les attributs `src`, `alt`, `width` et `height`

`src` (source)

L'attribut `src` est indispensable car il spécifie l'URL (Uniform Resource Locator) de l'image à afficher. Il existe deux types de chemins : les chemins relatifs et les chemins absolus. Un chemin relatif est spécifié par rapport à l'emplacement du fichier HTML actuel (ex: `images/mon_image.jpg`). Un chemin absolu, quant à lui, indique l'URL complète de l'image (ex: `https://www.example.com/images/mon_image.jpg`).

• Les **chemins relatifs** sont plus pratiques pour les projets locaux car ils ne dépendent pas d'un nom de domaine spécifique. Cependant, ils peuvent être problématiques si la structure du site est modifiée.
• Les **chemins absolus** sont utiles pour référencer des images hébergées sur d'autres serveurs, mais ils rendent votre site dépendant de ces ressources externes.

Par exemple, si votre fichier HTML se trouve dans le dossier "site" et que l'image "photo.jpg" se trouve dans le dossier "images" à l'intérieur de "site", le chemin relatif serait `<img src="images/photo.jpg" alt="Description">`. Si l'image est sur un autre site, ce serait quelque chose comme `<img src="https://example.com/photo.jpg" alt="Description">`. La différence est bien importante.

`alt` (alternative text)

L'attribut `alt` est crucial pour l'accessibilité des images web. Il fournit un texte alternatif qui s'affiche si l'image ne peut pas être chargée, mais surtout, il est lu par les lecteurs d'écran pour les utilisateurs malvoyants. Un texte alternatif bien rédigé doit décrire précisément le contenu de l'image. Il est également important pour le SEO, car les moteurs de recherche utilisent ce texte pour comprendre le sujet de l'image.

• Si l'image est purement décorative, l'attribut `alt` doit être vide (`alt=""`). Cela indique aux lecteurs d'écran qu'ils peuvent ignorer l'image.
• **Bon exemple:** `<img src="produit.jpg" alt="Chaussures de course bleues de marque XYZ">`.
• **Mauvais exemple:** `<img src="produit.jpg" alt="image">` (trop vague) ou `<img src="produit.jpg" alt="">` (si l'image est importante pour la compréhension du contenu).

`width` et `height` (largeur et hauteur)

Il est important de spécifier les attributs `width` et `height` dans la balise `<img>`. Cela permet au navigateur de réserver l'espace nécessaire pour l'image avant qu'elle ne soit chargée, ce qui évite le Cumulative Layout Shift (CLS). Le CLS est un indicateur de performance qui mesure le décalage visuel des éléments de la page pendant le chargement. Un CLS élevé peut nuire à l'expérience utilisateur en modifiant la disposition de la page de manière inattendue. En définissant les dimensions de l'image, vous garantissez un rendu plus rapide et plus stable. De nombreux outils permettent de tester le CLS de votre site.

Toutefois, il est essentiel de maintenir le ratio d'aspect de l'image. Si vous ne définissez qu'une seule dimension (par exemple, `width="500"`), le navigateur ajustera automatiquement l'autre dimension pour conserver les proportions originales. L'utilisation conjointe de `width` et `height` permet de s'assurer que l'image s'affiche correctement même si le fichier image n'est pas encore entièrement chargé. À l'avenir, l'utilisation de la propriété CSS `aspect-ratio` pourrait rendre ces attributs HTML obsolètes, selon les experts de MDN Web Docs.

Mise en pratique : un premier exemple complet

Voici un exemple de code HTML minimal intégrant une image avec tous les attributs essentiels :

<img src="images/logo.png" alt="Logo de l'entreprise" width="200" height="100">

Ce code indique au navigateur d'afficher l'image "logo.png" située dans le dossier "images". Le texte alternatif "Logo de l'entreprise" est utilisé pour l'accessibilité et le SEO. La largeur de l'image est définie à 200 pixels et la hauteur à 100 pixels. Cela garantit que l'espace est réservé avant le chargement de l'image, évitant ainsi les décalages visuels. Une image bien définie, c'est une image qui améliore l'expérience utilisateur. Essayez de modifier les attributs width et height pour observer le résultat.

Améliorer la performance des images

Cette section détaille comment optimiser vos images pour améliorer la performance de votre site web. Cela inclut le choix du bon format d'image, la compression, l'utilisation d'images responsives et le lazy loading. Ces techniques contribuent à un site plus rapide et une meilleure expérience utilisateur.

Formats d'image : choisir le bon pour le bon usage

Le choix du format d'image est crucial pour la performance de votre site web. Chaque format a ses avantages et ses inconvénients en termes de qualité, de taille de fichier et de compatibilité. Voici les principaux formats à connaître, ainsi que leurs recommandations d'utilisation :

• **JPEG (ou JPG):** Idéal pour les photographies et les images complexes avec beaucoup de couleurs. Il utilise une compression avec perte, ce qui permet de réduire considérablement la taille du fichier, mais peut entraîner une perte de qualité si la compression est trop forte.
• **PNG:** Adapté aux images avec transparence et aux graphiques simples. Il utilise une compression sans perte, ce qui garantit une qualité optimale, mais peut générer des fichiers plus volumineux que le JPEG.
• **GIF:** Utilisé pour les animations simples, mais il est préférable d'utiliser MP4 ou WebM pour une meilleure performance, selon des études menées par Google.
• **WebP:** Un format moderne offrant une meilleure compression et supportant la transparence. Il offre une qualité supérieure à celle du JPEG avec une taille de fichier plus petite. WebP est supporté par la majorité des navigateurs modernes.
• **AVIF:** Un nouveau format de compression très performant, mais avec une compatibilité navigateur encore limitée. Bien qu'AVIF offre une compression supérieure, il est crucial de vérifier sa compatibilité avec les navigateurs de vos utilisateurs.

Le tableau suivant résume les caractéristiques de chaque format, facilitant ainsi le choix du format d'image optimal pour chaque situation :

Format	Type de compression	Utilisation recommandée	Avantages	Inconvénients
JPEG	Avec perte	Photographies, images complexes	Petite taille de fichier	Perte de qualité possible
PNG	Sans perte	Graphiques, logos, transparence	Qualité optimale	Taille de fichier plus importante
GIF	Sans perte	Animations simples	Support d'animation	Couleurs limitées, performances inférieures à MP4/WebM
WebP	Avec ou sans perte	Photographies, graphiques, transparence	Excellente compression, support de transparence	Compatibilité navigateur variable
AVIF	Avec perte	Photographies, images complexes	Compression très performante	Compatibilité navigateur limitée

Optimisation de la taille des images : la clé d'un site rapide

La taille des images a un impact direct sur le temps de chargement de votre site web. Des visuels trop volumineux peuvent ralentir votre site et nuire à l'expérience utilisateur. Il est donc essentiel de les optimiser en réduisant leur taille sans compromettre la qualité. La taille des images influe aussi sur l'indice SEO de votre site. D'après HTTP Archive, les images représentent en moyenne 21% du poids total d'une page web.

• **Compression:** Utilisez des outils de compression d'images pour réduire la taille des fichiers sans perte de qualité perceptible.
• **Outils en ligne:** TinyPNG, Compressor.io.
• **Logiciels de retouche d'image:** Photoshop, GIMP.
• **Outils d'optimisation automatique:** Intégrez des outils d'optimisation automatique lors de la génération d'images côté serveur, tels que ImageOptim.

Voici quelques conseils pratiques pour la compression des images HTML :

• Réduisez la résolution à la taille d'affichage réelle.
• Utilisez la compression avec perte (avec modération) pour les images JPEG.
• Expérimentez différents niveaux de compression pour trouver le juste milieu entre taille et qualité.

Images responsives : s'adapter à tous les écrans

Avec la diversité des appareils (smartphones, tablettes, ordinateurs) utilisés pour naviguer sur le web, il est crucial d'utiliser des images responsives, c'est-à-dire des images qui s'adaptent à la taille de l'écran de l'utilisateur. Cela permet d'éviter de charger des images trop volumineuses sur les petits écrans, ce qui gaspillerait de la bande passante et ralentirait le chargement de la page. Les images responsives sont donc un élément clé de l'optimisation des images web.

Les attributs `srcset` et `sizes` : la solution élégante

Les attributs `srcset` et `sizes` de la balise `<img>` permettent de définir différentes versions d'une même image, adaptées à différentes tailles d'écran. L'attribut `srcset` spécifie une liste d'URL d'images, séparées par des virgules, ainsi que leur largeur en pixels (ex: `srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w"`). L'attribut `sizes` permet de définir la largeur de l'image en fonction de la taille de l'écran (ex: `sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"`). Le navigateur choisira automatiquement la version de l'image la plus appropriée en fonction de la taille de l'écran et de la densité de pixels. N'hésitez pas à consulter la documentation de Mozilla Developer Network (MDN) pour des exemples plus détaillés.

La balise `<picture>` : un contrôle total sur le format

La balise `<picture>` offre un contrôle encore plus précis sur le format d'image à servir en fonction de la compatibilité du navigateur. Elle permet de spécifier différentes sources d'image (avec la balise `<source>`) et de définir des conditions pour chaque source (par exemple, en fonction du format d'image supporté par le navigateur). La balise `<img>` est utilisée comme fallback si aucune des sources n'est compatible. Voici un exemple :

 <picture> <source srcset="image.webp" type="image/webp"> <source srcset="image.jpg" type="image/jpeg"> <img src="image.jpg" alt="Description de l'image"> </picture> 

Dans cet exemple, le navigateur tentera d'abord de charger l'image au format WebP. S'il ne le supporte pas, il chargera l'image au format JPEG. La balise `<img>` sert de fallback si aucun des formats n'est supporté. Cette technique assure une compatibilité maximale tout en profitant des avantages des formats modernes.

Lazy loading : charger les images à la demande

Le lazy loading est une technique qui consiste à charger les images uniquement lorsqu'elles sont visibles à l'écran. Cela permet d'améliorer le temps de chargement initial de la page et de réduire la consommation de bande passante. Le lazy loading est particulièrement utile pour les pages avec beaucoup d'images, améliorant significativement la performance perçue du site web. D'après Google, le lazy loading peut réduire le temps de chargement initial jusqu'à 70%.

L'attribut `loading="lazy"` : la solution native

L'attribut `loading="lazy"` de la balise `<img>` permet d'activer le lazy loading de manière native, sans avoir besoin de JavaScript. Il suffit d'ajouter cet attribut à votre balise : `<img src="image.jpg" alt="Description" loading="lazy">`. Les autres valeurs possibles sont "eager" (pour charger l'image immédiatement) et "auto" (pour laisser le navigateur décider). L'attribut loading est une solution simple et efficace pour implémenter le lazy loading.

Il est important de mentionner les considérations SEO liées au lazy loading. Il faut s'assurer que les moteurs de recherche puissent indexer les images correctement. On doit fournir les dimensions via les attributs "width" et "height" et utiliser des outils de test comme Google PageSpeed Insights pour valider que tout fonctionne correctement. Une configuration incorrecte du lazy loading peut nuire à votre SEO.

Styles et positionnement des images avec CSS

Cette section détaille comment utiliser CSS pour contrôler l'apparence et le positionnement des images dans votre mise en page. Nous aborderons les styles de base, le positionnement et les effets visuels. L'utilisation de CSS permet une grande flexibilité et un contrôle précis sur l'apparence des images.

Styles de base : `width`, `height`, `object-fit`

CSS offre un contrôle précis sur la taille et l'aspect des images. Les propriétés `width` et `height` permettent de définir les dimensions de l'image. La propriété `object-fit` permet de contrôler comment l'image s'adapte à son conteneur. Les valeurs possibles sont :

• `cover`: L'image remplit tout le conteneur, en rognant si nécessaire.
• `contain`: L'image est entièrement visible dans le conteneur, avec des espaces vides si nécessaire.
• `fill`: L'image remplit tout le conteneur, en étirant ou en compressant si nécessaire.
• `none`: L'image conserve sa taille d'origine.
• `scale-down`: L'image est réduite pour s'adapter au conteneur, si elle est plus grande que celui-ci.

La propriété `object-position` permet de contrôler la position de l'image à l'intérieur de son conteneur. Par exemple, `object-position: center` centre l'image, tandis que `object-position: top left` la positionne en haut à gauche. Ces propriétés sont essentielles pour créer une mise en page harmonieuse et visuellement attrayante. Experimentez avec ces propriétés pour obtenir l'effet désiré.

Accessibilité des images : ne laissez personne de côté

L'accessibilité web est un aspect crucial du développement moderne. Ignorer l'accessibilité, c'est exclure une partie de votre audience. Cette section explore les techniques pour rendre vos images accessibles à tous, en particulier aux personnes handicapées.

L'importance cruciale de l'attribut `alt`

L'attribut `alt` est bien plus qu'un simple placeholder en cas de problème de chargement. Il s'agit d'une description textuelle essentielle pour les utilisateurs de lecteurs d'écran. Un texte `alt` bien rédigé permet à ces utilisateurs de comprendre le contenu et le contexte de l'image, même s'ils ne peuvent pas la voir. Prenez le temps de rédiger des descriptions précises et pertinentes.

Images décoratives : l'utilisation appropriée de `alt=""`

Si une image est purement décorative et n'apporte aucune information supplémentaire au contenu, il est approprié d'utiliser `alt=""`. Cela indique aux lecteurs d'écran qu'ils peuvent ignorer l'image, évitant ainsi de perturber l'expérience utilisateur avec des descriptions inutiles. Voici quelques exemples d'images décoratives :

• Des bordures graphiques
• Des icônes purement esthétiques
• Des images de fond non essentielles

WAI-ARIA : améliorer l'accessibilité avec des rôles et des attributs

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) est un ensemble de spécifications qui permet d'améliorer l'accessibilité des applications web dynamiques et des contenus riches. WAI-ARIA fournit des rôles et des attributs que vous pouvez ajouter à votre code HTML pour fournir des informations supplémentaires sur les éléments de votre page aux technologies d'assistance, comme les lecteurs d'écran. Pour les images, vous pouvez utiliser les rôles et attributs suivants :

• `role="img"` : Ce rôle indique à la technologie d'assistance que l'élément est une image. Bien que cela puisse sembler redondant avec la balise `<img>`, il peut être utile dans certains contextes, notamment lorsque vous utilisez des images SVG ou des images en background CSS.
• `aria-label="Description de l'image"` : Cet attribut permet de fournir une description de l'image qui sera lue par le lecteur d'écran. Il est similaire à l'attribut `alt`, mais il est prioritaire si les deux sont présents.
• `aria-describedby="id-de-la-description"` : Cet attribut permet de lier l'image à une description plus détaillée qui se trouve ailleurs sur la page. Par exemple, vous pouvez utiliser cet attribut pour lier une image complexe à une légende détaillée.

Voici un exemple d'utilisation de WAI-ARIA pour une image :

 <img src="graphique.png" alt="Graphique des ventes annuelles" aria-describedby="graphique-description" role="img"> <p id="graphique-description">Ce graphique illustre l'évolution des ventes annuelles de notre entreprise de 2018 à 2023. Il montre une croissance constante de nos revenus.</p> 

Dans cet exemple, l'attribut `aria-describedby` lie l'image à un paragraphe qui fournit une description plus détaillée du graphique.

Images en background CSS

L'utilisation d'images en background CSS offre une alternative intéressante à la balise `<img>` pour certains cas d'utilisation. Cette technique permet de contrôler le positionnement, la répétition et la taille de l'image avec plus de précision. Cependant, il est important de peser les avantages et les inconvénients avant de choisir cette approche.

Avantages et inconvénients des images de fond CSS

• **Avantages:**
  • Contrôle précis du positionnement et de la répétition.
  • Possibilité de superposer des éléments sur l'image.
  • Adapté pour les images décoratives.
• **Inconvénients:**
  • Moins accessible (nécessite des techniques ARIA pour compenser).
  • Peut être plus difficile à optimiser pour le SEO.
  • Nécessite plus de code CSS.

Propriétés CSS pour gérer les images de fond

Voici les propriétés CSS les plus couramment utilisées pour gérer les images de fond :

• `background-image`: Spécifie l'URL de l'image de fond.
• `background-size`: Contrôle la taille de l'image de fond (ex: `cover`, `contain`, `auto`).
• `background-position`: Définit la position de l'image de fond (ex: `center`, `top left`, `bottom right`).
• `background-repeat`: Détermine si l'image de fond doit être répétée (ex: `repeat`, `no-repeat`, `repeat-x`, `repeat-y`).

Alternative : les dégradés CSS

Pour des arrière-plans simples et légers, envisagez d'utiliser les dégradés CSS plutôt que des images. Les dégradés CSS sont générés directement par le navigateur, ce qui évite de charger des fichiers image supplémentaires. Ils sont également plus faciles à modifier et à animer. Les dégradés CSS peuvent être une excellente alternative pour des arrière-plans subtils et modernes.

Problèmes d'affichage sur certains navigateurs : tester et corriger

Bien que les standards du web soient de plus en plus respectés, des problèmes d'affichage peuvent survenir sur certains navigateurs, en particulier les versions plus anciennes. Il est donc crucial de tester votre site web sur différents navigateurs et appareils pour identifier et corriger ces problèmes.

Importance du test multi-navigateur

Le test multi-navigateur est une étape essentielle du développement web. Il permet de s'assurer que votre site web s'affiche correctement sur tous les navigateurs et appareils utilisés par vos utilisateurs. Pour ce faire, vous pouvez utiliser des outils de test en ligne, des machines virtuelles ou des appareils physiques.

Conseils de debugging et d'utilisation de polyfills

• Utilisez les outils de développement de votre navigateur (ex: Chrome DevTools, Firefox Developer Tools) pour inspecter le code HTML, CSS et JavaScript et identifier les erreurs.
• Vérifiez la compatibilité des fonctionnalités que vous utilisez avec les différents navigateurs sur des sites comme "Can I use".
• Utilisez des polyfills pour fournir une implémentation des fonctionnalités manquantes sur les anciens navigateurs. Par exemple, vous pouvez utiliser le polyfill "object-fit-images" pour assurer la compatibilité de la propriété `object-fit` sur les navigateurs qui ne la supportent pas nativement.

Exemple d'utilisation de polyfill :

 <!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script> <script> objectFitImages(); </script> <![endif]--> 

Ce code utilise des commentaires conditionnels pour charger le polyfill "object-fit-images" uniquement sur les versions d'Internet Explorer antérieures à la version 9. La fonction `objectFitImages()` est ensuite appelée pour appliquer le polyfill.

Quelques mots pour finir

Maîtriser l'intégration des images en HTML est essentiel pour créer des sites web visuellement riches, performants et accessibles. En choisissant les bons formats d'image, en optimisant leur taille, en utilisant des images responsives et en veillant à l'accessibilité, vous pouvez améliorer considérablement l'expérience utilisateur et le référencement de votre site. N'hésitez pas à explorer les ressources complémentaires et à expérimenter avec les différentes techniques présentées dans ce guide. La performance web s'améliore de jour en jour grâce aux technologies et méthodes à notre disposition. Partagez vos résultats !

Le web est en constante évolution, et les techniques d'optimisation des images ne font pas exception. Restez à l'affût des nouvelles technologies, des nouveaux formats de compression et des nouvelles bonnes pratiques pour garantir que votre site web reste à la pointe de la performance et de l'accessibilité. Les technologies de rendu évoluent, n'hésitez pas à être curieux. Visitez des sites spécialisés et abonnez-vous à des infolettres.