Diminuer la taile d'un PNG 24

Bonjour,

je suis un fan du format PNG et notamment de sa version 24bits
Je les utilise dès que je peux, je m'intéresse aussi à la version animée du png

Malheureusement, le png-24 tout frais sorti de Photoshop est souvent trop lourd pour pouvoir être incorporé facilement dans une page web.

Je m'évertue donc à le réduire le plus possible.

Pour ce faire, j'utilise la fonction image / isothélie qui me permet de réduire la palette de couleur tout en gardant la couche de transparence (je mets environ a 15).

Je fais ceci également sur mon masque de transparence afin de limiter les dégradés de transparence qui prennent beaucoup de place.

Pour finir, j'utilise un coup de PngOptimizer.

Avez-vous d'autres astuces pour gagner le plus de kb sans trop dégrader l'image? Les options de Photoshop (CS3) sont inexistantes malheureusement, donc on doit se débrouiller à la main !

Noisequik a écrit :
Bonjour,

je suis un fan du format PNG et notamment de sa version 24bits
Je les utilise dès que je peux, je m'intéresse aussi à la version animée du png

Malheureusement, le png-24 tout frais sorti de Photoshop est souvent trop lourd pour pouvoir être incorporé facilement dans une page web.

Je m'évertue donc à le réduire le plus possible.

Pour ce faire, j'utilise la fonction image / isothélie qui me permet de réduire la palette de couleur tout en gardant la couche de transparence (je mets environ a 15).

Je fais ceci également sur mon masque de transparence afin de limiter les dégradés de transparence qui prennent beaucoup de place.

Pour finir, j'utilise un coup de PngOptimizer.

Avez-vous d'autres astuces pour gagner le plus de kb sans trop dégrader l'image? Les options de Photoshop (CS3) sont inexistantes malheureusement, donc on doit se débrouiller à la main !

En faisant comme décrit ci-dessus, je passe de 250kb a 50kb par exemple

Bonjour,

