Optimiser les images et les assets de son site | Dwenola Academy

Les images représentent en moyenne 50 % du poids total d'une page web. Optimiser vos images est donc le levier le plus efficace pour accélérer votre site internet. Avec les bonnes techniques (format WebP, compression, lazy loading), vous pouvez diviser le poids de vos pages par 3 ou 4 sans aucune perte de qualité visible, et améliorer considérablement votre référencement.

Pourquoi les images sont le problème numéro un

Quand on audite un site de PME chez Dwenola, le constat est presque toujours le même : des images beaucoup trop lourdes. Un photographe envoie des photos en 4000x3000 pixels à 5 Mo pièce. Le propriétaire du site les met en ligne telles quelles. Résultat : une page d'accueil qui pèse 15 Mo et met 8 secondes à charger sur mobile.

Le problème, c'est que le navigateur doit télécharger chaque image avant de l'afficher. Plus les images sont lourdes, plus le chargement est long. Et comme on l'a vu dans la lecon sur la vitesse de chargement, chaque seconde de retard coûte des visiteurs et des clients.

L'impact chiffré

Situation	Poids moyen par page	Temps de chargement (4G)
Images non optimisées	8-15 Mo	6-12 secondes
Images compressées en JPEG	2-4 Mo	3-5 secondes
Images en WebP + lazy loading	500 Ko-1,5 Mo	1-2 secondes

La différence est spectaculaire. Et la bonne nouvelle, c'est que les optimisations d'images sont parmi les plus simples à mettre en place.

Les formats d'images : lequel choisir

JPEG : le format historique

Le JPEG reste un format correct pour les photographies. Il offre une bonne compression avec une qualité acceptable. Mais en 2026, il existe de meilleures options.

Avantage : compatible avec tous les navigateurs sans exception
Inconvénient : compression moins efficace que les formats modernes

PNG : pour la transparence

Le PNG est utile quand vous avez besoin de transparence (logos, icônes sur fond coloré). Mais il produit des fichiers beaucoup plus lourds que le JPEG pour les photographies.

Avantage : supporte la transparence, pas de perte de qualité
Inconvénient : fichiers très lourds pour les photos

WebP : le format recommandé

Le WebP, développé par Google, offre une compression 25 à 35 % meilleure que le JPEG à qualité équivalente. Il supporte aussi la transparence. En 2026, il est compatible avec tous les navigateurs modernes (Chrome, Firefox, Safari, Edge).

Avantage : meilleure compression, transparence, animation
Inconvénient : aucun en 2026, la compatibilité est universelle

AVIF : le futur (déjà là)

L'AVIF offre une compression encore meilleure que le WebP (30 à 50 % de plus). La compatibilité progresse rapidement, mais certains navigateurs anciens ne le supportent pas encore.

Avantage : compression exceptionnelle
Inconvénient : compatibilité encore incomplète

Format	Poids moyen (photo 1200px)	Transparence	Compatibilité 2026
JPEG	250 Ko	Non	100 %
PNG	800 Ko	Oui	100 %
WebP	170 Ko	Oui	98 %
AVIF	120 Ko	Oui	92 %

Notre recommandation chez Dwenola : utilisez le WebP comme format par défaut. C'est le meilleur rapport qualité-compression-compatibilité.

Comment compresser vos images efficacement

Avant la mise en ligne

La compression doit idéalement se faire avant de mettre les images sur votre site. Voici les outils gratuits que l'on recommande :

Squoosh (squoosh.app) : outil en ligne de Google, très visuel. Vous voyez la différence avant/après en temps réel.
TinyPNG (tinypng.com) : glissez-déposez vos images, elles sont compressées automatiquement. Fonctionne aussi pour le WebP.
Sharp : pour les développeurs, cette bibliothèque Node.js automatise la conversion et la compression.

Les règles d'or de la compression

Redimensionnez d'abord : une image de 4000 pixels de large pour un espace de 800 pixels, c'est du gaspillage. Redimensionnez à la taille d'affichage réelle (en tenant compte du Retina, donc 2x la taille affichée).
Compressez ensuite : une qualité de 75-80 % en WebP est indiscernable de l'original pour l'oeil humain sur un écran.
Ne compressez pas deux fois : compresser une image déjà compressée dégrade la qualité sans réduire significativement le poids.

Compression automatique sur WordPress

Si votre site tourne sur WordPress, plusieurs plugins peuvent automatiser la compression :

ShortPixel : compresse automatiquement chaque image que vous mettez en ligne, avec conversion WebP intégrée
Imagify : même principe, avec un mode "agressif" très efficace
EWWW Image Optimizer : fonctionne aussi sur le serveur directement

Le lazy loading : ne charger que ce qui est visible

