Introduction
Votre site affiche de superbes PNG haute résolution, mais les temps de chargement sont lents et Google Pagespeed vous le fait payer. Le PNG préserve la qualité et la transparence, mais ses fichiers sont énormes pour le web. Le WebP, développé par Google, offre le meilleur des deux mondes : la transparence du PNG, la compression efficace du JPG, et des tailles encore plus petites que les deux. Dans ce guide, on vous explique pourquoi le WebP est un excellent choix pour le web, comment convertir vos PNG en WebP, et comment l'intégrer avec un fallback pour la compatibilité maximale.
Pourquoi ça arrive
Le PNG est sans perte, donc il préserve chaque pixel exact. C'est génial pour la qualité, mais ça donne des fichiers énormes pour les photos et les images complexes. Une illustration en PNG haute résolution peut facilement faire 5 ou 10 Mo, ce qui ralentit votre site et frustre les visiteurs. Le WebP, lui, utilise une compression moderne qui réduit la taille de 25 à 35 pour cent par rapport au JPG, et encore plus par rapport au PNG, tout en gérant la transparence. C'est pour ça que Google pousse le WebP sur le web. Le souci, c'est que le WebP n'est pas supporté par tous les navigateurs anciens, donc il faut un fallback pour la compatibilité maximale.
3 solutions
Solution 1 : Convertisseur en ligne PNG vers WebP. Un convertisseur en ligne permet de transformer vos PNG en WebP par lot directement dans le navigateur. Glissez vos PNG, choisissez WebP et téléchargez un zip. C'est la voie la plus rapide pour optimiser un site existant. Vous pouvez régler le niveau de compression pour trouver le bon équilibre entre taille et qualité.
Solution 2 : Plugin WordPress ou CDN automatique. Si vous utilisez WordPress, des plugins comme Smush ou ShortPixel convertissent automatiquement vos uploads PNG en WebP. Les CDN comme Cloudflare ou imgix font de même à la volée. C'est idéal pour un flux continu où chaque image est optimisée sans intervention manuelle.
Solution 3 : ImageMagick en ligne de commande. Pour les développeurs à l'aise avec le terminal, ImageMagick convertit des PNG en WebP en une commande : cwebp input.png -o output.webp -q 85. C'est imbattable pour les gros lots et les flux automatisés.
Guide étape par étape
Pour convertir vos PNG en WebP, ouvrez le convertisseur de piczen dans votre navigateur. Glissez vos fichiers PNG vers la page. Réglez la qualité WebP à 85, ce qui donne un excellent équilibre entre taille et qualité visible. Cliquez sur Convertir et attendez quelques minutes selon la taille du lot. Téléchargez le zip, décompressez-le et comparez les WebP avec les PNG originaux : la qualité doit être proche, mais la taille réduite de 50 à 80 pour cent. Pour intégrer le WebP sur votre site, utilisez un élément picture avec un fallback PNG : picture source srcset="image.webp" type="image/webp" img src="image.png" alt="..." . Les navigateurs modernes chargeront le WebP, les anciens tomberont sur le PNG. Testez sur plusieurs navigateurs pour vérifier le bon fonctionnement du fallback.
Avantages et inconvénients
Le WebP réduit la taille des images de 25 à 80 pour cent par rapport au PNG, ce qui accélère votre site et améliore votre score Google Pagespeed. Il gère la transparence comme le PNG, donc pas de compromis sur la qualité visuelle. La contrepartie, c'est que le WebP n'est pas supporté par les navigateurs très anciens, donc il faut un fallback PNG ou JPG dans un élément picture. Le bon réflexe, c'est de servir du WebP aux navigateurs modernes avec un fallback pour les anciens, ce qui vous donne le meilleur des deux mondes. Pour les sites WordPress, un plugin automatique est la solution la plus simple. Pour les sites statiques, la conversion manuelle avec un élément picture fonctionne parfaitement.