si l'image s'y prète, pngnq passe le PNG-24 en PNG-8 du mieux possible (sinon Fireworks mais c'est plus cher).
Pour optimiser j'utilise encore OptiPNG (optipng -o7 en ligne de commande) mais sinon il y a Smush.it maintenant intégré à YSlow! avec une extension Firefox.

Noisequik a écrit :
Bonjour,

Pour ce faire, j'utilise la fonction image / isothélie qui me permet de réduire la palette de couleur tout en gardant la couche de transparence (je mets environ a 15).

Je fais ceci également sur mon masque de transparence afin de limiter les dégradés de transparence qui prennent beaucoup de place.

Hello,

Ca serait possible que tu m'en dises un peu plus sur ta fonction/isothélie c'est sous photoshop ? Car ça m'intéresse aussi d'optimiser les png. merci

@+

Pour ma part je me contenter de passer tout ce que je peux en PNG-8 ou JPEG, et je ne conserve du PNG-32 que très ponctuellement. Le PNG-8 avec alpha généré par Fireworks est pas mal pour avoir la légèreté du PNG-8 et une transparence graduelle, mais il faut que l'image s'y prête.

Et après ça, un coup de pngcrush.

Le png-8 fait de l'alpha en niveau de gris ?

Je croyais qu'il avait été conçu pour remplacer le gif, qui était à l'époque un format propriétaire, et que par conséquence recevait les mêmes propriétés pour la transparence.

Désolé de mon ignorance mais je n'ai pas fireworks juste photoshop qui enregistre directement en png-32.

AspiGeek a écrit :
Le png-8 fait de l'alpha en niveau de gris ?

Heu... en gris ou en couleurs.

Le PNG-8, c'est un format d'image en couleurs indexées, avec palette de 256 couleurs maximum. Mais chaque couleur de la palette (ou peut-être un nombre plus limité, à vérifier) peut être une couleur RGBA… donc être translucide. Petit problème: les outils qui permettent d'utiliser cette particularité du format PNG sont très rares, en gros il y a Fireworks et pngnq.

AspiGeek a écrit :

Hello,

Ca serait possible que tu m'en dises un peu plus sur ta fonction/isothélie c'est sous photoshop ? Car ça m'intéresse aussi d'optimiser les png. merci

@+

Exact, c'est dans image / réglages / isohélie

En fait ça diminue également le nombre de couleurs mais tu peux faire glisser le curseur jusqu'à ce que ça te convienne et éventuellement + de 256 aussi...


Par contre je n'arrive pas à utiliser pngnq sous vista

À noter que l'isohélie (posterize si votre Photoshop est en anglais) ce n'est pas le même mécanisme que la création d'une palette de fichier indexé (GIF ou PNG-8). Le résultat obtenu est donc différent.

Florent V. a écrit :

Le PNG-8, c'est un format d'image en couleurs indexées, avec palette de 256 couleurs maximum. Mais chaque couleur de la palette (ou peut-être un nombre plus limité, à vérifier) peut être une couleur RGBA…

A mon avis en png-8, tu dois parler de pixel opaque ou transparent comme le format gif et non d'une couche alpha en niveau de gris avec ses 256 niveaux codés sur 8 bits comme c'est le cas en png-32.

Merci à vous pour ces précisions je vais voir tout ça de plus près car c'est un format que j'utilise très peu
Modifié par AspiGeek (05 Jun 2009 - 11:36)

Salut,

a écrit :
A mon avis en png-8, tu dois parler de pixel opaque ou transparent comme le format gif

Non, non

C'est peu connu parce que non supporté par Photoshop, mais c'est tout à fait réalisable (et ça dégrade gracefulement sous ie6 ). Tiens, un petit coup de Google, premier résultat en français : http://blog.jaysalvat.com/articles/png-8-bits-avec-transparence-alpha-cest-possible.php

Je vais installer Fireworks CS3, j'espère que ca ira

marcv a écrit :
Salut,
A mon avis en png-8, tu dois parler de pixel opaque ou transparent comme le format gif

Non, non

C'est peu connu parce que non supporté par Photoshop, mais c'est tout à fait réalisable (et ça dégrade gracefulement sous ie6 ). Tiens, un petit coup de Google, premier résultat en français : http://blog.jaysalvat.com/articles/png-8-bits-avec-transparence-alpha-cest-possible.php
Alors là je suis sur le cul...c'est tout simplement excellent, encore plus si on a fireworks, quelqu'un sait si cette option existe sous photoshop CS4 ?

Non sérieux moi qui n'a pas envie de magouiller mes png sous ie6 cette solution est juste trop belle

Edit: ne vous embêtez pas je vais chercher sur le net s'il n'y a pas d'autres moyens plus économiques pour ma tirelire en forme de cochon.
Modifié par AspiGeek (05 Jun 2009 - 14:35)

hum j'ai essayé mais la palette de couleur ne jouait pas du tout, mon bonhomme est devenu bleu

je vais essayer la version d'évaluation CS4

edit: bah non c'est pas mieux... docn pour l'instant c'est Photoshop qui fonctionne le mieux...
Modifié par Noisequik (05 Jun 2009 - 14:45)

Juste pour info, les PNG-8 avec paletted alpha ne sont pas pleinement compatibles IE6. Les pixels translucides ne seront pas rendus (seuls les pixels opaques seront affichés). Donc ça peut dégrader graissefouli et tout, mais ça va dépendre de comment est faite l'image. Si vous avez une image avec transparence binaire, et que vous rajoutez un effet telle qu'une ombre portée translucide derrière, ça vous fera une image qui s'affiche sans ombre dans IE6, et ça peut marcher bien. Dans d'autres cas ça ne sera pas aussi intéressant.

Noisequik a écrit :
edit: bah non c'est pas mieux... docn pour l'instant c'est Photoshop qui fonctionne le mieux...

Le mieux pour quoi ? Tu parles du png-8 ou de la fonction isohélie ?
Modifié par AspiGeek (05 Jun 2009 - 15:49)

AspiGeek a écrit :

Le mieux pour quoi ? Tu parles du png-8 ou de la fonction isohélie ?

Je disais que d'après ce que j'ai essayé, la fonction isohélie fonctionnait mieux que l'exportation sous Fireworks en png-8, mais je n'ai testé qu'avec une seule image
Modifié par Noisequik (05 Jun 2009 - 15:51)

Noisequik a écrit :
edit: bah non c'est pas mieux... docn pour l'instant c'est Photoshop qui fonctionne le mieux...

Comme toujours, ça dépend de l'image en question, des modifications acceptables ou pas, des effets recherchés (type de transparence), etc.

Merci pour la précision

Voici un article de l'excellent Smashing Magazine qui va assez loin dans le sujet

http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/