Les images et médias : formats, tailles, optimisation pour le web

Pour optimiser les images de votre site web, utilisez le format WebP (30 % plus léger que le JPEG à qualité égale), compressez chaque image à 80-85 % de qualité, adaptez les dimensions à l'affichage réel (pas besoin d'une image de 4 000 pixels pour un affichage de 800 pixels), et activez le lazy loading pour ne charger les images que quand le visiteur les voit. Les images représentent en moyenne 50 % du poids d'une page web.

Les images sont indispensables pour un site professionnel : elles captent l'attention, illustrent vos propos et renforcent votre crédibilité. Mais des images mal optimisées sont la première cause de lenteur sur les sites web. Chez Dwenola, on voit régulièrement des sites de PME où les images pèsent 3 à 5 Mo chacune, quand 100 à 200 Ko suffiraient. Corrigez cela, et la vitesse de votre site s'améliore dramatiquement.

Les formats d'images pour le web

Les formats modernes recommandés

Format	Extension	Avantages	Inconvénients	Idéal pour
WebP	.webp	Excellent rapport qualité/poids, transparence	Non supporté par très vieux navigateurs	Photos et illustrations (usage principal)
AVIF	.avif	Encore meilleur que WebP (-20 %)	Support navigateur en progression	Photos haute qualité
JPEG	.jpg	Universel, bon pour les photos	Pas de transparence, compression avec perte	Compatibilité maximale
PNG	.png	Transparence, sans perte	Fichiers lourds pour les photos	Logos, captures d'écran, icônes
SVG	.svg	Vectoriel, léger, scalable à l'infini	Pas adapté aux photos	Logos, icônes, illustrations simples

Notre recommandation en 2026

Utilisez WebP comme format principal. Tous les navigateurs modernes le supportent (Chrome, Firefox, Safari, Edge). Il offre le meilleur compromis entre qualité visuelle et poids de fichier. Pour les logos et les icônes, utilisez le SVG. Gardez le JPEG comme format de secours pour les rares cas de compatibilité.

Le format AVIF est encore meilleur en termes de compression, mais son support n'est pas encore universel en 2026. Si votre outil le propose, c'est un excellent choix avec un fallback WebP ou JPEG.

Les dimensions et la résolution

La règle d'or : ne jamais afficher plus grand que nécessaire

Si votre image s'affiche dans un espace de 800 pixels de large sur votre site, inutile de charger une image de 4 000 pixels. Le navigateur va la redimensionner, mais le visiteur aura quand même téléchargé les 4 000 pixels.

Les tailles recommandées par usage

Usage	Largeur recommandée	Taille cible
Image héros (pleine largeur)	1 920 px	150-300 Ko
Image dans le contenu	800-1 200 px	80-150 Ko
Miniature (thumbnail)	400-600 px	30-60 Ko
Logo	200-400 px	10-30 Ko
Icône	48-96 px	2-5 Ko
Image d'arrière-plan	1 920 px	200-400 Ko

Les écrans Retina

Les écrans haute résolution (Retina chez Apple, HiDPI chez les autres) affichent 2 à 3 pixels physiques pour 1 pixel CSS. Pour que vos images soient nettes sur ces écrans, prévoyez des images 2x : si l'affichage est de 400 pixels, fournissez une image de 800 pixels. Mais attention à ne pas en abuser : le poids augmente aussi.

La solution idéale est d'utiliser l'attribut srcset en HTML, qui permet au navigateur de choisir la bonne taille d'image selon l'écran :

<img 
  src="photo-800.webp" 
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Description de l'image"
>

La compression : le levier le plus puissant

La compression est ce qui fait la plus grande différence en termes de poids de fichier. Une photo de 3 Mo peut souvent être compressée à 150 Ko sans perte visible de qualité.

Compression avec perte vs sans perte

• Avec perte (lossy) : réduit le poids en supprimant des détails invisibles à l'oeil nu. Un JPEG ou WebP compressé à 80-85 % est visuellement identique à l'original pour un usage web.
• Sans perte (lossless) : réduit le poids sans altérer l'image. Moins efficace en termes de réduction, mais parfait pour les logos et les captures d'écran.

Les outils de compression gratuits

Outil	Type	Points forts
Squoosh (squoosh.app)	En ligne	Interface intuitive de Google, tous les formats
TinyPNG / TinyJPG	En ligne	Simple, par lots, API disponible
ShortPixel	Plugin WordPress	Compression automatique à l'upload
ImageOptim	Application Mac	Compression par glisser-déposer
EWWW Image Optimizer	Plugin WordPress	Compression et conversion automatiques

Le processus d'optimisation recommandé

1. Redimensionnez l'image à la taille d'affichage maximale (pas plus)
2. Convertissez au format WebP
3. Compressez à 80-85 % de qualité
4. Vérifiez visuellement que la qualité est acceptable
5. Vérifiez le poids : une image de contenu ne devrait pas dépasser 200 Ko

Le lazy loading : charger au bon moment

Le lazy loading (chargement différé) consiste à ne charger les images que lorsque le visiteur est sur le point de les voir, plutôt que de tout charger d'un coup au chargement de la page.

