Quel format donne le fichier le plus léger pour une photo, une capture ou un logo transparent ? Comparez six exports mesurés, puis reprenez les mêmes sources dans Photoshop.
À retenir
- Comparez des exports de mêmes dimensions, issus du même fichier de référence.
- Pour une photo, confrontez le JPEG et le WebP avec perte à partir d’un critère commun.
- Pour une capture, comparez le PNG et le WebP sans perte. Vérifiez les petits caractères.
- Pour un logo transparent, contrôlez le canal alpha et les contours sur deux fonds.
- Relevez le poids du fichier enregistré en octets.
- Conservez les fichiers sources et les réglages pour répéter l’essai.
Quels visuels préparer pour comparer les formats ?
Le protocole couvre trois cas courants. Une photo teste la compression avec perte. Une capture permet de contrôler la fidélité des petits caractères. Un logo transparent permet de comparer les niveaux d’opacité et les contours. Chaque paire d’exports part du même fichier, avec les mêmes dimensions.
- Photo.
Fleur avec arrière-plan flou, 600 × 400 pixels. La source du test est une copie redimensionnée de flower.jpg, distribuée par scikit-learn. - Capture.
Panneau de réglages simulé, 600 × 320 pixels, avec du texte fin sur fond clair. - Logo.
Symbole de 320 × 200 pixels, avec des zones opaques, transparentes et semi-transparentes.
Le test a été réalisé avec Pillow 13.0.0* et libwebp 1.6.0*, sans ajout de profil ni de métadonnées. Le JPEG de la photo fixe la référence à une qualité de 80. Le script teste les valeurs WebP de 0 à 100 et retient le score numérique le plus proche. Les deux autres comparaisons portent sur des exports sans perte. Le dossier d’essai rassemble les sources, les sorties, les tailles en octets et le script.
*Pillow 13.0.0 est la version de la bibliothèque Python qui a servi à lire les images, à les enregistrer dans différents formats et à comparer leurs pixels.
*Libwebp 1.6.0 est la version du moteur dont Pillow s’est servi pour encoder et décoder les fichiers WebP.
Quels écarts de poids et de fidélité observe-t-on ?
Le poids indiqué correspond à la taille exacte de chaque fichier enregistré. Pour la photo, le score mesure l’écart entre les pixels de la référence et ceux de chaque export décodé. Pour la capture et le logo, le contrôle vérifie si les valeurs des pixels restent identiques.
| Visuel | JPEG ou PNG | WebP | Gain de poids |
|---|---|---|---|
| Photo 600 × 400 px |
JPEG, 26 943 octets | 14 644 octets | 45,6 % |
| Capture 600 × 320 px |
PNG, 12 642 octets | 5 266 octets | 58,3 % |
| Logo 320 × 200 px |
PNG, 8 351 octets | 4 462 octets | 46,6 % |
Le gain compare le WebP au JPEG pour la photo et au PNG pour la capture et le logo.
Photo : un poids inférieur avec un score proche
Le JPEG à qualité 80 obtient 35,376 dB. Le WebP à qualité 76 obtient 35,430 dB. Le score, appelé PSNR, mesure l’écart pixel par pixel. La différence de 0,054 dB rapproche les deux fichiers selon ce critère. À poids égal ou à score proche, les défauts visibles peuvent différer. Examinez les pétales, les zones floues et les transitions de couleur.
Capture : des pixels identiques
Le PNG et le WebP sans perte restituent les mêmes valeurs de pixels que la capture de référence. Le WebP pèse 7 376 octets de moins. Dans cet essai, la différence de poids ne s’accompagne d’aucune modification du texte décodé.
Logo : des niveaux de transparence identiques
Le PNG et le WebP sans perte conservent les mêmes valeurs de couleur et d’opacité après décodage. Le WebP pèse 3 889 octets de moins. Vérifiez le rendu dans votre navigateur sur fond clair et sur fond foncé, surtout autour des pixels semi-transparents.
Calcul. Le gain du WebP se calcule par rapport au JPEG pour la photo, et au PNG pour les autres visuels. Soustrayez le poids du WebP au poids de référence. Divisez par ce poids de référence, puis multipliez par 100.
Comment refaire le test dans Photoshop ?
Ouvrez les trois fichiers de référence et préparez les exports par paire. Gardez les mêmes dimensions, le même profil de sortie et la même politique de métadonnées. Les réglages de qualité varient selon la commande et l’encodeur. Notez les paramètres affichés par votre version de Photoshop.
- Photo en JPEG.
Ouvrez photo.png. Choisissez Fichier > Exportation > Exporter sous, puis JPEG. Fixez une qualité de départ. Relevez le réglage et les dimensions. - Photo en WebP.
Sur le même document en RVB 8 bits par couche, ouvrez Fichier > Enregistrer une copie. Choisissez WebP avec perte. Enregistrez trois sorties à des qualités différentes. Comparez-les au JPEG à la taille d’affichage. - Capture en PNG et WebP.
Ouvrez capture.png. Exportez un PNG en couleurs complètes via Exporter sous. Désactivez l’option de fichier réduit à 8 bits si elle apparaît. Enregistrez aussi une copie en WebP sans perte. - Logo transparent.
Ouvrez logo.png et gardez le fond transparent. Exportez un PNG avec transparence. Enregistrez aussi une copie en WebP sans perte. Contrôlez les deux fichiers sur les mêmes fonds. - Mesures.
Rouvrez les fichiers. Notez la version de Photoshop, la commande, les dimensions, le profil, le poids en octets et les défauts visibles. Consignez les valeurs dans une copie du fichier mesures.csv.
Pour retrouver les commandes et les usages de chaque format, consultez le guide Choisir le format d’image web dans Photoshop.
Exportation web Photoshop : choisir et optimiser les formats WebP, JPEG, PNG et GIF
Quel fichier retenir pour la publication ?
Le format retenu dépend du rendu attendu et des contraintes de diffusion. Vérifiez la lisibilité, les contours et la taille de l’image dans son emplacement final. Comparez ensuite le poids des fichiers qui satisfont ces critères. La décision s’appuie sur le visuel publié et ses réglages.
- Photo.
Comparez le JPEG au WebP avec perte. Gardez le plus léger parmi les fichiers dont les détails et dégradés conviennent. - Capture.
Comparez PNG et WebP sans perte. Vérifiez les petits caractères à la taille affichée dans l’article. - Logo.
Comparez les contours et les transparences. Gardez le format accepté par votre support et contrôlez le fichier affiché après publication.
Questions fréquentes sur le comparatif WebP, JPEG et PNG
Ces questions couvrent les écarts entre les réglages, la mesure du poids et l’interprétation des résultats. Elles permettent de refaire le test sur d’autres images sans confondre la fidélité des pixels, le rendu perçu dans le navigateur et les contraintes de diffusion propres à chaque site.
Les qualités JPEG et WebP se comparent-elles directement ?
Chaque curseur correspond aux réglages de son encodeur. Deux valeurs identiques peuvent produire des poids et des défauts différents. Pour comparer, gardez les dimensions fixes. Examinez le rendu à la taille d’affichage et notez les réglages retenus. Un score de fidélité peut compléter cet examen.
Que mesure le PSNR ?
Le PSNR exprime en décibels l’écart numérique entre les pixels d’une référence et ceux d’un fichier décodé. Un score plus élevé indique ici un écart quadratique plus faible. Il décrit une proximité numérique. Examinez aussi les zones sensibles, car des défauts différents peuvent produire des scores proches.
Les résultats ont-ils été obtenus dans Photoshop ?
Les six sorties chiffrées proviennent de Pillow, avec les réglages fournis dans le dossier d’essai. La procédure Photoshop permet de refaire le test sur les mêmes fichiers de référence. Comparez alors les valeurs obtenues avec votre version du logiciel et les options qu’elle propose.
Le WebP est-il toujours le plus léger ?
Le WebP est le plus léger dans les trois paires de cet essai. Le poids varie selon le contenu, les dimensions et la compression. Reprenez le même protocole sur votre propre image. Pour un visuel transparent, comparez des fichiers qui conservent tous les niveaux d’opacité nécessaires.
Comment vérifier qu’un export sans perte conserve les pixels ?
Comparez les pixels décodés à ceux du fichier de référence, à dimensions et modes identiques. Sur un logo transparent, comparez aussi le canal alpha. Si une conversion de profil ou un redimensionnement intervient avant l’export, prenez comme référence le fichier obtenu après cette préparation.
Pourquoi relever le poids en octets ?
L’octet donne la taille exacte du fichier. Les valeurs arrondies en kilo-octets peuvent masquer de petits écarts. Relevez la taille du fichier enregistré plutôt que l’espace occupé sur le disque. Indiquez le fichier de référence avant de calculer le gain exprimé en pourcentage.
Pourquoi partir d’une copie de référence commune ?
Une référence commune isole les différences introduites par les exports. Si chaque fichier part d’un recadrage ou d’une conversion différente, le poids et le rendu peuvent varier pour plusieurs raisons. Préparez d’abord le visuel, puis comparez les formats à dimensions, profil et conditions équivalents.
Comment vérifier le rendu d’un logo transparent ?
Placez le logo sur un fond clair puis sur un fond foncé. Regardez les bords, les ombres et les transitions semi-transparentes à la taille prévue dans la page. Si le site transforme les images après l’import, vérifiez aussi le fichier réellement affiché par le navigateur.
Glossaire
Le glossaire distingue les formats, les mesures et les réglages qui influencent la comparaison. Les sigles sont développés dans leur définition. Les valeurs de couleur et d’opacité servent à vérifier les pixels. Le poids en octets permet de comparer les fichiers et de calculer les gains.
JPEG
Joint Photographic Experts Group, nom du groupe qui a défini la norme. Format courant pour les photos, avec compression avec perte.
PNG
Portable Network Graphics. Format sans perte qui peut conserver plusieurs niveaux d’opacité.
WebP
Nom donné par Google à un format d’image web qui propose deux modes de compression et gère la transparence.
RVB
Rouge, vert, bleu. Les trois composantes qui décrivent la couleur du pixel dans ce modèle.
RVBA
Rouge, vert, bleu, alpha. Les trois composantes de couleur et une composante d’opacité.
PSNR
Peak Signal-to-Noise Ratio, rapport signal sur bruit de crête. Mesure numérique de fidélité exprimée en décibels.
dB
Décibel. Unité logarithmique employée ici pour exprimer le PSNR.
Canal alpha
Composante qui indique le niveau d’opacité d’un pixel.
Encodage avec perte
Compression qui écarte certaines informations de l’image pour réduire le poids du fichier.
Encodage sans perte
Compression qui permet de retrouver les données encodées à l’identique.
Sources
Adobe documente les commandes à reprendre dans Photoshop. La documentation Pillow précise les paramètres du test chiffré. Google décrit les propriétés du WebP. La photographie d’essai provient des exemples de scikit-learn. La capture et le logo sont des visuels de test préparés pour ce comparatif.
