Les Images

1. Le concept fondamental

Les images sont un pilier du web moderne. En CSS, on ne se contente pas de les afficher : on les transforme, on les masque, on les filtre, et on crée des effets interactifs au survol. Ce chapitre couvre tout l'arsenal dont vous disposez.

Deux façons d'intégrer des images

• HTML : balise <img>, <picture>, <figure>
• CSS : background-image, content, mask-image

Ce que le CSS peut faire avec les images

2. Syntaxe et propriétés

Les bases : inline vs block

Par défaut, <img> est un élément inline (il se comporte comme du texte dans une ligne). Pour le contrôler facilement, on le passe souvent en block.

/* Par défaut, img est inline */
img {
  display: inline;       /* comportement par défaut */
}

/* Souvent plus utile : mode bloc */
img {
  display: block;        /* prend toute la largeur disponible */
  max-width: 100%;       /* ne dépasse jamais son conteneur */
  height: auto;          /* conserve le ratio d'aspect */
}

Images responsives

img {
  max-width: 100%;       /* Jamais plus large que le conteneur */
  height: auto;          /* Ratio préservé */
}

/* Alternative moderne avec aspect-ratio */
img.portrait {
  width: 100%;
  aspect-ratio: 3 / 4;   /* Format portrait */
  object-fit: cover;      /* Recadre pour remplir */
}

object-fit

object-fit contrôle comment le contenu d'une image remplit son conteneur — c'est l'équivalent de background-size pour les <img>.

img {
  width: 300px;
  height: 200px;
  object-fit: cover;        /* Remplit en conservant le ratio, coupe le surplus */
  object-position: center;  /* Centre le point focal */
}

object-position

/* Point focal personnalisé */
img {
  object-fit: cover;
  object-position: 30% 70%;  /* 30% depuis la gauche, 70% depuis le haut */
}

/* Valeurs keyword */
img {
  object-position: center top;
  object-position: left center;
}

aspect-ratio

img {
  width: 100%;
  aspect-ratio: 16 / 9;    /* Format paysage */
}

img.carré {
  aspect-ratio: 1 / 1;     /* Carré parfait */
}

img.portrait {
  aspect-ratio: 3 / 4;     /* Portrait */
}

img.banniere {
  aspect-ratio: 21 / 9;    /* Ultra-large */
}

image-set() pour la résolution

/* Fournir différentes résolutions selon l'écran */
.hero {
  background-image: image-set(
    url("hero-1x.jpg") 1x,
    url("hero-2x.jpg") 2x,
    url("hero-3x.jpg") 3x
  );
}

/* Format et media query */
.hero {
  background-image: image-set(
    url("hero.webp") type("image/webp"),
    url("hero.jpg") type("image/jpeg")
  );
}

picture + srcset

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="Description">
</picture>

<!-- Switch selon la taille de l'écran -->
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive">
</picture>

La propriété filter

filter applique des effets visuels directement au navigateur. C'est l'un des outils les plus puissants du CSS moderne.

img {
  filter: none;  /* valeur par défaut */
}

/* Fonctions disponibles : */
img.blur       { filter: blur(4px); }
img.bright     { filter: brightness(1.5); }
img.contrast   { filter: contrast(2); }
img.gray       { filter: grayscale(100%); }
img.sepia      { filter: sepia(100%); }
img.hue        { filter: hue-rotate(90deg); }
img.saturate   { filter: saturate(2); }
img.invert     { filter: invert(100%); }
img.opacity    { filter: opacity(0.5); }
img.shadow     { filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3)); }

/* Combinaison de filtres */
img.combined {
  filter: grayscale(50%) contrast(1.2) brightness(1.1) saturate(1.3);
}

mix-blend-mode

img {
  mix-blend-mode: multiply;     /* Multiplier — assombrit */
  mix-blend-mode: screen;       /* Écran — éclaircit */
  mix-blend-mode: overlay;      /* Superposition — contraste */
  mix-blend-mode: darken;       /* Assombrir — garde le plus sombre */
  mix-blend-mode: lighten;      /* Éclaircir — garde le plus clair */
  mix-blend-mode: color-dodge;  /* Éclaircir par couleur */
  mix-blend-mode: difference;   /* Différence — effet artistique */
}

clip-path

clip-path découpe un élément selon une forme géométrique.

/* Cercle */
img {
  clip-path: circle(50%);          /* Rayon = 50% de la largeur */
}

/* Ellipse */
img {
  clip-path: ellipse(40% 50%);     /* rx ry */
}

/* Losange (polygon) */
img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Rectangle avec coins arrondis (inset) */
img {
  clip-path: inset(10% round 16px);
}

/* Étoile */
img {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%,
    68% 57%, 79% 91%, 50% 70%,
    21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}

mask-image

