Convertir une image pour un site web: formats recommandés

Pourquoi le format d'image impacte les performances web

Le temps de chargement d'une page est directement lié au volume de données à transférer. Une image non optimisée de 5 Mo prendra 10 secondes à charger sur une connexion 3G à 4 Mbps, tandis que la même image en WebP optimisé à 200 Ko se chargera en moins d'une demi-seconde.

Le Largest Contentful Paint (LCP), l'une des trois métriques Core Web Vitals, mesure le temps d'affichage du plus grand élément visible — souvent l'image principale de la page. Google considère un LCP de moins de 2,5 secondes comme « bon », et au-delà de 4 secondes comme « médiocre ».

Au-delà du SEO, l'impact business est direct. Amazon a calculé qu'un ralentissement de 100 millisecondes leur coûtait 1% de ventes. Pour les sites e-commerce, chaque seconde de chargement en moins peut augmenter les conversions de 2 à 7%.

La bonne nouvelle est que l'optimisation des images est l'un des leviers de performance les plus simples à actionner. Pas besoin de refondre l'architecture de votre site: convertir vos images dans les bons formats peut diviser leur poids par 5 à 10.

Les formats recommandés pour le web en 2024

Le WebP est désormais le format recommandé par défaut pour les images web. Développé par Google, il offre une compression 25 à 35% supérieure au JPG à qualité visuelle équivalente, supporte la transparence comme le PNG, et même l'animation comme le GIF. Avec plus de 95% de compatibilité navigateur, c'est un choix sûr.

Le JPG reste indispensable comme format de fallback pour les navigateurs anciens et pour certains cas d'usage (emails, documents partagés). Sa compatibilité à 100% en fait la valeur sûre quand le WebP n'est pas une option.

Le PNG conserve sa pertinence pour les images nécessitant une transparence parfaite (logos sur fonds variés) ou une reproduction pixel-perfect (captures d'écran, graphiques avec du texte). Le PNG-8 est particulièrement efficace pour les graphiques simples.

Le format AVIF, successeur du WebP avec une compression encore supérieure (50% de moins que JPG), gagne en adoption mais reste moins supporté (environ 75% des navigateurs). À surveiller pour l'avenir, mais pas encore recommandé comme format principal.

Le SVG est le format idéal pour les icônes, logos et illustrations vectorielles. Infiniment scalable sans perte de qualité, extrêmement léger, et animable avec CSS ou JavaScript.

Guide de choix selon le type de contenu

Pour les photographies (produits, portraits, paysages, bannières): utilisez le WebP avec compression lossy en priorité, ou le JPG en fallback. Qualité recommandée: 80-85%. Les photos contiennent naturellement du « bruit » visuel qui masque les artefacts de compression.

Pour les logos et icônes: privilégiez le SVG si disponible (vecteur), sinon le PNG-8 ou le WebP sans perte. Ces éléments nécessitent des bords nets et des couleurs précises que la compression JPG dégrade.

Pour les infographies et illustrations: le PNG-24 ou le WebP sans perte préservent la lisibilité du texte et la précision des lignes. Évitez le JPG qui crée des artefacts visibles autour des contrastes forts.

Pour les animations courtes: le WebP animé remplace avantageusement le GIF avec des fichiers 50% plus légers à qualité supérieure. Pour les animations longues ou complexes, envisagez la vidéo MP4.

Pour les images décoratives légères: le SVG ou le PNG-8 permettent des tailles de fichier très réduites (quelques Ko) parfaites pour les motifs de fond ou les éléments répétitifs.

Paramètres de compression optimaux

La qualité de compression est le paramètre le plus impactant sur le poids final. Pour le WebP et le JPG, une qualité de 80-85% offre le meilleur compromis: réduction de 70-80% par rapport à l'original, avec une différence visuelle imperceptible pour 99% des observateurs.

Pour les images critiques (héros, produits phares), vous pouvez monter à 90% pour préserver plus de détails fins. Pour les vignettes et images secondaires, descendez à 70-75% pour des fichiers encore plus légers.

La compression PNG fonctionne différemment: elle est sans perte mais peut être optimisée en réduisant le nombre de couleurs (PNG-8 vs PNG-24) ou en utilisant des outils de compression avancés qui réorganisent les données plus efficacement.

Le WebP offre deux modes: lossy (avec perte, comme JPG) et lossless (sans perte, comme PNG). Pour les photos, utilisez lossy. Pour les graphiques avec transparence ou texte, préférez lossless.

Dimensions et résolutions adaptatives

Servir une image de 4000 pixels de large pour un affichage de 400 pixels est un gaspillage majeur. Le redimensionnement avant publication peut réduire le poids d'un facteur 10 ou plus.

Pour les écrans standard, les dimensions recommandées sont: 1920px maximum pour les images pleine largeur, 1200px pour les images de contenu principal, 600px pour les colonnes secondaires, et 400px pour les vignettes.

Les écrans Retina (2x) affichent deux pixels physiques pour chaque pixel CSS. Pour un affichage net, servez des images avec le double de pixels de la taille d'affichage. Une image affichée à 400px CSS devrait avoir 800px réels.

La solution moderne est l'attribut srcset HTML qui permet au navigateur de choisir la taille d'image la plus adaptée à l'écran de l'utilisateur. Vous fournissez plusieurs versions (400px, 800px, 1200px, 2000px) et le navigateur sélectionne la plus appropriée.

Implémentation technique: la balise picture

La balise HTML <picture> permet de servir différents formats selon le navigateur, avec un fallback automatique. C'est la méthode recommandée pour utiliser le WebP tout en garantissant la compatibilité.

Exemple de structure: <picture><source srcset='image.webp' type='image/webp'><source srcset='image.jpg' type='image/jpeg'><img src='image.jpg' alt='Description'></picture>. Le navigateur choisit le premier format supporté.

Combinée avec srcset, cette approche permet de servir le format ET la taille optimaux: WebP 1200px pour Chrome desktop, JPG 600px pour Safari mobile, etc. C'est le summum de l'optimisation.

Les CMS modernes (WordPress, Shopify) génèrent automatiquement ces balises si vous utilisez leurs fonctionnalités d'images responsives. Vérifiez que cette option est activée dans vos paramètres.

Lazy loading et optimisation du chargement

Le lazy loading retarde le chargement des images situées hors de l'écran initial (below the fold). Cela accélère drastiquement le First Contentful Paint car le navigateur ne charge que ce qui est immédiatement visible.

L'implémentation est triviale en HTML moderne: ajoutez loading='lazy' à vos balises img. Le navigateur gère automatiquement le chargement différé. Évitez le lazy loading sur les images above the fold (héro, logo).

Pour le Largest Contentful Paint (LCP), l'image principale doit au contraire être chargée en priorité. Utilisez loading='eager' (défaut) et envisagez le preloading avec <link rel='preload' as='image' href='hero.webp'>.

Combinez le lazy loading avec les formats optimisés pour des gains cumulatifs. Une image WebP lazy-loaded combine le meilleur des deux mondes: fichier léger ET chargement intelligent.

How to do it in 3 steps

Frequently asked questions