Quel(s) format(s) d'images choisir pour le Web ? [Débat]

[Madmac]

J'aimerai savoir si le format png est implicitement supporté sur la plupart des navigateurs. Sur Linux ce format ne pose pas problème, mais j'aimerai savoir ce qu'il en sur Windows et Mac.

À titre d'exemple, je met ce lien: http://matchab.free.fr/index.php?sty...ssa.css&page=1

J'aimerai savoir si l'image qui contient le texte 'Take back the Web' est bien vu.

J'apprécierai des résultats de test sur différents navigateurs. Théoriquement ce format est supporté, mais j'ignore s'il demande des plug-ins pour fonctionner ...

Pour ceux qui ne connaissent pas ce format, je dirais ceci: il est 1000 fois supérieur au jpg ....

[JackBeauregard]

Et pourquoi est-il mille fois supérieur au jpg ?

[Madmac]

Parce ce que c'est un format de compression qui est véritablement sans perte.
Il remplace le GIF (attention pas encore les animations ..) et le jpg.

À titre d'exemple regarde sur ce site, ce qui ce produit avec des portions d'image qui contiennent des couleurs uniformes. Autour des textes, il y a toujours des "espèce de vague" et à la limite d'une forme, il y a toujour un "espèce d'ombre" avec les couleur foncées, c'est inévitable avec le JPEG ...

http://afp24.fr/images/menu.jpg

Si tu regarde le fond qui sous la flêche, on peut très bien voir un ligne verticale, qui clairement ne fait pas parti de l'image source ...

Avec le PNG, il n'y a rien de semblable et les dégradés restent impéccables.

[Madmac]

J'ai oublié de préciser qu'il supportait les transparences !!!

Et qu'il est utilisable pour des jeux vidéo.

Pour un apercu des possibilités:

http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

Ce format a longtemp été boudé par Micro$oft et l'article en référence date un peu. J'aimerai savoir se qui en est présentement ...

[trotters213]

il est surement 1000 fois supérieur (si tu le dis) mais il n'est pas supporté par le pire ennemi du développeur web, le moche, le gangrènant, le pas pratique, le non respecteur des standards, j'ai nommé : IE (en tout cas pas par le 6 et moins) donc tu peux l'oublier

[Bisûnûrs]

Et puis en voyant ton image http://afp24.fr/images/menu.jpg, je me dis que si tu l'enregistres avec Paint c'est tout à fait normal que la qualité de compression soit merdique ...

Utilise un vrai logiciel de création d'images, augmente la qualité de compression et les dégradés du JPG seront nickels.

Exemples :

Dégradé PNG8 : 5.40Ko


Dégradé PNG24 : 28.7Ko


Dégradé JPG qualité 50% : 1.15Ko


Dégradé JPG qualité 100% : 6.84Ko


Dégradé GIF 32 couleurs : 6.03Ko


Dégradé GIF 256 couleurs : 13.80Ko


Résultat : Bien que le JPG ne gère pas la transparence, au niveau dégradé il est aussi bon que le PNG et il est moins lourd.

[trotters213]

trop fort ce bisounours

[JackBeauregard]

Je confirme PNG est quasi inutilisable sur le web. Une bannière .jpg pesant 30ko se retrouve à plus de 300 ko avec PNG.

Par contre ce qui est marrant c'est que si on enregistre une image avec fireworks pour la modifier ensuite, elle est enregistrée au format PNG.
Si quelqu'un peut expliquer le processus faisant qu'une image PNG peut être modifiée et pas les autres, cela m'intéresse.

[marsupix]

@ Madmac :
Vu ta question (et tes propos) j'ai l'impression que tu débarque.
Le PNG, ça vient pas de sortir, et ça n'a rien à voir avec JPEG.

PNG est un format d'image.
JPEG est un algorithme de compression d'image.