/* Dégradé linéaire — fondu vers le bas */
img {
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Dégradé radial — cercle central */
img {
  mask-image: radial-gradient(circle, black 40%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, black 40%, transparent 70%);
}

/* Avec une image comme masque */
img {
  mask-image: url("masque.png");
  mask-size: cover;
  mask-repeat: no-repeat;
}

3. Visualisation

object-fit en images

clip-path en images

Filters en images

4. Exemples progressifs

Exemple 1 — Image responsive de base

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0 auto;
}

Exemple 2 — object-fit : cover vs contain

/* cover : remplit le conteneur, coupe le surplus */
.img-cover {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
}

/* contain : affiche l'image entière, espaces restants */
.img-contain {
  width: 100%;
  height: 300px;
  object-fit: contain;
  background-color: #f1f5f9;
}

Exemple 3 — Effet grayscale → couleur au survol

.img-grayscale-hover img {
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.img-grayscale-hover:hover img {
  filter: grayscale(0%);
}

Exemple 4 — Zoom au survol

.hover-zoom {
  overflow: hidden;
  border-radius: 8px;
}

.hover-zoom img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.hover-zoom:hover img {
  transform: scale(1.1);
}

Exemple 5 — Overlay textuel au survol

.hover-overlay {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.hover-overlay .overlay-text {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hover-overlay:hover .overlay-text {
  opacity: 1;
}

Exemple 6 — Révélation progressive

Exemple 7 — Images avatar (cercle, anneau, groupe)

/* Cercle simple */
.avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

/* Avec anneau coloré */
.avatar-ring {
  border-radius: 50%;
  border: 4px solid #2563eb;
  padding: 2px;
  background-color: white;
}

/* Groupe d'avatars (overlapping) */
.avatar-group .avatar-circle {
  margin-left: -12px;
  border: 3px solid white;
}
.avatar-group .avatar-circle:first-child {
  margin-left: 0;
}

Exemple 8 — Figure + figcaption

<figure>
  <img src="photo.jpg" alt="Description de l'image">
  <figcaption>Légende sous l'image</figcaption>
</figure>

figure {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

figcaption {
  padding: 1rem;
  font-size: 0.9rem;
  color: #64748b;
  font-style: italic;
  border-top: 1px solid #e2e8f0;
}

Exemple 9 — Grille galerie d'images

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.gallery-item {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  padding: 1rem 0.75rem 0.75rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-caption {
  opacity: 1;
}

Exemple 10 — Cartes de profil avec avatar

Exemple 11 — Hero avec image d'arrière-plan

.hero-image {
  position: relative;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-image .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  color: white;
}

Exemple 12 — Comparaison avant/après

.comparison-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  cursor: col-resize;
}

.comparison-after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);  /* Révèle la moitié gauche */
}

.comparison-slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: white;
  z-index: 2;
}

Exemple 13 — Ratios d'aspect variés

5. Erreurs fréquentes

/* ❌ MAUVAIS — L'image déborde */
img { /* pas de max-width */ }

/* ✅ BON — L'image reste dans son conteneur */
img { max-width: 100%; height: auto; }

/* ❌ MAUVAIS — object-fit n'aura aucun effet */
img { object-fit: cover; }

/* ✅ BON — Dimensions imposées + object-fit */
img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

/* ❌ MAUVAIS — Ne fonctionne pas sur Safari */
img { mask-image: linear-gradient(black, transparent); }

/* ✅ BON — Compatibilité complète */
img {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

/* ❌ MAUVAIS — Ombre rectangulaire sur un cercle */
img {
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ✅ BON — Ombre qui suit le cercle */
img {
  border-radius: 50%;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description">
</picture>

6. Bonnes pratiques

/* Transition fluide d'un filtre */
img {
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

img:hover {
  filter: grayscale(0%);
}

7. Mini-défi

8. Projet — Portfolio d'images

9. Révision

Récapitulatif des concepts clés

Quiz rapide

1. Quelle propriété CSS contrôle la manière dont une image remplit son conteneur ?
2. Quelle est la différence entre object-fit: cover et object-fit: contain ?
3. Pourquoi faut-il inclure -webkit-mask-image en plus de mask-image ?
4. Quelle fonction filter suit la forme alpha d'une image (utile pour les PNGs transparents) ?
5. Comment fournir plusieurs formats d'image au navigateur pour qu'il choisisse le meilleur ?

Cheat sheet

/* Image responsive */
img { max-width: 100%; height: auto; display: block; }

/* Object-fit dans un conteneur fixe */
img { width: 300px; height: 200px; object-fit: cover; }

/* Grayscale → Couleur au survol */
img { filter: grayscale(100%); transition: filter 0.4s ease; }
img:hover { filter: grayscale(0%); }

/* Clip-path cercle */
img { clip-path: circle(50%); }

/* Mask dégradé vers le bas */
img {
  -webkit-mask-image: linear-gradient(black 50%, transparent);
  mask-image: linear-gradient(black 50%, transparent);
}

/* Avatar anneau */
.avatar {
  border-radius: 50%;
  border: 4px solid #2563eb;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* Ombre qui suit la forme */
img { filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3)); }