Les images et figures

Intégrer des images dans vos pages

Les images rendent vos pages visuellement attrayantes et informatives.

Balise image de base

<img src="photo.jpg" alt="Description de l'image">

Attributs obligatoires :

• src : Chemin vers l'image
• alt : Texte alternatif (accessibilité + SEO)

Attributs optionnels

<img src="photo.jpg" 
     alt="Paysage de montagne" 
     width="800" 
     height="600"
     title="Survol : Vue des Alpes"
     loading="lazy">

• width et height : Dimensions en pixels
• title : Infobulle au survol
• loading="lazy" : Chargement différé (performance)

Chemins d'images

Chemin relatif

<img src="images/photo.jpg" alt="Photo">
<img src="../images/photo.jpg" alt="Photo niveau supérieur">

Chemin absolu

<img src="/images/photo.jpg" alt="Photo racine">
<img src="https://example.com/photo.jpg" alt="Photo externe">

Formats d'images web

• JPG/JPEG : Photos, images complexes
• PNG : Transparence, logos, icônes
• GIF : Animations simples
• SVG : Logos vectoriels, icônes (scalables)
• WebP : Format moderne, meilleure compression

Balise <figure> et <figcaption>

<figure>
    <img src="graphique.jpg" alt="Graphique des ventes 2024">
    <figcaption>
        Figure 1 : Évolution des ventes au premier trimestre 2024
    </figcaption>
</figure>

Utilisez <figure> pour des images avec légende.

Images responsive

<img src="photo.jpg" 
     alt="Paysage" 
     style="max-width: 100%; height: auto;">

Images adaptatives (srcset)

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     alt="Image responsive">

Image comme lien

<a href="galerie.html">
    <img src="miniature.jpg" alt="Voir la galerie">
</a>

Images SVG en ligne

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" 
            stroke="blue" stroke-width="3" fill="lightblue" />
</svg>

Images de fond (CSS)

<div style="background-image: url('fond.jpg'); 
            width: 100%; height: 400px;">
    <h1>Titre sur fond d'image</h1>
</div>

Bonnes pratiques

• Toujours utiliser l'attribut alt
• Optimiser les images (compression)
• Utiliser loading="lazy" pour les performances
• Spécifier width et height pour éviter les décalages
• Privilégier WebP pour les nouveaux projets

Points clés

• <img> insère une image
• alt est OBLIGATOIRE (accessibilité)
• <figure> pour images avec légende
• loading="lazy" améliore les performances
• srcset pour images responsive

📝 Vous avez terminé cette leçon ?

Créez un compte gratuit pour sauvegarder votre progression !