Et les 2 formats n'ont pas la même application.
JPEG est bien meileur que PNG sur les dégradés et surtout sur les images de type "photographique".
Alors que PNG est beaucoup plus adaté à des images style "dessin animé" (en applats de couleus par exemple).
Ensuite PNG8 n'a été inventé que pour dse raisons de brevets sur la compression GIF, mais se comporte pareil.
PNG24 lui, a la spécificité de gèrer les couches alpha et donc de proposer 256 niveaux de transparence.

Au niveau de son implémentation sous les différents navigateurs (puisque c'est bien le navgiateur qui l'affice, donc rien à voir avec l'OS - linux mac ou windows), IE6 et inférieur ne le gèrent pas (comme ça a été dis plus haut).
Firefox et tous les autrse navigateurs respectant (au mieux) les standards du w3c l'affichent bien.
IE7, lui, qui est en train de sortir semble l'afficher enfin correctement.

Reste pluqu'à attendre que tous les windowsiens soient passés à IE7 (ou la majorité) pour pouvoir mettre de petits effets de transparence das nos sites

(oui oui une petite div avec un PNG24 de 1pixel en background en opacité réduite avec une image de fond derrière est du plus bel effet )

Après, l'important est de savoir choisir le bon format pour chaque image, et d'optimiser leur poids.
Avec Gimp ou Photoshop, on peut avoir une prévisualisation en direct quand on enregistre une image pour trouver le compromis qualité/poids

[JackBeauregard]

Tant qu'on y est c'est quoi le code pour faire un png transparent ?

[Madmac]

JackBeauregard:
Je ne sais pas si j'ai bien compris ta question , mais peut-être que cela va t'éclairé...

http://linuxeduquebec.org/article.php3?id_article=281

Inutilisable en 32Bit, peut-être je te l'accorde, mais ce ne pas le seul mode disponible. Jete un coup d'oeil sur les toucans en 8bit, si l'auteur aurait appliqué un "defrange" sur leur masque, il aurait été parfait! Mais c'est plutôt pour des images avec texte que ce format est utile et les images avec dégradés

http://www.libpng.org/pub/png/pngs.html



Marsupix:

Ce ne sont pas mes images, mais j'ai le même problème avec Gimp, mais en moins prononcé. J'ai choisi cette image car elle illustrait bien mon propos...

Bon d'accord, peut-être pas 1000 fois mieux que le JPEG, mais définitivement supérieurs au Gif. Je ne sais pas le logiciel que tu utilises, mais Gimp offre des facteurs de compression pour le PNG et les comparaisons ne sont pas aussi simple. Pour des petites images comme les tiennes, le JPEG est généralement supérieurs mais lorsque l'on met des bannières ou des "screenshoots", les résultats favorisent l'usage du PNG. Et le nombre de couleurs est un facteur. Et les problèmes que je décris sont vrai même avec Photoshop. (je débute pour le web, mais par contre je suis administrateur de réseaux dans une entreprise de pré-impression et j'ai du temp libre la nuit ... )

Dans mon cas, je devais mettre principalement des images de boîte de dialogue et je tenai à conservé un bon niveau de lisibilité des textes dans l'image et j'obtenai systématiquement des meilleurs rapports qualité/poid en PNG. Bon c'est subjectif et je ne dispose pas de logiciels spécialisés dans le domaine, mais ce sont les résultats que j'ai obtenu avec Gimp et imagemagick. Le JPEG est probablement plus adapté pour des image des portraits ou de paysages ...


Trotter213:

Depuis que j'ai commencé ma quête d'information pour le web, je rencontre constamment des astuces pour pouvoir faire fonctionné son site avec Explorer et avec tous les alourdissement dans le code que cela amêne, je crois que je vais mettre tout simplement un lien sur le site de "Firefox" ....

Il y moyen d'utiliser le PNG avec Explorer, mais regarde les simagrées que cela demande: http://support.microsoft.com/kb/294714/fr

