Les images sont souvent responsables de plus de la moitié de la taille d'une page web. Des images non optimisées ralentissent votre site, augmentent votre taux de rebond et nuisent à votre SEO. Dans cet article, vous apprendrez à optimiser correctement les images pour une vitesse maximale sans perte de qualité.

Choisir le bon format d'image

WebP : le standard moderne

WebP est le format recommandé pour les images web en 2024. Il offre des fichiers 25-35% plus petits que JPEG pour la même qualité. WebP supporte la compression avec et sans perte ainsi que la transparence. Tous les navigateurs modernes supportent WebP, il n'y a donc plus de raison de ne pas l'utiliser.

JPEG : pour les photos sans transparence

JPEG reste adapté aux photos où la transparence n'est pas nécessaire et où vous devez supporter des navigateurs anciens. Utilisez un réglage de qualité entre 70-85% pour le meilleur équilibre entre taille et qualité. Des pourcentages plus élevés n'apportent pratiquement pas d'amélioration visible mais des fichiers plus gros.

PNG : uniquement pour la transparence

Les fichiers PNG sont souvent beaucoup plus gros que JPEG ou WebP. Utilisez PNG uniquement quand vous avez besoin de transparence et que WebP n'est pas une option. Pour les logos avec peu de couleurs, PNG8 peut être une option compacte.

SVG : pour les icônes et illustrations

Les images vectorielles s'adaptent parfaitement à n'importe quelle taille sans perte de qualité. Utilisez SVG pour les logos, icônes et illustrations simples. Les fichiers SVG sont souvent plus petits que les alternatives bitmap et peuvent être stylisés avec CSS.

Compresser les images

Outils en ligne

TinyPNG et Squoosh sont d'excellents outils gratuits pour compresser les images. TinyPNG fonctionne bien pour JPEG et PNG, tandis que Squoosh offre aussi la conversion WebP avec un aperçu en temps réel de la qualité. Uploadez vos images, choisissez vos paramètres et téléchargez le résultat optimisé.

Plugins WordPress

Smush est un plugin populaire qui compresse automatiquement les images lors de l'upload. Le plugin peut aussi optimiser les images existantes en masse et supporte la conversion WebP. Après l'installation, Smush fonctionne automatiquement en arrière-plan.

ShortPixel offre une compression plus agressive et un excellent support WebP. Le plugin fonctionne avec un système de crédits où vous pouvez optimiser gratuitement un nombre d'images par mois. Pour les sites plus grands, un plan payant est disponible.

Imagify des créateurs de WP Rocket s'intègre parfaitement avec ce plugin de cache. Il offre trois niveaux de compression et une conversion WebP automatique avec fallback pour les navigateurs anciens.

Définir correctement les dimensions

Ne chargez jamais une image de 4000 pixels de large si elle n'est affichée qu'à 800 pixels. Cela gaspille de la bande passante et ralentit inutilement votre page. Redimensionnez les images à la taille d'affichage maximale avant de les uploader.

Pour les sites responsives, utilisez l'attribut srcset pour proposer différents formats. Le navigateur choisit automatiquement la bonne taille pour l'écran du visiteur. WordPress génère automatiquement plusieurs formats lors de l'upload.

Implémenter le lazy loading

Le lazy loading fait que les images ne se chargent que quand elles apparaissent à l'écran. Cela accélère considérablement le chargement initial de la page, surtout sur les pages avec beaucoup d'images.

Lazy loading natif

Les navigateurs modernes supportent le lazy loading via l'attribut loading. Ajoutez loading equals lazy à vos éléments img. WordPress le fait automatiquement depuis la version 5.5. Le lazy loading natif fonctionne sans JavaScript et est la solution la plus simple.

Via les plugins de cache

LiteSpeed Cache offre des options étendues de lazy loading. Vous pouvez définir quelles images doivent ou non être en lazy loading, configurer des exclusions pour les images importantes au-dessus du pli et afficher des images placeholder pendant le chargement.

Images au-dessus du pli

Les images directement visibles sans défilement ne doivent justement pas être en lazy loading. Ces images, comme votre hero-image ou logo, doivent se charger le plus vite possible. Utilisez preload pour les images critiques et assurez-vous qu'elles sont optimisées pour de bons scores LCP.

Servir des images responsives

Avec l'élément picture, vous pouvez servir différents formats et tailles d'images selon la taille de l'écran et le support du navigateur. Servez du WebP aux navigateurs qui le supportent avec un fallback JPEG pour les autres. Les thèmes WordPress et plugins comme Elementor peuvent gérer cela automatiquement.

CDN pour les images

Un Content Delivery Network sert les images depuis des serveurs proches de vos visiteurs, ce qui réduit les temps de chargement. Cloudflare offre une fonctionnalité CDN gratuite et peut automatiquement optimiser les images et les convertir en WebP. Configurez un CDN pour les meilleures performances.

Checklist pratique

Utilisez WebP comme format principal avec un fallback JPEG. Compressez toutes les images avant l'upload ou utilisez un plugin automatique. Redimensionnez les images à la taille d'affichage maximale. Implémentez le lazy loading pour les images sous le pli. Préchargez les images critiques au-dessus du pli. Envisagez un CDN pour une audience internationale.

Avec des images optimisées et un hébergement LiteSpeed rapide de Theory7, votre site se charge à toute vitesse. Contactez notre support si vous avez besoin d'aide pour optimiser votre site.