Pourquoi c'est important

Si votre page contient 20 images mais que le visiteur n'en voit que 3 sans scroller, pourquoi charger les 17 autres immédiatement ? Le lazy loading réduit le temps de chargement initial et économise la bande passante.

Comment l'implémenter

La méthode la plus simple en HTML natif :

<img src="photo.webp" alt="Description" loading="lazy">

L'attribut loading="lazy" est supporté par tous les navigateurs modernes. Pas besoin de JavaScript ni de plugin.

Important : ne mettez pas de lazy loading sur les images visibles sans scroller (above the fold). L'image de votre héros, votre logo et les images du premier écran doivent se charger immédiatement.

Le texte alternatif (attribut alt)

L'attribut alt est le texte qui décrit une image. Il est crucial pour trois raisons :

1. L'accessibilité

Les lecteurs d'écran (utilisés par les personnes malvoyantes) lisent le texte alternatif à haute voix. Sans attribut alt, l'image est invisible pour ces utilisateurs.

2. Le SEO

Google ne "voit" pas les images directement. Il utilise l'attribut alt pour comprendre le contenu de l'image et l'indexer dans Google Images.

3. Le fallback

Si l'image ne se charge pas (problème réseau, erreur), le texte alternatif s'affiche à la place. Le visiteur comprend quand même ce que l'image était censée montrer.

Comment rédiger un bon texte alternatif

Bien	Mal
"Équipe Dwenola en réunion dans les bureaux de Nantes"	"image1.jpg"
"Tableau comparatif des hébergeurs web"	"tableau"
"Capture d'écran de Google PageSpeed avec un score de 95"	"screenshot"
"" (vide, pour les images purement décoratives)	"logo bleu ciel rond cercle graphisme"

Les images purement décoratives (motifs, séparateurs, ornements) doivent avoir un attribut alt vide (alt=""), pas absent. Cela indique au lecteur d'écran de les ignorer.

Les vidéos et médias enrichis

Les vidéos sur votre site

Les vidéos sont un excellent moyen de capter l'attention, mais elles posent des défis techniques :

• Ne les hébergez pas vous-même : utilisez YouTube, Vimeo ou Wistia, puis intégrez-les via une iframe. Cela évite de surcharger votre serveur.
• Utilisez un placeholder : affichez une image miniature au lieu de la vidéo elle-même, et ne chargez le lecteur vidéo que quand le visiteur clique. Cela réduit considérablement le temps de chargement.
• Proposez des sous-titres : pour l'accessibilité et pour les visiteurs qui regardent sans le son.

Les fichiers PDF

Si vous proposez des PDF en téléchargement (brochures, catalogues, guides), optimisez-les aussi : compressez les images incluses, supprimez les métadonnées inutiles, et indiquez le poids du fichier à côté du lien de téléchargement.

Où trouver des images de qualité

Les banques d'images gratuites

Source	Points forts
Unsplash	Photos de haute qualité, grande variété
Pexels	Photos et vidéos gratuites
Pixabay	Large catalogue, illustrations incluses
Undraw	Illustrations vectorielles personnalisables

Attention aux photos stock génériques

Les photos de personnes en costume qui se serrent la main devant un graphique en hausse ne trompent personne. Privilégiez les photos authentiques de votre entreprise, de votre équipe, de vos locaux et de vos réalisations. Même prises avec un smartphone récent, les photos réelles inspirent plus confiance que les photos stock.

Besoin d'aide ? Chez Dwenola, on crée votre site pro dès 49€/mois. On en discute ?

Questions fréquentes

Le format WebP est-il compatible avec tous les navigateurs ?

En 2026, oui. Tous les navigateurs modernes (Chrome, Firefox, Safari, Edge, Opera) supportent WebP depuis au moins 2022. Les seuls navigateurs qui ne le supportent pas sont des versions très anciennes (Internet Explorer, Safari très ancien) qui représentent moins de 1 % du trafic. Vous pouvez utiliser WebP sereinement.

Combien d'images par page est recommandé ?

Il n'y a pas de limite stricte, mais chaque image doit avoir un rôle (illustrer, prouver, décorer structurellement). Une page de service avec 3 à 6 images bien choisies est plus efficace qu'une page avec 15 images génériques. Pour un article de blog, une image tous les 300 à 500 mots maintient l'engagement du lecteur.

Les captures d'écran doivent-elles être en PNG ou WebP ?

Le PNG est traditionnellement utilisé pour les captures d'écran car il offre une netteté parfaite (compression sans perte). Mais un WebP en qualité élevée (90-95 %) est visuellement identique pour un poids nettement inférieur. On recommande WebP pour les captures d'écran sur le web, et PNG uniquement si vous avez besoin d'un archivage pixel-perfect.

Comment optimiser les images sur WordPress ?

Installez un plugin d'optimisation comme ShortPixel, Imagify ou EWWW Image Optimizer. Ces plugins compressent automatiquement chaque image que vous uploadez, les convertissent en WebP, et génèrent les tailles responsives. C'est la solution la plus simple et la plus fiable pour un site WordPress.