Le lazy loading (chargement différé) est une technique qui consiste à ne charger les images que lorsqu'elles sont sur le point d'apparaître à l'écran. Si votre page contient 20 images mais que le visiteur n'en voit que 3 au premier coup d'oeil, pourquoi charger les 17 autres immédiatement ?

Comment ça marche

Le navigateur charge d'abord les images visibles dans la fenêtre du navigateur. Les images situées plus bas dans la page ne sont chargées que lorsque le visiteur commence à faire défiler.

Mise en place

En HTML moderne, c'est très simple. Il suffit d'ajouter l'attribut loading="lazy" à vos balises image :

<img src="photo.webp" loading="lazy" width="800" height="600" alt="Description">

Attention : ne mettez pas le lazy loading sur les images au-dessus de la ligne de flottaison (celles visibles sans scroller). Ces images doivent se charger en priorité pour un bon score LCP.

Sur WordPress, le lazy loading est activé nativement depuis la version 5.5. Vérifiez simplement que votre thème ne le désactive pas.

Les images responsives : la bonne taille pour chaque écran

Un visiteur sur smartphone n'a pas besoin de la même image qu'un visiteur sur écran 27 pouces. Les images responsives permettent de servir différentes tailles selon l'appareil.

L'attribut srcset

<img
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  src="photo-800.webp"
  alt="Description"
>

Le navigateur choisit automatiquement la version la plus adaptée. Un smartphone chargera l'image de 400 pixels (environ 40 Ko) au lieu de celle de 1200 pixels (170 Ko).

Automatiser avec WordPress

Des plugins comme ShortPixel Adaptive Images ou le module natif de WordPress génèrent automatiquement plusieurs tailles pour chaque image que vous mettez en ligne.

Optimiser les autres assets

Les images ne sont pas les seuls fichiers à optimiser. Voici les autres assets à surveiller :

Les polices de caractères

Limitez-vous à 2 polices maximum (une pour les titres, une pour le texte)
Utilisez le format WOFF2 (30 % plus léger que WOFF)
Préchargez les polices critiques avec <link rel="preload">
Utilisez font-display: swap pour éviter le texte invisible pendant le chargement

Les fichiers CSS et JavaScript

Minifiez vos fichiers : supprimez les espaces, commentaires et caractères inutiles
Combinez les petits fichiers en un seul pour réduire les requêtes HTTP
Différez le chargement des scripts non essentiels avec defer ou async

Les vidéos

N'hébergez jamais les vidéos directement sur votre serveur. Utilisez YouTube ou Vimeo et intégrez-les en iframe
Utilisez une image de prévisualisation (thumbnail) et ne chargez la vidéo qu'au clic
Si vous devez héberger une vidéo, utilisez le format MP4 avec le codec H.265

Un plan d'action en 5 étapes

Voici comment procéder pour optimiser les images de votre site existant :

Auditez : utilisez PageSpeed Insights pour identifier les images problématiques
Convertissez : passez toutes vos images en WebP avec Squoosh ou un plugin WordPress
Redimensionnez : aucune image ne devrait dépasser 1600 pixels de large (sauf besoin spécifique)
Activez le lazy loading : vérifiez qu'il est bien en place sur toutes les images sous la ligne de flottaison
Testez : relancez PageSpeed Insights et comparez les résultats

Chez Dwenola, cette optimisation fait partie de notre processus standard de création de site. Chaque image est automatiquement convertie, compressée et servie dans le format optimal.

Questions fréquentes

Est-ce que la compression dégrade la qualité de mes photos ?

Avec une compression bien calibrée (75-80 % en WebP), la différence est imperceptible à l'oeil nu sur un écran. Seul un zoom extrême sur l'image brute révélerait une légère différence. Pour un site internet, c'est un compromis parfaitement acceptable.

Je n'ai pas de compétences techniques, comment faire ?

Si vous êtes sur WordPress, installez un plugin comme ShortPixel (gratuit jusqu'à 100 images par mois). Il fait tout automatiquement : compression, conversion WebP, redimensionnement. Sinon, faites appel à un professionnel pour une optimisation ponctuelle.

Le format SVG est-il utile pour mon site ?

Le SVG est idéal pour les logos, icônes et illustrations simples. C'est un format vectoriel qui reste net quelle que soit la taille d'affichage, et il est très léger. En revanche, il n'est pas adapté aux photographies. Utilisez le SVG pour vos éléments graphiques et le WebP pour vos photos.

Combien de temps faut-il pour optimiser toutes les images d'un site ?

Pour un site de 50 pages avec une centaine d'images, comptez 2 à 4 heures de travail avec les bons outils. Si vous utilisez un plugin WordPress, la compression automatique se fait en quelques minutes. L'important est de mettre en place un processus pour que chaque nouvelle image soit optimisée dès sa mise en ligne.

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