Un de mes amis m'a envoyé un document html qu'il avait produit avec Word. Les entêtes CSS était plus lourde que les pages elle-même ...

C'est à ce moment que j'ai compris ce que voulait dire une " Usine à gaz"

[trotters213]

Envoyé par Madmac

Trotter213:Depuis que j'ai commencé ma quête d'information pour le web, je rencontre constamment des astuces pour pouvoir faire fonctionné son site avec Explorer et avec tous les alourdissement dans le code que cela amêne, je crois que je vais mettre tout simplement un lien sur le site de "Firefox" ....

Il y moyen d'utiliser le PNG avec Explorer, mais regarde les simagrées que cela demande: http://support.microsoft.com/kb/294714/fr

Ce n'est pas vraiment une solution non plus de faire un lien parce que les gens ne prendront même pas le temps de lire ta page si elle s'affiche vraiment mal dans leur navigateur et même ceux qui la liront ne s'emm...ont jamais à aller télécharger un logiciel pour voir ton site (à moins que tu es fait LE site parfait que tout le monde attend ).

Je suis allé voir le lien que tu donnes et j'aime parce que c'est un Microsoft support et ils arrivent tout de même à te mettre un code non conforme

Code :

1
2
3
4
<DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='image.png', sizingMethod='scale');" >
</DIV>

(outre le fait que filter : progid : DXImageTransform.Microsoft.AlphaImageLoader n'est pas valide )

[Madmac]

trotters213

Disons que pour un site commercial, je ne prendrai pas cette approche. Mais si les créateurs de sites persistent " à graisser les engrenages", pour quelle raison Micro$oft se conformerait au standard ?

Néanmoin, tôt ou tard, je devrais sans doute devoir franchement abordé ce problème d'incompatibilité ...

Comme tu m'as l'air pas plus expérimenté dans le domaine, j'aimerai que tu me donnes ton opinion sur une approche que j'aimerais exploré. Actuellement, je fais l'apprentissage de Ruby on Rails.

J'ai envisagé un façon de permettre à l'utilisateur de permettre de choisir son thème pour visité le site. Avec les feuilles de style c'est enfantin. Je fais en sorte que le serveur envoit une feuille de style différente selon un requète.

Par contre, je me demande, s'il serait possible de mettre dans les feuilles des styles tous "les simagrées" nécessaire pour que mes pages s'affichent correctement dans Explorer sans devoir mettre des instructions dans chacunes des pages xhtml...

Évidemment si c'était possible, il me serait possible d'utiliser le truc des substitutions des feuilles de styles ...

[trotters213]

Envoyé par trotters213

Comme tu m'as l'air pas plus expérimenté dans le domaine

tu m'as cerné

Tu peux utilisé un commentaire conditionnel pour appeler une feuille de style pour IE et une pour tous les autres navigateurs (perso je fais un include et toutes mes pages appellent cet include du coup j'ai qu'un fichier à changer pour modifier mes 300 pages )

Sinon tu peux utiliser utiliser le hack IE ( * html puis le nom de ta balise dans le ficheir CSS), c'est valide, ça marche toujours mais c'est de la bidouille).
Il y en a encore du style utiliser !important (qui ne fonctionnera pas avec IE7 au pasage ) ou alors des underscores tu devrais jeter un coup d'oeil sur .

[Swoög]

Le choix d'un format pour le Web est effectivement un problème récurrent en Webdesingning. Bien souvent, les caractéristiques et les utilisations propres à chaque format sont souvent mal connues ou mal exploitées.
Je pense qu'il serait bon que chacun donne et explique son avis ou ses choix afin qu'on puisse une fois pour toute savoir quand utiliser ces différents formats sur le Web !

D'après ce qui a été dit ci-dessus, le JPEG semble le mieux adapté, et le PNG du fait de son non-support par IE est déconseillé, même s'il serait idéal pour les effets de transparence avancés (dans sa version 24bits). Cependant, très peu de choses ont été dites sur le GIF. Mis à part qu'il est souvent utilisé pour les animations, on ne sait pas grand chose pour le moment.

