Pourquoi votre PNG est trop lourd
Le format PNG est sans perte, ce qui explique pourquoi les fichiers sont énormes. Trois solutions, et ce que chacune vous coûte.
Votre PNG fait 8 Mo parce que le format PNG stocke chaque pixel de manière exacte, et une capture d'écran pleine page en résolution Retina contient réellement cette quantité d'informations. Le format ne rejette rien, ce qui est tout l'intérêt du PNG et aussi tout son problème.
Il existe 3 façons de résoudre ce problème, et chacune vous coûte quelque chose de différent. Réduire les dimensions coûte une résolution que vous n'utilisiez probablement pas. Réduire la profondeur des couleurs nuit à la fidélité des couleurs sur les photographies. Changer de format nuit à la compatibilité en dehors des navigateurs. Choisissez en fonction de l'usage de l'image.
Vos 3 options
- Réduire les dimensions. Gratuit, et généralement le gain le plus important. Personne n'a besoin d'une capture d'écran de 5000 pixels.
- Réduire la profondeur des couleurs. Fonctionne bien sur les graphiques plats, mal sur les photographies.
- Changer de format. Le WebP conserve la transparence et s'avère généralement 25 à 35 % plus petit.
Pourquoi les fichiers PNG grossissent si vite
La taille d'un fichier PNG est directement proportionnelle au nombre de pixels, car chaque pixel doit être décrit exactement. Doubler la largeur et la hauteur quadruple le nombre de pixels et quadruple environ la taille du fichier.
Une capture d'écran de 5120 par 2880 pixels provenant d'un écran haute résolution contient 14,7 millions de pixels. À raison de 3 octets par pixel avant compression, cela représente 44 Mo de données brutes, et la compression PNG réduit généralement cela à une valeur comprise entre 4 Mo et 12 Mo selon la quantité de couleurs unies que contient l'image. Un résultat de 8 Mo est donc normal et ne constitue pas un défaut.
Solution 1 : réduire les dimensions
Redimensionnez l'image à la taille maximale à laquelle elle sera affichée, ce qui élimine la majeure partie du poids du fichier avant même de tenter autre chose. C'est la solution qui offre le plus d'effet pour le coût le plus bas.
| Taille d'origine | Redimensionné à | Pixels supprimés | Fichier typique |
|---|---|---|---|
| 5120 x 2880 | 2560 x 1440 | 75 % | 8 Mo à 2 Mo |
| 3840 x 2160 | 1920 x 1080 | 75 % | 5 Mo à 1,3 Mo |
| 2560 x 1440 | 1280 x 720 | 75 % | 2 Mo à 500 Ko |
| Photo 4000 x 3000 | 1600 x 1200 | 84 % | 18 Mo à 2,9 Mo |
Mesurez la largeur maximale à laquelle l'image sera affichée sur la page, doublez-la pour les écrans haute densité, et redimensionnez à ce résultat. Une capture d'écran affichée sur 800 pixels de large a besoin de 1600 pixels et rien de plus.
Solution 2 : réduire la profondeur des couleurs
La conversion d'une couleur 24 bits en une palette 8 bits réduit un PNG de 50 à 70 %, et ne fonctionne que sur les images contenant un nombre limité de couleurs. Les captures d'écran d'interfaces, les diagrammes, les logos et les graphiques sont des candidats idéaux.
Cette technique stocke une palette allant jusqu'à 256 couleurs et y fait référence par pixel, plutôt que de stocker des valeurs de couleur complètes. Une capture d'écran d'interface utilisateur contient rarement plus de 256 couleurs distinctes, la réduction est donc invisible. Une photographie en contient des dizaines de milliers, cette même réduction produit donc des bandes visibles dans le ciel et sur la peau.
Solution 3 : changer de format
Convertissez en WebP pour un usage web, ce qui conserve la transparence et s'avère généralement 25 à 35 % plus petit que le PNG. Convertissez en JPG uniquement lorsque l'image est une photographie et n'a pas besoin de transparence.
- WebP sans perte pour les graphiques et les captures d'écran, ce qui conserve chaque pixel exact tout en économisant 20 à 30 %.
- WebP avec perte pour les fichiers PNG photographiques, où l'économie atteint 70 % ou plus.
- JPG pour les photographies sans transparence, pour lesquelles le PNG était un mauvais choix dès le départ.
- AVIF pour les grandes images photographiques, qui compresse encore plus fort sur les fichiers de plus de 100 Ko.
- Graphiques vectoriels pour les logos et les icônes, où un fichier SVG peut peser une fraction de n'importe quel format matriciel.
La cause la plus fréquente : une photo enregistrée en PNG
Une photographie enregistrée en PNG est 3 à 5 fois plus lourde que la même photographie en JPEG, sans différence visible. Cette seule erreur explique la plupart des fichiers PNG trop volumineux.
La compression PNG recherche les répétitions, et les photographies n'en contiennent presque aucune au niveau des pixels, car chaque pixel diffère légèrement de son voisin. Le format finit par stocker exactement des millions de valeurs presque uniques. Enregistrez les photographies en JPEG ou en WebP et réservez le PNG aux images qui ont réellement des aplats de couleur ou de la transparence.
Comment réduire un PNG sans perdre en qualité
Pour réduire un PNG tout en le conservant sans perte, suivez ces 5 étapes dans l'ordre.
- Recadrez pour éliminer les zones inutilisées, car les marges vides pèsent tout de même sur la taille du fichier.
- Redimensionnez à la plus grande taille d'affichage dont l'image aura besoin, doublée pour les écrans haute densité.
- Vérifiez si l'image a réellement besoin de transparence, car une image aplatie se compresse mieux.
- Réduisez la palette de couleurs si l'image est un graphique plutôt qu'une photographie.
- Convertissez en WebP sans perte, qui reste exact et s'avère généralement 20 à 30 % plus petit.
Les étapes 1 et 2 résolvent généralement le problème à elles seules. Les étapes restantes importent lorsqu'une image doit rester très grande, comme une capture d'écran pleine page dans une documentation.
Pourquoi les captures d'écran sont si volumineuses sur les écrans modernes
Les écrans haute densité capturent à 2 ou 3 fois la résolution logique, de sorte qu'une capture d'écran d'une fenêtre de 1200 pixels de large est enregistrée à 2400 ou 3600 pixels. Le fichier est beaucoup plus grand que la fenêtre ne paraissait l'être.
Cette résolution supplémentaire est utile lorsque la capture d'écran est visionnée sur un autre écran haute densité, et inutile dans le cas contraire. Pour les articles de documentation et d'assistance, le fait de redimensionner à la taille logique divise les dimensions par deux et réduit le fichier d'environ 75 % tout en restant identique pour la plupart des lecteurs.
Quand faut-il conserver le PNG de grande taille
Conservez le PNG en taille réelle lorsqu'il s'agit d'un fichier de travail, d'un élément destiné à l'impression ou d'une source qui sera modifiée ultérieurement. Les décisions de compression concernent les copies de diffusion plutôt que les originaux.
Les fichiers de conception, les logos originaux, les maquettes d'impression et les documents numérisés justifient tous leur taille. Stockez-les en pleine résolution et générez des copies plus petites pour chaque destination. L'erreur consiste à publier le fichier de travail plutôt que de le conserver, car un fichier de travail coûte de l'espace disque une seule fois, tandis qu'un fichier de travail publié consomme de la bande passante à chaque visite.
La transparence coûte plus cher qu'on ne le pense
Un canal de transparence ajoute une quatrième valeur à chaque pixel, ce qui augmente les données brutes d'environ 33 % avant compression. De nombreux fichiers PNG portent ce canal sans l'utiliser.
Les captures d'écran, les graphiques exportés et les images aplaties sur un fond blanc conservent fréquemment un canal alpha entièrement opaque partout. Le supprimer ne coûte rien visuellement et réduit le fichier de manière mesurable. Vérifiez si l'image a réellement besoin d'un fond transparent avant de supposer que ce canal est requis, car la plupart des images placées sur une page blanche n'en ont pas besoin.
La compression d'un PNG entraîne-t-elle une perte de qualité
L'optimisation PNG sans perte ne perd rien, tandis que la réduction des couleurs ou des dimensions modifie l'image de manière permanente. Ces 3 techniques sont fréquemment décrites ensemble mais ne sont pas équivalentes.
L'optimisation sans perte réorganise la manière dont le fichier stocke ses données et permet généralement d'économiser 5 à 20 % avec un résultat identique au pixel près. La réduction de la palette et le redimensionnement altèrent l'image elle-même, ce qui est acceptable pour les copies de diffusion et inacceptable pour les fichiers de travail. Conservez l'original chaque fois que la réduction n'est pas réversible.
Corriger tout un dossier de fichiers PNG trop volumineux
Traitez le dossier en une seule fois, car les fichiers PNG trop volumineux arrivent généralement par groupes provenant de la même source. Un ensemble de documents, une bibliothèque de captures d'écran ou un export d'un outil de conception ont tendance à partager le même problème d'un bout à l'autre.
Déposez jusqu'à 500 fichiers à la fois, ou glissez directement une archive ZIP, puis définissez les dimensions et le format une seule fois pour tout l'ensemble. Tout s'exécute dans votre navigateur sur votre propre processeur, de sorte que les captures d'écran internes, les conceptions de produits et la documentation client n'atteignent jamais un serveur. Rien n'est téléversé, il n'y a donc pas de politique de conservation à lire et rien ne reste après coup.
Corrigez la source du problème ainsi que les fichiers. Un outil de capture d'écran configuré pour enregistrer en PNG à la résolution Retina complète continuera à produire indéfiniment des fichiers de 8 Mo. La plupart des outils de capture permettent de définir un format par défaut et un facteur d'échelle, et modifier ces deux paramètres une seule fois évite d'avoir à traiter à nouveau les captures d'écran après chaque article d'assistance.