Tutoriel d'images en HTML pour débutants : guide complet

Introduction à l'HTML et aux Images

Compréhension des Bases

L'HTML structure le contenu et les images ajoutent de la richesse visuelle. Chaque image doit être adaptée au contexte (photographie, icône, illustration) et optimisée pour le web. Un site qui sert des images trop lourdes augmente le temps de chargement, impacte le SEO et peut augmenter le taux de rebond.

• HTML est le langage de balisage standard pour le web.
• Les images enrichissent le contenu visuel.
• Utilisez des images optimisées pour un chargement rapide.
• Ajoutez des balises alt pour l'accessibilité.

Exemple simple :

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

Cette balise affiche l'image spécifiée et fournit une description pour les lecteurs d'écran.

Syntaxe de Base pour Inclure des Images

Balise <img>

La balise <img> nécessite au moins src et alt. Privilégiez les chemins relatifs dans vos projets et vérifiez l'accessibilité avec un texte alternatif descriptif :

<img src="images/photo.jpg" alt="Une belle vue" width="1200" height="675">

Notez que fournir width et height permet au navigateur de réserver l'espace et de réduire le CLS (Cumulative Layout Shift).

Attributs Essentiels des Balises d'Image

Améliorer l'Accessibilité et la Performance

Outre alt, les attributs width, height et loading="lazy" améliorent rendu et performance. decoding="async" peut aider pour les images non critiques.

<img src="image.jpg" alt="Image illustrative" width="300" height="200" loading="lazy" decoding="async">

Conseils :

• Alt : descriptif fonctionnel ou contextuel selon le cas d'usage.
• Width/height : utilisez les valeurs réelles ou les dimensions calculées pour éviter le layout shift.
• Loading : lazy pour les images non visibles au chargement initial.
• Decoding : async pour déléguer le décodage au main-thread.

Formats d'Images et Compatibilité Web

Choisir le bon format d'image

Formats recommandés selon le cas :

• JPEG / JPG : photos, bon ratio compression/qualité.
• PNG : graphiques, transparence, logos.
• WebP : compression moderne, bonne adoption (Chrome, Edge, Firefox, Safari 14+).
• AVIF : compression encore meilleure que WebP dans de nombreux cas, adoption croissante.
• GIF : animations simples (remplacer par vidéo ou APNG/AVIF pour de meilleures performances quand possible).

Testez la prise en charge et l'affichage dans plusieurs navigateurs. Pour vérifier la disponibilité d'une ressource sur votre serveur, vous pouvez utiliser :

curl -I https://example.com/image.webp

Vérifiez l'en-tête Content-Type retourné par le serveur (ex. image/webp).

Techniques Avancées pour Optimiser les Images

Stratégies d'optimisation

Outils et workflows réels :

• Utilisez sharp (Node.js) pour générer plusieurs tailles et formats côté build. Exemple : sharp@0.32.x (vérifiez la version sur npm avant usage).
• Intégrez un CDN (Cloudflare, Fastly, AWS CloudFront) pour distribuer les images et activer la mise en cache et la transformation à la volée si possible.
• Automatisez la génération d'images dans votre pipeline CI (example: GitHub Actions, GitLab CI) et stockez les assets optimisés dans un bucket ou un CDN.

Exemple JavaScript propre pour créer et insérer une image en lazy-loading (progressive enhancement) :

const img = document.createElement("img");
img.src = "image.jpg";
img.alt = "Image illustrative";
img.loading = "lazy";
img.width = 800;
img.height = 450;
img.decoding = "async";
document.body.appendChild(img);

Compression : utilisez ImageOptim, TinyPNG/TinyJPG (web UI/API), mozjpeg, or pngquant pour les versions automatisées pendant le build.

Exemples pratiques : srcset et <picture>

Pourquoi utiliser srcset et <picture> ?

srcset, sizes et <picture> donnent au navigateur les éléments pour choisir la meilleure source selon la résolution d'écran, le DPR et le format supporté.

Exemple : srcset avec des width descriptors (w)

Utilisez des descriptors de largeur (400w, 800w) et sizes pour indiquer comment l'image est affichée dans la mise en page :

<img src="images/photo-800.jpg"
     srcset="images/photo-400.jpg 400w, images/photo-800.jpg 800w, images/photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
     alt="Vue panoramique" width="800" height="450" loading="lazy" />

Le navigateur utilise sizes (la largeur prévue dans le layout) puis choisit la meilleure ressource dans srcset en tenant compte du DPR.

Exemple : <picture> pour fournir des formats modernes (AVIF / WebP) avec fallback

Exemple d'usage d'art direction et fallback :

<picture>
  <source type="image/avif" srcset="images/photo-800.avif 800w, images/photo-1600.avif 1600w" sizes="(max-width: 600px) 100vw, 800px"/>
  <source type="image/webp" srcset="images/photo-800.webp 800w, images/photo-1600.webp 1600w" sizes="(max-width: 600px) 100vw, 800px"/>
  <img src="images/photo-800.jpg" alt="Vue panoramique" width="800" height="450" loading="lazy"/>
</picture>

Bonnes pratiques : générez plusieurs tailles/formats au build (sharp), précisez width et height, et inspectez l'onglet Network pour valider la ressource réellement chargée.

Génération d'images responsive : exemple avec sharp (Node.js)

Workflow recommandé : installer sharp et exécuter un script Node.js pour produire plusieurs tailles et formats (JPEG, WebP, AVIF). Exemple simple :