Il serait intéressant de débattre et d'augmenter les informations disponibles sur ces formats, de plus, on pourrait également parler de JPEG 2000 ou d'autres formats d'images tels que SVG (qui est plutôt un format de description d'image).

Le débat est lancé, à vos claviers !

[Linaa]

Tout dépend aussi de l'image.
S'il n'y a pas trop de couleur, utiliser un gif est moins lourd que d'utiliser un jpeg.
Par contre, pour les photos, les degradés, là vaut mieux utiliser le jpeg et voir la qualité (50% ou 100%) ensuite.
Concernant le png, je ne l'utilise pas du tout ! Connais pas...

[Bisûnûrs]

Suivant la taille en pixels de l'image et suivant le nombre de couleurs, j'utilise soit du JPEG 100% soit du GIF 256 couleurs (voire moins si l'image ne comporte que 3 ou 4 couleurs).

Dans le cas d'un damier noir et blanc, il vaut mieux utiliser du gif ou du PNG, il n'y a aucune perte contrairement au JPEG qui a du mal à ne pas baver sur les deux couleurs, même en 100%.

Je délaisse également le PNG, tout comme Linaa, que je trouve vraiment lourd.
Effectivement il gère plusieurs niveaux de transparence comparé au GIF qui n'en gère qu'un seul et au JPEG qui n'en gère aucun, cependant le navigateur le plus utilisé au monde ne gère pas cette transparence. A suivre donc.

[viviboss]

Moi je suis à 100% pour le PNG, qui est le meilleur format que j'ai trouvé.

Dommage effectivement que ce con***** de IE ne le gère pas.

Cela dit, du PNG dans une anim Flash, ca passe tout seul !!!!

Dommage encore une fois que ce con***** de IE gère le flash maintenant avec un espèce de truc manuel (faut cliquer l'anim pour l'activer.....)

[Bisûnûrs]

@viviboss : IE gère le PNG ... C'est la transparence du PNG qu'il ne gère pas, c'est différent.

Et à part dire "A bas IE, vive le PNG", tu as d'autres arguments plus convaincants ?

[viviboss]

Et bien le PNG m'a pas mal sauvé la mise : en effet, lorsque on veut mettre un texte avec des polices un peu spéciales, on a 2 choix : forcer le téléchargement de polices (c'est pas très cool) ou bien faire une image soit du mot, soit des lettres composant le mot....

Et bien, essai de faire une phrase ou une lettre en GIF (avec transparence), et tu verras la tête de ta phrase !!!! Le GIF dénature le design de la police (bords dégeu, hachés) alors que en PNG, le rendu est nickel !!!!

Si j'osais, je dirais que c'est un très bon paliatif au vectoriel, quand on a besoin d'un format WEB.

En effet, autre possibilité : JPEG pour le mot ou les lettres, mais ca veut dire que à chaque fois que tu change de couleur de fond dans ton site, tu dois AUSSI changer le fond de ton JPEG.

Pour ceux qui n'ont pas essayé : écrivez sous photoshop une phrase avec une police un peu arrondit, et enregistrez sous les 2 formats, avec transparence du fond : GIF et PNG. Vous verrez, la différence est bleuffante !!!!

Petit exemple en pratique : http://www.peinturlure.com

Dans la banderole Flash, le mot "peinturlure" est composé de lettres en PNG avec transparence...

Bref, c'est là que j'ai découvert la vrai puissance du PNG !!! Le rendu graphique est largement supérieur aux autres formats, et je pense que ca vaut le cout de céder un peu de poid à ce format, d'autant plus que maintenant l'ADSL est la norme !!!!

Perso je suis photographe, et j'ai transformé, pour le WEB, toute les photos en PNG. Tant pis pour le poid : je vise l'esthétique....