Les Images en HTML

Maîtrisez l'intégration d'images dans vos pages web : syntaxe, attributs, optimisation et bonnes pratiques pour un web moderne.

🖼️
Balise <img>
📐
Attributs
🎨
Formats
📱
Responsive

Syntaxe de Base de <img>

La balise <img> est une balise auto-fermante qui permet d'insérer des images dans vos pages web.

Structure de la balise <img>

Syntaxe minimale :

<img src="chemin/vers/image.jpg" alt="Description"/>

Caractéristiques importantes :

Balise auto-fermante

Pas de balise de fermeture </img>

Élément inline

S'insère dans le flux du texte

Élément remplacé

Le contenu vient d'une source externe

Exemples visuels :

Voici une image inline dans le texte : Exemple d'image qui s'intègre parfaitement.

Image de démonstration :

Image de démonstration

Largeur : 200px, Hauteur : 100px

Attributs Essentiels

Découvrez tous les attributs de la balise <img> pour contrôler l'affichage, l'accessibilité et le comportement de vos images.

Attributs Obligatoires

src (source)

Chemin vers le fichier image. Peut être relatif, absolu ou une URL complète.

src="images/photo.jpg"
src="https://site.com/photo.jpg"

alt (texte alternatif)

Description de l'image pour l'accessibilité et quand l'image ne charge pas.

alt="Description précise de l'image"
alt="" ← Image décorative

Attributs de Dimensions

width et height

Définissent les dimensions en pixels. Préfèrent CSS pour le responsive.

width="300" height="200"

Avantages des dimensions :

  • • Réserve l'espace avant le chargement
  • • Évite les sauts de mise en page
  • • Améliore les performances perçues
  • • Important pour le CLS (Core Web Vitals)

Autres Attributs Utiles

title

Info-bulle au survol

title="Information supplémentaire"

loading

Contrôle du chargement

loading="lazy" ← Différé
loading="eager" ← Immédiat

decoding

Stratégie de décodage

decoding="async"
decoding="sync"
decoding="auto"

crossorigin

Gestion CORS

crossorigin="anonymous"
crossorigin="use-credentials"

srcset et sizes

Images responsive (avancé)

srcset="image-320.jpg 320w, image-640.jpg 640w"
sizes="(max-width: 600px) 100vw, 50vw"

class et id

Sélecteurs CSS

class="hero-image rounded"
id="main-logo"

Exemple complet avec tous les attributs

<!-- Image simple -->
<img src="images/paysage.jpg" alt="Magnifique paysage de montagne au coucher du soleil"/>

<!-- Image avec dimensions pour éviter le layout shift -->
<img 
    src="images/portrait.jpg"
    alt="Portrait de Marie Dupont, directrice marketing"
    width="400"
    height="300"
    class="profile-photo"
/>

<!-- Image optimisée pour les performances -->
<img 
    src="images/hero-1200.jpg"
    alt="Équipe de développeurs travaillant sur des ordinateurs portables"
    width="1200"
    height="600"
    loading="lazy"
    decoding="async"
    class="hero-image"
    id="main-hero"
    title="Notre équipe passionnée de développement"
/>

<!-- Image responsive avec srcset -->
<img 
    src="images/product-640.jpg"
    srcset="images/product-320.jpg 320w,
            images/product-640.jpg 640w,
            images/product-1280.jpg 1280w"
    sizes="(max-width: 600px) 100vw, 
           (max-width: 1200px) 50vw, 
           33vw"
    alt="Nouveau smartphone avec écran OLED haute résolution"
    width="640"
    height="480"
    loading="lazy"
    class="product-image responsive"
/>

<!-- Image décorative (alt vide) -->
<img 
    src="images/decoration-pattern.svg"
    alt=""
    class="decorative-pattern"
    aria-hidden="true"
/>

Formats d'Images Web

Choisissez le bon format d'image selon vos besoins : qualité, taille de fichier, transparence et compatibilité navigateur.

📸 JPEG / JPG

Idéal pour :

  • • Photos avec beaucoup de couleurs
  • • Images réalistes
  • • Dégradés complexes
  • • Images de grande taille

Avantages :

  • ✓ Compression efficace
  • ✓ Petite taille de fichier
  • ✓ Support universel

Inconvénients :

  • ✗ Pas de transparence
  • ✗ Compression avec perte
  • ✗ Mauvais pour les graphiques

🎨 PNG

Idéal pour :

  • • Logos et icônes
  • • Images avec transparence
  • • Graphiques simples
  • • Screenshots

Avantages :

  • ✓ Support transparence
  • ✓ Compression sans perte
  • ✓ Excellente qualité

Inconvénients :

  • ✗ Fichiers plus lourds
  • ✗ Moins bon pour les photos

📐 SVG

Idéal pour :

  • • Icônes et logos
  • • Graphiques vectoriels
  • • Illustrations simples
  • • Images responsive

