🖼️ Optimiser les images pour le web

Introduction

Des images trop lourdes ralentissent un site et dégradent l’expérience utilisateur.

Optimiser une image pour le web, c’est réduire son poids sans perdre en qualité, choisir le bon format et l’adapter à l’usage (site, blog, CV en ligne).
Cette fiche t’explique comment préparer tes visuels pour un affichage rapide et professionnel.

(📥 Télécharge la fiche en PDF en bas de page)

Étape 1 – Choisir le bon format

• JPEG → photos, visuels riches en couleurs (poids léger, bonne compression).

• PNG → images avec transparence ou besoin de netteté (logos, icônes).

• SVG → logos, pictogrammes vectoriels (infini en résolution, très léger).

• WebP → format moderne (qualité + compression supérieure, compatible navigateurs récents).

✅ Astuce : privilégie WebP ou JPEG pour les photos, SVG pour le graphisme.

Étape 2 – Adapter la taille et la résolution

• Largeur d’image recommandée :
  800 px pour articles/blog.
  1200–1600 px pour bannières/headers.
  >2000 px inutile pour le web → réservé au print.

• Résolution : 72 ppp (dpi) suffit pour l’écran.

⚠️ Erreur fréquente : importer des images 5000 px de large → inutile et lourd.

Étape 3 – Compresser sans perdre la qualité

• Outils gratuits en ligne : TinyPNG, Squoosh, CompressJPEG.

• Logiciels : Photoshop → Enregistrer pour le web, GIMP, Affinity Photo.

• Cible idéale :
  < 200 ko pour une photo web standard.
  < 50 ko pour une icône/logo.

Étape 4 – Nommer et organiser les fichiers

• Noms descriptifs et SEO-friendly :
  cv-developpeur-benjamin.jpg
logo-ifpa-transparent.png

• Évite “image1.jpg” → pas lisible ni optimisé.

• Range par dossiers : /images/blog/, /images/icons/.

Étape 5 – Ajouter un texte alternatif (alt text)

• Le texte alternatif décrit l’image pour l’accessibilité et le référencement.

• Exemple :
  alt="Technicien systèmes et réseaux en formation IFPA à Poitiers"

• Un bon alt text = pertinent + concis (pas “image.jpg”).

Étape 6 – Tester et vérifier

• Intègre les images dans ton site / CV web.

• Vérifie la vitesse de chargement (outil : Google PageSpeed Insights).

• Vérifie la compatibilité mobile et différents navigateurs.

Résumé rapide (Check-list)

• Choisir le bon format (JPEG/PNG/SVG/WebP).

• Adapter la taille (800–1600 px selon usage).

• Compresser < 200 ko.

• Nommer les fichiers clairement.

• Ajouter un texte alternatif descriptif.

• Vérifier vitesse et compatibilité.

(📥 Télécharge la version PDF de la check-list)

Aller plus loin

• 🔗 TinyPNG – Compression gratuite

• 🔗 Squoosh – Optimisation Google

• 🔗 Google PageSpeed Insights

• 🔗 Nos formations Designer Web – IFPA.pro

• 🔗 Formations Poitiers – IFPA86.fr

• 🔗 Blog Benjamin Duplaa – Design web et optimisation SEO