Optimisation d'image pour le Web : guide complet

Les chargements lents des pages tuent les conversions. Des études montrent que 40 % des utilisateurs abandonnent un site qui prend plus de 3 secondes. La plus grande cause ? Images non optimisées. Une seule photo de 5 Mo sur votre page d'accueil peut augmenter le temps de chargement, même avec des connexions rapides.

La liste de contrôle pour l'optimisation des images

1. Dimensions correctes : n'envoyez pas une image de 4 000 px là où vous affichez 800 px
2. Format approprié : WebP/AVIF moderne, JPG/PNG de secours
3. Compression adéquate : qualité de 75 à 85 % pour les photos, sans perte pour les graphiques
4. Livraison correcte – chargement paresseux, srcset réactif

Dimensions recommandées en 2026

• Images de héros : 1 920 × 1 080 (Full HD) ou 2 560 × 1 440 (2K) max
• Héros du billet de blog : 1 200 × 675 (16:9)
• Photos du produit : 1 500 × 1 500 avec prise en charge du zoom, affichage par défaut de 800 × 800
• Avatars : 256 × 256 (les miniatures seront réduites)
• Graphique ouvert (partage social) : 1 200 × 630
• Favicon : 32×32, 192×192, 512×512 PNG

Redimensionnez les photos à ces dimensions avec notre outil de redimensionnement d'image avant de les télécharger.

Formats : quand utiliser quoi

• WebP : valeur par défaut pour 95 % des images Web. 25 à 35 % plus petit que JPG pour la même qualité. Prise en charge du navigateur universel.
• AVIF : encore plus petit (50 % plus petit que JPG). À utiliser pour les images de héros. Les navigateurs les plus récents le prennent en charge.
• JPG : Photographies sans transparence. Excellente compatibilité.
• PNG : Logos, captures d'écran, tout ce qui est transparent. Sans perte.
• SVG : Graphiques vectoriels, icônes, illustrations simples. Petite taille de fichier, mise à l'échelle infinie.

Convertissez entre ces formats avec PDF7 Image Convert.

Compression : à quel point est-il trop agressif ?

Pour les photos : commencez à 85 % de qualité. Baissez à 75 % pour les pages critiques en termes de bande passante. En dessous de 70 %, les artefacts deviennent visibles. Utilisez notre outil de compression d'images pour trouver le bon équilibre.

Images responsives avec srcset

Ne diffusez pas d'image 2K sur un téléphone. Utilisez l'attribut srcset de HTML :

Le navigateur sélectionne la plus petite image qui convient. Vous aurez besoin de 3 tailles par image.

Chargement paresseux

Ajoutez loading="lazy" à toutes les images situées sous la ligne de flottaison. Les navigateurs modernes ne les chargent pas tant que l'utilisateur ne les fait pas défiler, économisant ainsi de la bande passante à chaque chargement de page.

La règle des 100 Ko

Visez des images individuelles de moins de 100 Ko. Les images de héros peuvent s’étendre jusqu’à 200 Ko. Si une seule photo fait plus de 500 Ko, vous avez fait une erreur : redimensionnez et recompressez.