Avantages :

  • ✓ Infiniment scalable
  • ✓ Très petite taille
  • ✓ Modifiable en CSS
  • ✓ Format texte (SEO friendly)

Inconvénients :

  • ✗ Pas pour les photos
  • ✗ Support limité anciennes versions IE

🚀 WebP

Idéal pour :

  • • Remplacement JPEG/PNG
  • • Performance web
  • • Sites modernes
  • • Mobile-first

Avantages :

  • ✓ 25-35% plus léger que JPEG
  • ✓ Support transparence
  • ✓ Compression excellente

Inconvénients :

  • ✗ Support navigateur limité
  • ✗ Nécessite fallback

⚡ AVIF

Idéal pour :

  • • Dernière génération
  • • Performance maximale
  • • Progressive enhancement

Avantages :

  • ✓ 50% plus léger que JPEG
  • ✓ Qualité exceptionnelle
  • ✓ HDR support

Inconvénients :

  • ✗ Support très récent
  • ✗ Nécessite plusieurs fallbacks

🎬 GIF

Idéal pour :

  • • Animations simples
  • • Démos courtes
  • • Memes et réactions

Avantages :

  • ✓ Animation native
  • ✓ Support universel
  • ✓ Pas de contrôles

Inconvénients :

  • ✗ Fichiers très lourds
  • ✗ 256 couleurs max
  • ✗ Pas de contrôle utilisateur

Images Responsive

Apprenez à créer des images qui s'adaptent parfaitement à tous les écrans avec les techniques modernes HTML et CSS.

Méthode 1 : CSS Simple

Code CSS de base :

img
max-width: 100%;
height: auto;

HTML correspondant :

<img src="image.jpg" alt="Description" class="responsive"/>
Avantages :
  • • Simple à implémenter
  • • Compatible tous navigateurs
  • • Une seule image source

Démonstration :

Redimensionnez votre navigateur pour voir l'effet :

Image responsive

Cette image s'adapte à la taille de son conteneur

Méthode 2 : srcset et sizes (Avancé)

Principe du srcset :

Le navigateur choisit automatiquement la meilleure image selon la taille d'écran, la densité de pixels et la bande passante. 

<!-- Images adaptées selon la largeur d'écran -->
<img 
    src="hero-640.jpg"
    srcset="hero-320.jpg 320w,
            hero-640.jpg 640w,
            hero-1280.jpg 1280w,
            hero-1920.jpg 1920w"
    sizes="(max-width: 320px) 280px,
           (max-width: 640px) 600px,
           (max-width: 1280px) 1200px,
           1800px"
    alt="Image hero responsive"
    width="1280"
    height="640"
/>

<!-- Images adaptées selon la densité de pixels -->
<img 
    src="logo.png"
    srcset="logo.png 1x,
            logo@2x.png 2x,
            logo@3x.png 3x"
    alt="Logo de l'entreprise"
    width="200"
    height="100"
/>
Attribut srcset :
  • • 320w = largeur 320px
  • • 2x = densité 2x (Retina)
  • • Liste séparée par des virgules
Attribut sizes :
  • • Conditions CSS media queries
  • • Taille d'affichage prévue
  • • Aide le navigateur à choisir

Méthode 3 : Élément <picture>

Art Direction et Formats Modernes :

L'élément <picture> permet de servir différentes images selon le contexte et d'utiliser des formats modernes avec fallback. 

<!-- Support des formats modernes avec fallback -->
<picture>
    <!-- Format AVIF pour les navigateurs compatibles -->
    <source srcset="image.avif" type="image/avif">
    
    <!-- Format WebP pour les navigateurs modernes -->
    <source srcset="image.webp" type="image/webp">
    
    <!-- Fallback JPEG pour tous les navigateurs -->
    <img src="image.jpg" alt="Description de l'image"/>
</picture>

<!-- Art Direction : différentes images selon l'écran -->
<picture>
    <!-- Image mobile (portrait) -->
    <source 
        media="(max-width: 600px)"
        srcset="hero-mobile-400.jpg 400w,
                hero-mobile-800.jpg 800w"
        sizes="100vw"
    >
    
    <!-- Image tablette -->
    <source 
        media="(max-width: 1200px)"
        srcset="hero-tablet-800.jpg 800w,
                hero-tablet-1600.jpg 1600w"
        sizes="100vw"
    >
    
    <!-- Image desktop (paysage) -->
    <img 
        src="hero-desktop-1200.jpg"
        srcset="hero-desktop-1200.jpg 1200w,
                hero-desktop-2400.jpg 2400w"
        sizes="100vw"
        alt="Image hero adaptée selon l'appareil"
        width="1200"
        height="600"
    />
</picture>
Avantages de <picture> :
  • • Support formats modernes
  • • Art direction précise
  • • Fallback automatique
  • • Contrôle total