# Installer sharp (vérifiez la version la plus récente sur npm)
npm install sharp@0.32.1

// scripts/generate-images.js
const sharp = require("sharp");
const fs = require("fs");

async function generate() {
  try {
    await sharp("source/photo.jpg").resize(400).toFile("dist/photo-400.jpg");
    await sharp("source/photo.jpg").resize(800).toFile("dist/photo-800.jpg");
    await sharp("source/photo.jpg").resize(1600).toFile("dist/photo-1600.jpg");
    // Générer WebP et AVIF
    await sharp("source/photo.jpg").resize(800).webp({quality: 80}).toFile("dist/photo-800.webp");
    await sharp("source/photo.jpg").resize(800).avif({quality: 50}).toFile("dist/photo-800.avif");
    console.log("Images générées");
  } catch (err) {
    console.error(err);
    process.exit(1);
  }
}
generate();

Intégrez ce script dans votre CI (GitHub Actions, GitLab CI) et déployez les fichiers optimisés sur un CDN.

Lazy-loading : fallback IntersectionObserver

Approche progressive : si le navigateur supporte nativement loading, laissez faire ; sinon, utilisez IntersectionObserver. Exemple lisible :

if ("loading" in HTMLImageElement.prototype) {
  // Native lazy-loading supported
  document.querySelectorAll('img[loading="lazy"]').forEach(img => {
    img.src = img.dataset.src || img.src;
  });
} else {
  // Fallback to IntersectionObserver
  const observer = new IntersectionObserver((entries, obs) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        obs.unobserve(img);
      }
    });
  }, { rootMargin: "200px" });
  document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
}

Sécurité et en-têtes serveur

• Assurez-vous que le serveur renvoie le bon Content-Type (ex. image/webp).
• Pour les images cross-origin manipulées côté client (canvas), configurez Access-Control-Allow-Origin correctement.
• Définissez une Content-Security-Policy (directive img-src) pour restreindre les sources d'images autorisées.
• Évitez le mixed content (ne chargez pas d'images HTTP sur une page HTTPS).

Comprendre l'attribut sizes

Rôle de sizes dans la sélection d'image

Alors que srcset liste les ressources disponibles (avec des descriptors w ou x), sizes indique au navigateur quelle largeur CSS l'image occupera dans différents contextes. Le navigateur calcule ensuite la densité de pixel réelle (accounting pour le DPR) et choisit la ressource la plus adaptée.

Exemples concrets

1) Image pleine largeur dans un layout fluide :

<!-- L'image occupe 100vw sur écrans <= 600px, sinon 800px fixe -->
<img src="images/photo-800.jpg"
     srcset="images/photo-400.jpg 400w, images/photo-800.jpg 800w, images/photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="Vue panoramique" width="800" height="450" />

Explication : si viewport ≤ 600px, navigateur suppose l'image s'affichera à 100% du viewport (ex. 360px). Il choisira donc probablement la ressource 400w. Sur desktop large, il prévoit 800px et choisira 800w (ou 1600w si DPR élevé).

2) Image dans une grille CSS (ex. prend 50% du conteneur sur écran moyen) :

<!-- CSS: .col { width: 50%; } -->
<img src="images/photo-800.jpg"
     srcset="images/photo-400.jpg 400w, images/photo-800.jpg 800w, images/photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
     alt="Image grille" width="800" height="450" />

Note : la valeur 50vw signifie la moitié de la largeur du viewport — adaptée pour une colonne prenant 50% de l'écran. Si votre conteneur a un max-width différent ou si l'image est dans un container centré, ajustez sizes en conséquence (vous pouvez utiliser ch, px, vw ou des media queries).

Conseils pratiques et dépannage

• Commencez par rédiger des valeurs sizes selon votre CSS. Si l'image fait width: 50% d'un container qui a max-width: 1200px, utilisez (max-width: 1200px) 50vw, 600px par exemple.
• Utilisez l'onglet Network du navigateur et activez "Disable cache" pour voir quelle ressource est réellement demandée.
• Si le navigateur choisit une image trop petite : vérifiez votre sizes et les règles CSS (max-width, container padding, box-sizing).
• Pour une vérification rapide, utilisez sizes="100vw" pour forcer le navigateur à suivre l'exemple plein écran et tester le comportement.

Erreurs Courantes et Comment les Éviter

Problèmes de Chemin d'Accès et de Format d'Image

Vérifiez toujours vos chemins relatifs/absolus et testez sur l'environnement de production. Un 404 sur une image peut dégrader l'UX et le SEO. Définir width et height évite les sauts de contenu.

• Vérifiez le chemin d'accès des images.
• Utilisez des formats d'images adaptés.
• Définissez les dimensions des images.
• Optimisez les images pour le web.

Exemple de balise d'image bien formatée :

<img src="./images/mon_image.jpg" alt="Description de l'image" width="800" height="600" loading="lazy">

Accessibilité et SEO des Images

N'oubliez pas d'ajouter des alt descriptifs. Utilisez des noms de fichiers descriptifs (ex. chat_noir_canape.jpg) et structurez les images dans des balises sémantiques <figure> & <figcaption> si une légende est nécessaire.

Exemple : figure avec attributs de taille (corrigé pour éviter les CLS) :

<figure>
  <img src="./images/chat_noir.jpg" alt="Un chat noir sur le canapé" width="800" height="600" loading="lazy"/>
  <figcaption>Mon chat noir adoré.</figcaption>
</figure>

Cette balise spécifie le chemin d'accès, le texte alternatif, et les dimensions de l'image.