Les images HTML

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"
/>

• 📸 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

1. 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

2. 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="<!-- Description détaillée de la photo -->"
                    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="<!-- Votre description -->"
                    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="<!-- TODO: Ajoutez vos différentes tailles -->"
                sizes="<!-- TODO: Définissez les tailles d'affichage -->"
                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>