optimiser les images web

optimiser les images pour le web

GIF, PNG ou JPG: vous hésitez sur le format? vous souhaitez optimiser l'intégration, la qualité ou la performance de votre site? cet article va vous permettre d'optimiser vos images pour le web en suivant quelques principes simples

formats

GIF, PNG et JPG: comment les utiliser
formatusage
GIF animations (définition faible) - sinon, convertir en PNG
png logos, icônes, captures d'écran, images transparentes, dégradés (vrais)
jpg images photo-réalistes, photographies, icônes sans transparence (couleurs élevées)
WebP convient sur la plupart des images, méthode avec pertes très efficace

optimisation de GIF

gifsicle --batch -o3 --no-comments --no-names --crop-transparency fichier.png

l'outil Gifsicle permet d'optimiser avec ou sans pertes un fichier GIF. il est également possible d'effectuer une optimisation avec pertes en rajoutant la valeur --colors=128, où 128 est le nombre de couleurs en sortie; il suffit ensuite de changer le nombre pour diminuer la qualité et le poids de l'image

optimisation d'un fichier GIF
animation GIFanimation GIF optimisée
animation GIF de chargement - 29 couleurs animation GIF de chargement - 8 couleurs
29 couleurs 8 couleurs
10,5 ko 4,6 ko

n'utilisez pas GIF, remplacez le par PNG

si l'image n'est pas une animation, il vaut mieux utiliser PNG. si un de vos fichiers GIF est plus léger que PNG, c'est sans aucun doute un comparatif inégal entre un PNG en couleurs vraies et un GIF en mode palette. pour vous en assurer, convertissez vos GIF, mais utilisez un optimiseur PNG sur les PNG obtenus

comparaison entre un GIF et un PNG
format GIFformat PNG
cloche orange GIF cloche orange PNG
33,5 ko 18,6 ko

optimisation de PNG

pingo fichier.png

l'outil pingo permet d'optimiser avec ou sans pertes un fichier PNG. cet outil effectue de nombreuses réductions, et peut également effectuer des optimisations avec pertes

optimisation de JPG

jpegtran -optimize -progressive original.jpg optimise.jpg

l'outil jpegtran peut effectuer une optimisation sans pertes, tandis que l'outil jpegoptim peut réaliser des opérations avec pertes. l'optimisation JPG peut être plus poussée avec le script JPGrescan, ou encore avec le projet mozjpeg. pingo peut également réaliser les mêmes opérations

conversion de JPG vers PNG: prévoyez des retouches

les conversions automatisées entre format sont possibles depuis GIF (non animé) vers PNG. dans les autres cas, il est nécessaire de faire retouche manuelle en sortie pour obtenir un meilleur rapport qualité / poids. la conversion entre JPG vers PNG est plus difficile, mais il est parfois possible de retravailler les images pour diminuer les artefacts

une capture d'écran en JPG est souvent de mauvaise qualité, car JPG n'est pas adapté pour ce style d'images. depuis ce résultat, il est déconseillé de convertir directement en PNG, car les nombreux artefacts ont générés une structuration complexe avec en prime une multiplication des couleurs. dans ce genre de cas (et pour optimiser vos images en général), vous pouvez utiliser Color quantizer

utiliser Color quantizer

Color quantizer

Color quantizer peut appliquer un filtre performant pour diminuer les artefacts, puis réduire considérablement le nombre de couleurs afin d'obtenir une structure d'image plus simple. en modifiant les couleurs restantes pour forcer le contraste, puis en choisissant l'exportation en PNG, voici le résultat qu'il est possible d'obtenir:

comparatif entre JPG et PNG
format JPGformat PNG
windows xp professionnal setup - JPG windows xp professionnal setup - PNG
20,8 ko 2,04 ko

ne diminuez pas la définition dans HTML

pour JPG, donner toujours les valeurs height et width correspondant à la définition de l'image: ne diminuez pas ces valeurs en pensant diminuer le poids, cela n'est pas le cas: il faut diminuer physiquement la définition avec un logiciel d'édition d'image. il faut donc redimensionner l'image avant de l'inclure via html

réduire la définition JPG
réduction dans htmlréduction via logiciel
deux stylos avec mines - définition 1500 deux stylos avec mines - définition 400
122 ko 14,8 ko

ne redimensionnez pas vos images avec PNG

lorsque vous intégrez une image PNG, annoncez les valeurs width et height de l'image, et ne redimensionnez pas l'image à l'aide d'un éditeur pour diminuer la définition. en effet, cette procédure rend la structure très complexe, et oblige généralement le logiciel à enregistrer en couleurs vraies: le PNG sera lourd, et difficile à optimiser. utilisez plutôt un découpage ciblé

dimensionner un PNG
dimensionnénon dimensionné
boîte de dialogue - erreur windows - non dimensionné boîte de dialogue - erreur windows - dimensionné
12,6 ko 4,26 ko

dimensionner vos images pour les mobiles

si vous avez prévu une version de votre site pour les mobiles, vous pouvez vous inspirer de la solution ci-dessus pour les appareils de plus faibles définitions. il ne s'agit pas de redimensionner vos images par un logiciel en diminuant la définition, mais d'effectuer un ciblage particulier des points importants de l'image

image non dimensionnée pour les mobiles

image non dimensionnée pour les mobiles peu lisible

cette image n'est pas dimensionnée pour les mobiles: lorsque vous explorez le site avec un appareil mobile, l'image va se réduire automatiquement pour occuper 100% de la largeur disponible. cela est rendu possible grâce aux propriétés css suivantes:

@media screen and (max-width:640px) {
img {
width : 100%;
height : auto;
}
}

image dimensionnée pour les mobiles

image non dimensionnée pour les mobiles - avec changement media queries mieux lisible

sur des appareils à définition élevées, vous ne verrez aucune différences entre ces images. toutefois, avec un navigateur mobile, c'est une autre image qui sera affichée (à conditions que le définition soit inférieure ou égale à 480px.) cela est rendu possible grâce à l'utilisation de <picture>:

<picture>
<source media="(max-width: 480px)" srcset="image-mobile.png">
<img alt="description" src="image-normale.png">
</picture>

au délà de cette simple modification, il est possible de remettre en question d'autres paramètres pour parfaire l'optimisation:

  • le format de l'image de remplacement: PNG, JPG, WebP.
  • en diminuant la définition, il est possible de diminuer fortement le nombre de couleurs

etirez les dégradés

si vous projetez de faire un arrière-plan en dégradé, utilisez le css. si vous souhaitez utiliser une image pour accroître la compatibilité sur des navigateurs anciens, vous pouvez générer une image de faible définition en utilisant la commande suivante de ImageMagick:

convert -size 1x256 gradient:#fff-#eee gradient.png

cela vous permet de générer un vrai dégradé, qui peut être très nettement optimisé par pingo (ou équivalent): ce type de fichier n'occupe généralement pas plus de 100 octets lorsqu'il est créé convenablement. il peut être inclut et répété via css:

body {
background:#eee url(gradient.png) repeat-y;
}

diminuez la qualité

les visiteurs ne sont pas particulièrement sensibles à une dégradation visuelle contrôlée; la raison étant simple, la focalisation de l'oeil se fait à un endroit précis d'une image. pour optimiser vos images web, il faut avant tout admettre un compromis entre la qualité et le poids. plus la définition de l'image est faible, plus il est facile de diminuer la qualité visuelle de l'image, soit en diminuant le facteur qualité pour JPG, soit en diminuant considérablement le nombre de couleurs pour PNG

conversion en PNG-8

si vous utilisez PNG, tentez une conversion systématique en PNG-8 sur une image de test, mais pas avec n'importe quel outil: vous obtiendrez les meilleurs résultats avec fast image optimizer, pngquant, ou encore Color quantizer. PNG-8 ne signifie pas forcément 256 couleurs: vous pouvez tenter de diminuer progressivement les couleurs:

diminution progressive du nombre de couleurs
3584 couleurs256 couleurs128 couleurs64 couleurs seulement
icône office word - 3584 couleurs icône office word - 256 couleurs icône office word - 128 couleurs icône office word - 64 couleurs
16,1 ko 6,3 ko 5,1 ko 4,1 ko
conversion en PNG-8 en conservant la transparence
16260 couleurs245 couleurs
icône cadeau rouge avec ruban jaune icône cadeau rouge avec ruban jaune - 248 couleurs
52,4 ko 15,9 ko

pour la plupart des images, le résultat est très satisfaisant: la qualité de l'image est préservée (incluant les valeurs de transparence), tandis que le poids peut souvent se diviser. c'est la conversion la plus efficace, mais elle est parfois trop agressive avec la qualité. dès lors, vous pouvez tenter les procédures décrites dans les paragraphes suivants

postérisation, réduire le nombre de couleurs

la postérisation est une méthode qui permet de réduire le nombre de couleurs. elle est généralement peu applicable sur les photographies, mais elle fonctionne sur les autres types d'images, notamment les dessins. l'outil median cut PNG posterizer permet l'utilisation la postérisation selon une qualité définie

