Ajouter des images

Chapitre 4 • Images en HTML

Les images transforment un site web d'une simple page de texte en une expérience visuelle engageante.

Les avantages clés :

  • Engagement visuel : Les images captent l'attention et rendent le contenu plus attrayant
  • Compréhension améliorée : Elles illustrent et clarifient les concepts complexes
  • Mémorisation : Le contenu visuel est mieux retenu que le texte seul
  • Émotion : Elles créent une connexion émotionnelle avec les visiteurs
  • Professionnalisme : Un bon usage des images élève la qualité perçue de votre site

Exemple sans image

Un long texte explicatif sur un produit...

Exemple avec image

Texte accompagné d'une illustration visuelle

La balise <img>

Chapitre 4 • Images en HTML

La balise <img> est l'élément HTML fondamental pour intégrer des images dans une page web.

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

Caractéristiques importantes :

  • C'est une balise auto-fermante (pas de balise fermante)
  • Nécessite au minimum les attributs src et alt
  • N'est pas un élément de bloc (par défaut en ligne)
  • Peut être stylisée avec CSS comme tout autre élément

Attributs essentiels

src

Spécifie le chemin vers l'image

src="images/photo.jpg"

alt

Texte alternatif descriptif

alt="Photo de paysage"

width/height

Dimensions en pixels

width="300" height="200"

L'attribut src

Chapitre 4 • Images en HTML

L'attribut src (source) définit le chemin d'accès à l'image à afficher.

Types de chemins

Chemin relatif

<img src="images/logo.png" alt="Logo" />

Depuis le même dossier : "photo.jpg"

Dossier enfant : "images/photo.jpg"

Dossier parent : "../photo.jpg"

URL absolue

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

Depuis la racine du site : "/images/photo.jpg"

Depuis un autre domaine : "https://..."

Erreurs courantes

  • Chemins incorrects (erreur 404)
  • Espaces dans les noms de fichiers
  • Mauvaise casse (Linux/Mac sont sensibles à la casse)

L'attribut alt

Chapitre 4 • Images en HTML

L'attribut alt fournit un texte alternatif essentiel pour l'accessibilité et le référencement.

Pourquoi c'est important :

  • Accessibilité : Lu par les lecteurs d'écran pour les malvoyants
  • SEO : Compris par les moteurs de recherche
  • Fallback : Affiché si l'image ne se charge pas
  • Contexte : Aide à comprendre le contenu même sans voir l'image

Exemples de bons textes alt

Descriptif

<img src="chat.jpg" alt="Chaton siamois jouant avec une pelote de laine" />

Fonctionnel

<img src="recherche.png" alt="Rechercher" />

Décoratif

<img src="divider.png" alt="" />

(vide pour les éléments purement décoratifs)

Bonnes pratiques

  • Soyez concis mais descriptif
  • Évitez "image de..." ou "photo de..."
  • Pour les images cliquables, décrivez la destination
  • Ne négligez pas cet attribut, même en développement

Formats d'images

Chapitre 4 • Images en HTML

Choisir le bon format d'image est crucial pour la qualité et les performances.

Format Utilisation Avantages Inconvénients
JPEG Photos, images complexes Bon compromis qualité/taille Pas de transparence
PNG Logos, graphiques, transparence Qualité sans perte, transparence Fichiers plus lourds
GIF Animations simples Animation, transparence Limité à 256 couleurs
SVG Icônes, logos, illustrations Vectoriel, redimensionnable sans perte Pas pour photos complexes
WebP Alternative moderne Excellente compression Compatibilité légèrement moindre

Optimisation des images

  • Compressez les JPEG/PNG avant publication
  • Utilisez des outils comme TinyPNG ou Squoosh
  • Privilégiez le WebP pour une meilleure performance
  • Adaptez la résolution à l'affichage réel

Redimensionner les images

Chapitre 4 • Images en HTML

Contrôler les dimensions des images est essentiel pour une mise en page cohérente.

Avec attributs HTML

<img src="photo.jpg" alt="Photo" 
     width="800" height="600" />

Définit les dimensions intrinsèques

Avec CSS (recommandé)

<img src="photo.jpg" alt="Photo" 
     class="responsive-img" />
.responsive-img {
    max-width: 100%;
    height: auto;
}

Problèmes courants

  • Déformation avec des ratios incorrects
  • Images trop grandes qui ralentissent la page
  • Images pixellisées lorsqu'agrandies

Bonnes pratiques

  • Redimensionnez les images à la taille d'affichage réelle avant de les uploader
  • Utilisez max-width: 100% pour les images responsives
  • Conservez les proportions avec height: auto
  • Pour les images critiques, utilisez le loading="eager"

Organiser ses images

Chapitre 4 • Images en HTML

Une bonne structure de fichiers est essentielle pour maintenir un projet propre.

Structure recommandée

mon-site/
├── index.html
├── css/
├── js/
└── images/
    ├── logos/
    ├── photos/
    ├── icons/
    └── backgrounds/

Conventions de nommage

  • Utilisez des noms descriptifs et cohérents
  • Évitez les espaces et caractères spéciaux
  • Utilisez des traits d'union plutôt que des underscores
  • Incluez éventuellement des dimensions dans le nom

Exemple : produit-x-800x600.jpg

Gestion des versions

Pour les sites complexes, envisagez :

  • Un système de gestion des médias
  • Des dossiers par date ou par section du site
  • Des images différentes pour les variantes dark/light

Erreurs fréquentes

Chapitre 4 • Images en HTML

Alt manquant ou vide

<img src="photo.jpg" />

Problème d'accessibilité et SEO

Chemins incorrects

<img src="image.jpg" alt="Image" />

Quand l'image est dans un sous-dossier

Images trop lourdes

<img src="photo-non-optimisee.jpg" alt="Photo" />

Ralentit le chargement de la page

Solutions

  • Toujours tester l'affichage des images
  • Valider les chemins et les permissions
  • Optimiser les images avant mise en ligne
  • Utiliser le lazy loading pour les images hors écran

En résumé

Chapitre 4 • Images en HTML

Balise <img>

Avec src et alt obligatoires

Texte alternatif

Essentiel pour accessibilité et SEO

Formats

JPEG, PNG, SVG selon l'usage

Organisation

Dossier /images/ bien structuré

Les images bien intégrées transforment un site web basique en une expérience visuelle engageante. En suivant les bonnes pratiques de ce chapitre - du choix du format à l'optimisation des performances - vous pouvez créer des pages à la fois belles et efficaces. Dans le prochain chapitre, nous aborderons les tableaux et leur mise en forme en HTML.