Cas d'usage :
  • • Images différentes mobile/desktop
  • • Formats WebP/AVIF avec fallback
  • • Recadrage intelligent
  • • Optimisation performance

Travaux Pratiques

Mettez en pratique vos connaissances sur les images HTML avec ces exercices progressifs et concrets.

Exercice 1 : Galerie d'images simple

Objectif :

Créez une galerie de 6 images avec différents formats et optimisations pour comprendre les bonnes pratiques.

Critères :

  • • 3 photos (JPEG) avec dimensions définies
  • • 2 logos/icônes (PNG ou SVG)
  • • 1 image décorative (alt vide)
  • • Toutes les images responsive (CSS)
  • • Attributs alt descriptifs et pertinents
  • • Lazy loading sur les images en bas

Rendu attendu :

Ma Galerie Photos

Photo 1
Photo 2
Logo
Photo 3
Icon
Déco

Exercice 2 : Images responsive avancées

Mission :

Implémentez une image hero responsive avec srcset et une galerie utilisant l'élément <picture>.

Spécifications :

  • • Image hero avec 3 tailles différentes (srcset)
  • • Attribut sizes adapté aux breakpoints
  • • 2 images avec <picture> et formats WebP
  • • Fallback JPEG pour compatibilité
  • • Tests sur différentes tailles d'écran

Outils recommandés :

Images de test :
  • • Unsplash.com (images libres)
  • • Placeholder.com (tests)
  • • Via.placeholder.com
Compression :
  • • TinyPNG.com
  • • Squoosh.app (Google)
  • • ImageOptim (Mac)

Code de démarrage

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercices - Images HTML</title>
    <style>
        /* CSS pour images responsive */
        img {
            max-width: 100%;
            height: auto;
        }
        
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            padding: 1rem;
        }
        
        .gallery-item {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            text-align: center;
        }
        
        .hero-section {
            position: relative;
            height: 400px;
            overflow: hidden;
            border-radius: 12px;
            margin-bottom: 2rem;
        }
        
        .hero-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <h1>Exercices - Maîtrise des Images HTML</h1>
    
    <!-- EXERCICE 1 : GALERIE SIMPLE -->
    <section>
        <h2>Exercice 1 : Ma Galerie d'Images</h2>
        
        <div class="gallery">
            <!-- TODO: Photo 1 (JPEG avec dimensions) -->
            <div class="gallery-item">
                <img 
                    src="https://via.placeholder.com/300x200/3498db/fff?text=Photo+1"
                    alt=""
                    width="300"
                    height="200"
                />
                <p>Photo Nature</p>
            </div>
            
            <!-- TODO: Photo 2 avec lazy loading -->
            <div class="gallery-item">
                <img 
                    src="https://via.placeholder.com/300x200/2ecc71/fff?text=Photo+2"
                    alt=""
                    width="300"
                    height="200"
                    loading="lazy"
                />
                <p>Architecture</p>
            </div>
            
            <!-- TODO: Logo PNG -->
            <div class="gallery-item">
                <img 
                    src="https://via.placeholder.com/150x150/9b59b6/fff?text=LOGO"
                    alt="Logo de l'entreprise XYZ"
                    width="150"
                    height="150"
                />
                <p>Notre Logo</p>
            </div>
            
            <!-- TODO: Complétez avec 3 autres images selon les critères -->
        </div>
    </section>
    
    <hr>
    
    <!-- EXERCICE 2 : IMAGES RESPONSIVE AVANCÉES -->
    <section>
        <h2>Exercice 2 : Images Responsive Avancées</h2>
        
        <!-- Image Hero avec srcset -->
        <div class="hero-section">
            <!-- TODO: Implémentez une image hero avec srcset et sizes -->
            <img 
                src="https://via.placeholder.com/800x400/e67e22/fff?text=Hero+Image"
                srcset=""
                sizes=""
                alt="Image hero de présentation"
                class="hero-image"
                width="1200"
                height="600"
            />
        </div>
        
        <!-- Images avec élément picture -->
        <div class="gallery">
            <!-- TODO: Image 1 avec picture et format WebP -->
            <div class="gallery-item">
                <picture>
                    <!-- TODO: Source WebP -->
                    <!-- TODO: Fallback JPEG -->
                </picture>
                <p>Image WebP/JPEG</p>
            </div>
            
            <!-- TODO: Image 2 avec art direction -->
            <div class="gallery-item">
                <picture>
                    <!-- TODO: Source mobile -->
                    <!-- TODO: Source desktop -->
                </picture>
                <p>Art Direction</p>
            </div>
        </div>
    </section>
</body>
</html>

Maîtrisez les Images HTML ! 🖼️

Vous savez maintenant intégrer des images performantes et accessibles. Découvrez les autres aspects du HTML pour créer des sites complets.

📝 Contenu 🔗 Liens 📊 Tableaux 📝 Formulaires 📦 Imbrication 🎨 CSS