postérisation
17384 couleurs2367 couleurs
icône palette de peinture icône palette de peinture - réduction des couleurs
67,2 ko 34,4 ko
posterize -q 70 image.png image.png

quantification, réduire le nombre de couleurs

la quantification est une méthode plus classique et plus gourmande en temps de traitement. il existe peu de logiciels d'images capable de la réaliser, mais là encore il est possible d'obtenir de meilleurs résultats avec Color quantizer. ces outils permettent de réduire le nombre de couleurs, mais sans forcément convertir en PNG-8

quantification
17384 couleurs932 couleurs
icône palette de peinture icône palette de peinture - réduction des couleurs
67,2 ko 42,3 ko

filtrage et compression avec pertes

cette méthode est la plus récente de toutes et repose sur le principe d'une compression avec pertes de données: elles sont modifiées spécifiquement pour être plus compressibles avec un filtre particulier. il s'agit d'un processus très rapide, sans diminuer le nombre de couleurs, et qui permet d'obtenir de très bons résultats

conversion lors de la compression: filtrage avec pertes
17384 couleurscompression pertes
icône palette de peinture icône palette de peinture - filtrage avec pertes
67,2 ko 36,5 ko
truepng -l q=4 m=0 fichier.png

la plupart des éditeurs d'images n'incluent pas cette fonctionnalité. les outils truepng ou median cut PNG posterizer peuvent effectuer cette conversion rapidement

réduire la qualité JPG

n'utilisez pas la qualité 100% pour vos fichiers JPG: de manière générale, il est possible de réduire à 90% sans constater des dégâts importants. essayez de trouver le meilleur compromis pour vos images en réduisant la qualité progressivement

réduction de la qualité JPG
qualité 100%qualité 75%
photo de pêche au soleil couchant photo de pêche au soleil couchant, qualité 75%
60,6 ko 17,5 ko

utilisez la focalisation

les points particulièrement mis en avant attirent l'oeil vers un point précis de l'image. cette focalisation peut déterminer la qualité visuelle globale, car l'attention n'est pas portée immédiatement sur les autres zones de l'image

utiliser la focalisation
qualité 90%focalisation et 75%
deux stylos avec mines - qualité 90 deux stylos avec mines - qualité 75
14,8 ko 9,13 ko

le résultat de cette technique est intéressante, car elle permet de donner une meilleure impression de qualité, tout en diminuant ce facteur, et en réduisant également le poids du fichier. elle peut être complétée d'une compression par zones

deux stylos avec mines - compression par zones

mieux intégrer les images

il est possible d'intégrer les images de diverses manières, qu'il s'agisse d'utiliser la balise <img> pour intégrer une image pertinente dans le document (qui sera référencée) ou d'utiliser des décorations une feuille de style. dans tous les cas, essayez d'optimiser l'intégration des images, notamment avec celles qui sont transparentes

pas de transparence sur les fonds unis

la première question à se poser est « la transparence est-elle nécessaire? ». si l'image est inclue sur un fond uni, procédez à une sauvegarde l'image, puis essayez la commande suivante avec imagemagick, en précisant la couleur du fond. dans cet exemple, la couleur #ffffff (blanc) a été choisie

convert image.png -background #ffffff -layers merge image.png
supprimer la transparence
avec transparencesans transparence
icône de recherche de document icône de recherche de document, sans transparence
43,3 ko 12,1 ko

dans cet exemple, l'image a été traitée pour supprimer la transparence en choisissant un fond uni pour arrière-plan. elle a ensuite été convertie en PNG-8 par PNGquant. le poids de sortie est divisé

translucidité intégrée à l'image

au lieu de choisir des scripts ou des images PNG qui permettent la translucidité, il est possible d'intégrer la translucidité dans l'image, de la même manière que ci-dessus. cela permet d'éviter de créer deux images distinctes, et donc de diminuer le nombre de requêtes http, mais également d'alléger le poids de l'image

supprimer la transparence
deux fichiers PNG pour l'effetun fichier JPG avec deux images intégrées
translucidité en deux fichiers PNG translucidité en un fichier JPG
45,9 ko 16,3 ko

le fichier JPG qui permet cet effet n'est pas transparent ou translucide: c'est un effet de positionnement géré par css, tandis que le fichier contient en réalité deux images. cette méthode permet d'obtenir le même effet, mais avec images légères

les techniques décrites dans cet article devraient vous permettre d'optimiser la taille de vos images destinées à votre site web. les outils automatisés vous permettront d'améliorer encore l'optimisation de ces fichiers