Images responsives et accessibilité
Images responsives et accessibilité
- 1Les images responsives s'adaptent automatiquement à la taille de l'écran grâce aux techniques CSS et HTML
- 2L'attribut alt rend les images accessibles aux lecteurs d'écran et améliore le SEO
- 3Les formats modernes comme WebP optimisent les performances tout en conservant la qualité
Introduction
Imaginez que vous développez un site web pour une galerie d'art en ligne. Les visiteurs consultent vos pages depuis leur smartphone dans le métro, leur tablette à la maison, ou leur ordinateur de bureau au bureau. Comment faire en sorte que vos magnifiques images d'œuvres d'art s'affichent parfaitement sur tous ces appareils, tout en restant accessibles aux personnes utilisant des lecteurs d'écran ?
C'est exactement ce que nous allons apprendre dans cette leçon : créer des images qui s'adaptent intelligemment à leur environnement et qui sont utilisables par tous.
Comprendre les images responsives
Le principe fondamental
Une image responsive est une image qui s'adapte automatiquement à la taille de son conteneur et à la résolution de l'écran. Cette adaptation se fait sans déformation et en conservant une qualité optimale.
La technique CSS de base
La méthode la plus simple pour rendre une image responsive utilise CSS :
1/* Technique responsive de base */
2img {
3 max-width: 100%;
4 height: auto;
5 display: block;
6}
7
8/* Pour un conteneur spécifique */
9.image-responsive {
10 max-width: 100%;
11 height: auto;
12 border-radius: 8px;
13 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
14}1<!-- Application en HTML -->
2<div class="container">
3 <img src="galerie-art.jpg"
4 alt="Peinture impressionniste représentant un coucher de soleil sur un lac"
5 class="image-responsive">
6</div>💡 À retenir : La propriété
max-width: 100%permet à l'image de ne jamais dépasser la largeur de son conteneur, tandis queheight: autoconserve les proportions originales.
Les techniques avancées d'images responsives
L'élément <picture> et les sources multiples
L'élément <picture> permet de définir plusieurs sources d'images selon différents critères :
1<picture>
2 <!-- Image pour écrans haute résolution -->
3 <source media="(min-width: 1200px)"
4 srcset="galerie-large.webp 1200w, galerie-large-2x.webp 2400w">
5
6 <!-- Image pour tablettes -->
7 <source media="(min-width: 768px)"
8 srcset="galerie-medium.webp 768w, galerie-medium-2x.webp 1536w">
9
10 <!-- Image pour mobiles -->
11 <source media="(max-width: 767px)"
12 srcset="galerie-small.webp 320w, galerie-small-2x.webp 640w">
13
14 <!-- Image de fallback -->
15 <img src="galerie-medium.jpg"
16 alt="Collection d'œuvres d'art contemporain dans une galerie moderne"
17 loading="lazy">
18</picture>L'attribut srcset pour la densité de pixels
1<!-- Adaptation selon la densité de l'écran -->
2<img src="portrait-artist.jpg"
3 srcset="portrait-artist.jpg 1x,
4 portrait-artist-2x.jpg 2x,
5 portrait-artist-3x.jpg 3x"
6 alt="Portrait de l'artiste dans son atelier"
7 class="artist-photo">L'accessibilité des images : une priorité
Le saviez-vous ?
Plus de 285 millions de personnes dans le monde sont malvoyantes ou aveugles, et les lecteurs d'écran leur permettent de naviguer sur le web en écoutant une description audio du contenu
— Organisation Mondiale de la Santé
L'attribut alt : votre meilleur allié
L'attribut alt est crucial pour l'accessibilité. Il doit décrire le contenu et la fonction de l'image :
1<!-- ✅ Bon usage de l'attribut alt -->
2<img src="graphique-ventes-2023.png"
3 alt="Graphique en barres montrant une augmentation des ventes de 25% entre janvier et décembre 2023">
4
5<!-- ✅ Image décorative -->
6<img src="decoration-florale.jpg"
7 alt=""
8 role="presentation">
9
10<!-- ✅ Image-lien -->
11<a href="contact.html">
12 <img src="telephone-icon.svg"
13 alt="Nous contacter par téléphone">
14</a>
15
16<!-- ❌ Alt générique et peu informatif -->
17<img src="image123.jpg" alt="image">Tableau comparatif des bonnes pratiques alt
| Type d'image | Attribut alt recommandé | Exemple |
|---|---|---|
| Informative | Description du contenu | alt="Diagramme du processus de commande en 4 étapes" |
| Décorative | Alt vide | alt="" ou role="presentation" |
| Fonctionnelle | Description de l'action | alt="Rechercher sur le site" |
| Complexe | Description + longdesc | alt="Graphique détaillé" longdesc="data-detail.html" |
⚠️ Attention : Ne jamais omettre l'attribut alt ! Un alt vide (
alt="") indique que l'image est décorative, tandis que l'absence d'alt pose des problèmes d'accessibilité.
Optimisation des performances
Les formats d'images modernes
1<!-- Support progressif des formats -->
2<picture>
3 <source srcset="hero-image.avif" type="image/avif">
4 <source srcset="hero-image.webp" type="image/webp">
5 <img src="hero-image.jpg"
6 alt="Vue panoramique de l'exposition temporaire d'art numérique"
7 loading="lazy"
8 width="800"
9 height="600">
10</picture>Le lazy loading natif
1<!-- Chargement différé automatique -->
2<img src="galerie-photo-1.jpg"
3 alt="Première œuvre de la collection permanente"
4 loading="lazy"
5 width="400"
6 height="300">
7
8<!-- Chargement immédiat pour les images critiques -->
9<img src="logo-galerie.svg"
10 alt="Logo de la Galerie d'Art Moderne"
11 loading="eager"
12 width="200"
13 height="80">🎯 En pratique : Utilisez
loading="lazy"pour toutes les images qui ne sont pas immédiatement visibles, etloading="eager"pour les images critiques comme les logos ou les hero images.
Exemple complet : carte d'artiste responsive et accessible
1<article class="artist-card">
2 <picture class="artist-photo">
3 <source media="(min-width: 768px)"
4 srcset="artist-large.webp 400w"
5 type="image/webp">
6 <source media="(max-width: 767px)"
7 srcset="artist-small.webp 200w"
8 type="image/webp">
9 <img src="artist-medium.jpg"
10 alt="Marie Dubois, peintre abstraite, devant ses toiles colorées dans son atelier lumineux"
11 loading="lazy"
12 width="400"
13 height="300">
14 </picture>
15
16 <div class="artist-info">
17 <h2>Marie Dubois</h2>
18 <p>Artiste peintre spécialisée dans l'art abstrait contemporain</p>
19
20 <a href="portfolio-marie-dubois.html" class="cta-button">
21 <img src="icons/portfolio.svg"
22 alt=""
23 role="presentation">
24 Voir le portfolio
25 </a>
26 </div>
27</article>1.artist-card {
2 display: flex;
3 flex-direction: column;
4 max-width: 400px;
5 border-radius: 12px;
6 overflow: hidden;
7 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
8}
9
10.artist-photo img {
11 width: 100%;
12 height: 300px;
13 object-fit: cover;
14 transition: transform 0.3s ease;
15}
16
17.artist-card:hover .artist-photo img {
18 transform: scale(1.05);
19}
20
21@media (min-width: 768px) {
22 .artist-card {
23 flex-direction: row;
24 max-width: 600px;
25 }
26
27 .artist-photo {
28 flex: 1;
29 }
30
31 .artist-info {
32 flex: 1;
33 padding: 20px;
34 }
35}💡 À retenir : Cette carte combine responsive design et accessibilité en utilisant
<picture>pour l'adaptation, des alt descriptifs, et une structure sémantique claire.
Points clés à retenir
🎯 En pratique : Pour vérifier l'accessibilité de vos images, testez votre site avec un lecteur d'écran comme NVDA (gratuit) ou activez le mode "lecteur d'écran" dans les outils de développement de votre navigateur.
⚠️ Attention : Les images trop lourdes ralentissent le chargement de votre site. Optimisez toujours vos images avant de les intégrer, en visant moins de 100KB pour les images courantes.