[Tutorial/Astuce] PNG et IE …

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
PsyDk
Lézard à collerette
Messages : 317
Inscription : 23 sept. 2003, 09:41

Re: [Tutorial/Astuce] PNG et IE …

Message par PsyDk »

calimo a écrit : La deuxième, celle que je mets en place, très simple, non invasive dans le code : fixer une couleur d'arrière plan au PNG.
[...]
Attention simplement à ne pas passer l'image par le "PNG Optimizer" de Psychedelik Darken (cité au début) qui supprime cette couleur. Évidemment ça ne fonctionne que sur des fonds unis, mais c'est tellement simple et enfantin à mettre en oeuvre qu'il faut aussi le citer :wink:
Ok, je vais mettre une option dans ce cas pour conserver la couleur de fond :)
GregK84
Lézard à collerette
Messages : 360
Inscription : 15 oct. 2004, 15:24

Message par GregK84 »

esperont ...
Firefox,
Time for the hunted to be the hunter.

Config : WinXp, FF 1.0, TB 1.0, SB 0.2.
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Re: [Tutorial/Astuce] PNG et IE …

Message par calimo »

PsyDk a écrit :Ok, je vais mettre une option dans ce cas pour conserver la couleur de fond :)
Excellente idée, je ne manquerai pas de tester son bon fonctionnement :)

Aussitôt dit, aussitôt fait, pour ceux qui ne suivraient pas l'actualité : PNG Optimizer 1.5 est sorti ! :P
Bobe
Iguane
Messages : 742
Inscription : 28 juil. 2003, 21:29

Message par Bobe »

GregK84 > Ce serait une bonne idée de placer ce tutoriel également sur une page indépendante qui puisse servir de référence :)
« La vie d’un geek est un combat perpétuel contre l’imperfection »
GregK84
Lézard à collerette
Messages : 360
Inscription : 15 oct. 2004, 15:24

Message par GregK84 »

j'y pense ...

j'ai deja 2 tutoriaux a mettre (png + convertion de base de données access > mysql)

Comme je dois realiser mon site perso je l'ajouterai dans une rubrique
j'ai egalement complete mon tuorial grace en partie aux informations de calimo.
Firefox,
Time for the hunted to be the hunter.

Config : WinXp, FF 1.0, TB 1.0, SB 0.2.
GregK84
Lézard à collerette
Messages : 360
Inscription : 15 oct. 2004, 15:24

Message par GregK84 »

Voici la nouvelle version du tutorial sur le PNG, il est plus complet et plus habouti que la premiere version.

La version PDF est plus récente que ce post, vous pouvez la télécherger ICI.

PS : Donner votre avis, voir de nouvelle solution pour que je complete encore ce tutorial.
Firefox,
Time for the hunted to be the hunter.

Config : WinXp, FF 1.0, TB 1.0, SB 0.2.
HP
Tyrannosaurus Rex
Messages : 2196
Inscription : 21 oct. 2004, 10:25

Re: [Tutorial/Astuce] PNG et IE …

Message par HP »

PsyDk a écrit :
calimo a écrit : La deuxième, celle que je mets en place, très simple, non invasive dans le code : fixer une couleur d'arrière plan au PNG.
[...]
Attention simplement à ne pas passer l'image par le "PNG Optimizer" de Psychedelik Darken (cité au début) qui supprime cette couleur. Évidemment ça ne fonctionne que sur des fonds unis, mais c'est tellement simple et enfantin à mettre en oeuvre qu'il faut aussi le citer :wink:
Ok, je vais mettre une option dans ce cas pour conserver la couleur de fond :)
y a t'il un moyen que je ne connais pas de convertir un PNG avec couche Alpha
en PNG à une seule couleur de transparence ?
j'ai pas trouvé ...
:roll:


en tout cas, très jolie la nouvelle icône !
ça tombait bien en plus, je venais juste d'ajouter le flux de psydk que quelques heures aprés la nouvelle est tombée :)

“La médiocrité obtiendra immanquablement la préséance en se travestissant des oripeaux de la bienséance.”
PsyDk
Lézard à collerette
Messages : 317
Inscription : 23 sept. 2003, 09:41

Re: [Tutorial/Astuce] PNG et IE …

Message par PsyDk »

HP a écrit : y a t'il un moyen que je ne connais pas de convertir un PNG avec couche Alpha en PNG à une seule couleur de transparence ?
j'ai pas trouvé ...
:roll:
PngOptimizer le fait si ton image le permet. Ainsi :
- si tu as une image en 32 bits ;
- s'il n'y a que deux valeurs alpha : entièrement visible (0) ou entièrement opaque (255) ;
- et si la couleur associée à l'alpha de valeur 0 est toujours la même.

alors : l'image est stockée en 24 bits avec une couleur indiquant la couleur de transparence.

Si tu as plusieurs niveaux de transparence à convertir, alors il te faut passer par un logiciel qui détruit le contenu de l'image. Sous Photoshop tu peux enregistrer en PNG-8. Photoshop ne sait gérer que la transparence tout/rien en mode PNG-8 donc ça fera la conversion suivante :

