Optimiser vos images avec Photoshop

Nous avons parlé plus d’une fois d’optimisation d’images. Dans des billets sur les outils comme pngcrush les commentaires ont parfois dérivé (avec plaisir) sur les techniques d’optimisations et l’importance de gérer la qualité et la compression de l’image dès la création.

Souvent ce n’est plus possible pour ceux qui s’occupent des performances mais si vous avez la chance d’avoir la main sur celui qui joue avec Photoshop et qu’il semble assez receptif à vos demandes, lisez vite l’article de Smashing magazine sur l’optimisation PNG, puis celui sur l’optimisation JPEG.

Vous y trouverez comment améliorer certaines zones, comment diminuer le nombre de couleurs tout en gardant une qualité très intéressante, comment supprimer les informations sur les pixels transparents peut améliorer la compression, ou pourquoi un jpeg à qualité 51% est infiniment mieux qu’un jpeg à qualité 49%.

Votre graphiste connait déjà tout ça, mais un rappel tel que celui ci permet de faire en sorte qu’il utilise. Vous vous aurez en tout cas dans les mains les armes pour le challenger sur le poids des images. Il vous restera juste à passer le résultat par OptiPNG si c’est encore nécessaire.

J’aime d’ailleurs beaucoup l’idée de supprimer les informations inutiles dans les pixels transparents pour améliorer la compression. Je suis étonné que ce ne soit pas fait par défaut lors de l’export « pour le web » de Photoshop. Je ne crois pas que OptiPNG ou PngCrush s’en occupent non plus, et c’est malheureux. Je vous propose donc de récupérer un filtre Photoshop pour faire ça automatiquement, ou plutôt le faire faire par votre graphiste.

Publié par edaspet

Plus d'informations sur mon profil en ligne

5 réponses sur « Optimiser vos images avec Photoshop »

  1. Merci pour ces liens intéressants pour un utilisateur Windows. Personnellement, j’utilise Ubuntu et si ces informations restent valables en théorie, savez vous si il existe des initiatives de logiciels d’optimisation pour linux ?

  2. La plupart des outils en ligne de commande comme PNGCrush fonctionnent correctement sous linux.

    Pour Gimp je ne sais pas s’il a les mêmes tares que Photoshop (mauvaise compression par défaut). Il suffit de tester, n’hésites pas à publier les résultats ici si tu le fais.

  3. « J’aime d’ailleurs beaucoup l’idée de supprimer les informations inutiles dans les pixels transparents pour améliorer la compression. »

    Ca n’a rien d’une technique, c’est une question de bon sens à la création. Un graphiste digne de ce nom ne pond pas une telle atrocité à moins d’être resté aux méthodes de « masque » des années 2000. PNGOptimizer peut « corriger » ce type d’image.

    Je trouve les illustrations très moyennes. L’image « after » de cet exemple est mal encodée ; cette image n’a rien à faire en TrueColor+alpha, le canal alpha étant totalement inutile. L’auteur semble confondre PNG-24/32. On peut obtenir de meilleurs ratio qualité/poids avec ou sans pertes.

    Et illustrer la transparence sur un fond blanc et avec une définition aussi faible, c’est … pas très démonstratif. Il aurait été intéressant de l’intégrer sur un fond, parce que là du coup, l’intégration ne nécessite pas de transparence.

  4. Le bon sens de supprimer les informations de couleur des pixels totalement transparents c’est logiquement à l’outil de le gérer dans l’export. Certains ne le font pas, il faut passer derrière pour le faire. Il faut le savoir, il faut le faire (ou alors le faire soi même directement dans l’image à la base).

    Sinon oui, les illustrations sont illustratives, pas démonstratives. Le tout c’est d’informer.

Les commentaires sont fermés.