Optimiser ses images png pour le web
Introduction : dans ce tutoriel vous apprendrez comment réduire considérablement la taille de vos images png, vous permettant d'économiser de la place sur votre serveur, d'économiser la bande passante et le temps de chargement de vos pages.
Téléchargez l'image ci dessous, elle nous servira de test.
Optimiser ses png en utilisant png-8 couleurs indexées :
Ouvrez la avec photoshop, allez dans le menu
Fichier puis choississez
Enregistrer pour le Web et les périphériques.
Sélectionnez
PNG-8 et
Perception, votre image comporte des dégradés, sélectionnez
Diffusion.
PNG-8 est le format d'image png compressé sans pertes avec couleurs indexées.Perception est le mode de création de la table des couleurs indexées, les couleurs choisies sont celles qui sont le plus proches des différentes nuances présentes sur l'image originale.
Maintenant réglez le nombre de
Couleurs que comportera la table : commencez à 256 et
diminuez progressivement, arrêtez vous quand la qualité se dégrade, ici
64 couleurs semble un bon compromis.
Ici,
32 ne diminue presque pas la taille et on peut percevoir la différence de qualité.
Si nous enregistrons l'image de départ en png 32bits en png-8 couleurs indexées 64, nous économisons
30 % de sa taille.
| mode |
Image |
Taille |
économie |
- 32Bits
|
|
- 2.33 Ko
|
- 0%
|
- 256
|
 |
- 1.95 Ko
|
- 16%
|
- 128
|
 |
- 1.91 Ko
|
- 18%
|
- 64
|
 |
- 1.64 Ko
|
- 30%
|
- 32
|
 |
- 1.63 Ko
|
- 30%
|
- 16
|
 |
- 1.66 Ko
|
- 29%
|
- 8
|
 |
- 1.55 Ko
|
- 33%
|
- 4
|
 |
- 1.22 Ko
|
- 48%
|
- 2
|
 |
- 0.9 Ko
|
- 61%
|
Supprimer les méta-données grâce à PngOptimizer :
Télécharger PngOptimizer sur le site de l'auteur
Les fichiers photo enregistrent la photo elle même mais aussi de nombreuses autres informations qui prennent de la place, PngOptimizer vous permet de supprimer ces méta-données et d'économiser de la place.
Vous pouvez optimiser
un répertoire entier d'images simplement en les sélectionnant toutes et en les "tirant" vers PngOptimizer.
Avec l'image
64 couleurs de l'exemple du dessus on passe de
1.64 Ko à
1.60 Ko, c'est un mauvais exemple.
La taille des méta-données dépend du logiciel utilisé pour l'enregistrement.
Avec cette image on passe de
33.3 Ko à
20.5 Ko, soit
66% de l'original.
Voilà maintenant vous savez un peu mieux pourquoi les pages de gaminghacks se chargent aussi vite.