alpha = 0 si alpha <= 127
alpha = 255 si alpha > 127

L'inconvénient est que les couleurs passent de 24 bits à un mode utilisant une palette, donc tu perds aussi des couleurs.

Ça me donne l'idée d'inclure des fonctionnalités de batch dans PngOptimizer, un peut comme les viewers d'image :) Mais pour l'instant ce n'est qu'une idée comme ça.
HP a écrit : en tout cas, très jolie la nouvelle icône !
ça tombait bien en plus, je venais juste d'ajouter le flux de psydk que quelques heures aprés la nouvelle est tombée :)
Merci :) J'ai eu la chance d'avoir un contributeur talentueux pour l'icône.
HP
Tyrannosaurus Rex
Messages : 2196
Inscription : 21 oct. 2004, 10:25

Re: [Tutorial/Astuce] PNG et IE …

Message par HP »

PsyDk a écrit :Si tu as plusieurs niveaux de transparence à convertir, alors il te faut passer par un logiciel qui détruit le contenu de l'image. Sous Photoshop tu peux enregistrer en PNG-8. Photoshop ne sait gérer que la transparence tout/rien en mode PNG-8 donc ça fera la conversion suivante :

alpha = 0 si alpha <= 127
alpha = 255 si alpha > 127

L'inconvénient est que les couleurs passent de 24 bits à un mode utilisant une palette, donc tu perds aussi des couleurs.
donc par exemple pour convertir ce genre de PNG :
Image
ou le PNG dans ma signature par exemple ...
il faut que je passe par un logiciel tiers avant d'optimiser par PNGOptimizer ?!

c'est çà ?
j'ai bien compris ?

“La médiocrité obtiendra immanquablement la préséance en se travestissant des oripeaux de la bienséance.”
PsyDk
Lézard à collerette
Messages : 317
Inscription : 23 sept. 2003, 09:41

Re: [Tutorial/Astuce] PNG et IE …

Message par PsyDk »

HP a écrit : donc par exemple pour convertir ce genre de PNG :
Image
ou le PNG dans ma signature par exemple ...
il faut que je passe par un logiciel tiers avant d'optimiser par PNGOptimizer ?!

c'est çà ?
j'ai bien compris ?
Yep, si tu souhaites faire des optimisations destructrices, tu dois passer par un logiciel de dessin pour faire ça :)
HP
Tyrannosaurus Rex
Messages : 2196
Inscription : 21 oct. 2004, 10:25

Message par HP »

ce ne serait pas possible/envisaeable qu'un jour PNGOptimizer puisse le faire ?
:roll:

“La médiocrité obtiendra immanquablement la préséance en se travestissant des oripeaux de la bienséance.”
PsyDk
Lézard à collerette
Messages : 317
Inscription : 23 sept. 2003, 09:41

Message par PsyDk »

HP a écrit :ce ne serait pas possible/envisaeable qu'un jour PNGOptimizer puisse le faire ?
:roll:
Si j'ai bien compris, tu aimerais reproduire la procédure Photoshop qui fait :
Image 32 bits --> Image 8 bits avec transparence tout/rien ?
HP
Tyrannosaurus Rex
Messages : 2196
Inscription : 21 oct. 2004, 10:25

Message par HP »

en effet, ça m'éviterais de devoir passer par un logiciel dont je tairai le nom
pour transformer le PNG en GIF
et ensuite l'optimiser de GIF à PNG via PNGOptimizer ...

“La médiocrité obtiendra immanquablement la préséance en se travestissant des oripeaux de la bienséance.”
PsyDk
Lézard à collerette
Messages : 317
Inscription : 23 sept. 2003, 09:41

Message par PsyDk »

HP a écrit :en effet, ça m'éviterais de devoir passer par un logiciel dont je tairai le nom
pour transformer le PNG en GIF
et ensuite l'optimiser de GIF à PNG via PNGOptimizer ...
Ok, ça me semble sensé :)

Ça ne sera pas trop dans la philosophie actuelle de PngOptimizer qui ne détruit pas les pixels. Ça destabiliserait les utilisateurs de se rendre compte que le PNG a pas mal changé.

Par conséquent je dois trouver un moyen de prévenir l'utilisateur que son image va être profondément modifiée. Je vais réfléchir à tout ça. Peut-être un indice visuel via du texte ou un changement de couleur de fond...

Ça va me faire travailler sur une routine de conversion 24 bits --> 8 bits, ça peut être rigolo :) Mais ça ne va pas être pour tout de suite, la version 1.5 a pris beaucoup (trop) de mon temps récemment.
HP
Tyrannosaurus Rex
Messages : 2196
Inscription : 21 oct. 2004, 10:25

Message par HP »

:D

je vais surveiller mon RSSOwl alors ...

“La médiocrité obtiendra immanquablement la préséance en se travestissant des oripeaux de la bienséance.”
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités