Hosanna au plus haut des <head>ers, v'la-ti-pas que Gravatar.com annonce qu'ils remettent la compatibilité avec les PNG transparents.

Non, je ne mets pas de gravatar sur mon site (quoique bientôt, ça se pourrait) . Mais il se trouve que j'ai un compte gravatar, l'image a été générée sur le site Tektek, et non je n'ai pas encore les cheveux violets. Entres autres, il apparait dans mes commentaires chez Enflammée. Le gravatar a l'immense avantage de se présenter comme une certification partielle d'identité mais néanmoins facilement attaquable, basée sur une adresse e-mail (encodée... faut quand même pas exciter les spammeurs attirés par l'odeur de l'@). Bon, c'est moins secure qu'OpenID mais c'est plus facile à mettre en place côté serveur. Et qu'à part le côté foutoir graphique que cela rajoute dans les commentaires, étant donnée qu'il ne s'agit ni d'une insertion Javascript ou d'un script côté serveur, on a peu de chances d'avoir des popups de pubs qui s'y insèrent sournoisement.[PS1]

Image sans transparence
(loosy .JPEG)		     Image avec transparence
PNG lossless ARGB
     

Auto-portrait façon Andy Warhol
(PNG alphatransparent sur background de couleurs dans une table, HTML)

Excusez-moi de m'être auto-interrompu par ce grand moment d'auto-égotisme...
Plouf ! Plouf ! Je reprends
Or, ceux-ci après avoir supprimé les fonctions de transparence des images uploadées en PNG pour tout reformater en .JPG, firent marche-arrière la semaine dernière sous la pression de leurs utilisateurs.
Le hic, c'est la seconde partie du communiqué corporate annonçant ce retour en arrière : ils recommandent aux webmasters de s'intéresser... à MSIE6.

STOP !

Arrêtez de vous faire pigeonner : Même Microsoft ne supporte plus MSIE6 (questions de sécurité incluses), les webdesigners n'ont plus à se faire chier la moitié de leur temps pour un navigateur aussi bâtard. La guerre des navigateurs a lieu, et le bon sens a déjà gagné : Sam Fortiner a fait le boulot pour vous.
Le format PNG (on dit “ping”) permet d'enregistrer une image sans perte d'information (les artefacts dans les images .JPEG), et permet d'intéressants effets avec la transparence progressive. Plongez-vous dans le site officiel du PNG et découvrez ses immenses possibilités de compositing. Le principal avantage du .PNG c'est qu'ils sont plus légers que les .GIF pour les images palettés (impropement dits “8 bits”), et offre une compression sans perte pour les images RGB plus efficace que les .JPEG à 90%. Qui plus est, ils ne sont soumis à aucun brevet, ce qui est un immense avantage dans les pays anglo-saxons sous le régime du brevet logiciel.

Petit jeu : prenez cette liste des navigateurs obsolètes, et cherchez lequel ne supporte pas la transparence PNG ARGB [PS3] :

  • Netscape 5
  • Phoenix 0.1 [PS2]
  • Safari 1
  • OmniWeb
  • Dreamcast Navigator
  • WebTV
  • Konqueror 1
  • Opera 6
  • Ice Browser
  • MSIE 5.2 pour Mac
  • MSIE 6 pour Windows

Étonnement, c'est le seul pour lequel les webdesigners passent encore 50% de leur temps utile. Malheureusement, c'est celui qui faisait jusqu'à il y a peu la majorité de l'audience d'un site. Doit-on continuer à faire du site web comme il y a 7 ans ? Il est loin l'époque ou Adobe Photoshop était strictement incapable d'exporter proprement une image en alpha-channel [PS4]

Corriger les bugs d'implémentations des CSS dans MSIE6, oui c'est normal (il représentera encore une trop grande part de marché dans un an pour s'en passer), corriger les bugs d'implémentation de Javascript, oui c'est normal (MSIE7 a exactement les mêmes). Mais il faut différencier le travail bien fait du masochisme gratuit. Par exemple, corriger les bugs d'implémentations du parseur XML, optimiser les fonctions Javascript JScript, écrire du VBscript, du Silverlight,... Ben... patcher la gestion de la transparence pour le PNG ARGB rentre dans cette catégorie.

HOWTO se prendre la tête inutilement

Tous les ordinateurs sous MS-Windows mis en place depuis 2 ans ont MSIE7 par défaut. Même le D.I. qui nous demandait du PNG ARGB dans son intranet a dû reconnaitre que le seul ordi a encore avoir MSIE6 n'avait pas accès au réseau. Certaines applications supportent bien mal les mises à jours, même de sécurité.

Il existe pourtant une solution presqu'élégante pour MSIE6 : Il se trouve que s'il ne comprend pas l'alphachannel des PNG ARGB, il comprend parfaitement la transparence binaire des PNG en couleurs fixées, un peu comme les GIF. D'ailleurs, les PNG palletés sont plus petits que leur équivalent en GIF. Et il existe une solution un petit peu complexe à mettre en œuvre côté graphiste : faire un PNG contenant la même image dans deux version (ARGB et paletté)[PS5]. Hélas, cela va alourdir sauvagement votre PNG. Gain dérisoire.

L'autre solution simple qui repose aussi sur deux PNG, cette fois-ci distincts, c'est de servir différemment côté serveur le bon grain (les navigateurs modernes) et l'ivraie (MSIE6). La seule méthode de ségrégation est bien évidemment basée sur le user-agent déclaré. L'avantage, c'est que le tri peut être fait dans le .htaccess.

La solution idéale pour le webdesigner serait de prévoir de poser ses PNG ARGB sur une couleur de fond unie, qui serait la même sur l'ensemble du site. Oui, ça revient à nier tous les effets géniaux possible en semi-transparence. Dans ce cas-là, il lui suffit de déclarer cette couleur dans les zones de transparence nulle et en couleur de fond par défaut. C'est la solution que j'ai choisie pour la version actuelle de ce site (dite “cssr07”). Bonus : ça marche à tous les coups.

MSIE6, parce que j'aime le web moche et lent

Ajouter des fonctions JScript pour que MSIE6 accepte la transparence progressive, c'est idiot et débile : si des gens naviguent (rament) encore sous MSIE6, c'est qu'ils se contentent parfaitement d'avoir un navigateur web moche. Donc ils ont l'habitude d'avoir de la laideur sur leur écran. Surtout, ne leur gâchez pas le plaisir !

La seule méthode “transparente” qui n'envoie pas deux codes sources HTML différents consiste à un script côté neuneu MSIE6. Lequel va remplacer dans le code HTML les balises <img /> contenant le PNG par un élément qui comporte un background-image associé à un filtre spécial. Puis à mettre un <span></> caché pour avoir le texte alternatif. C'est d'un pratiiiiiiiiiiique...
Ce script qui manipule l'arbre DOM de votre page va alourdir fortement le temps de chargement et de rendu du navigateur, étant donné qu'ils redemande un parse&display... Le site perd en réponse, sur un navigateur qui n'est déjà pas un foudre de guerre (et sur lequel vous patchez déjà le comportement de <button></>, des flash, etc...).
Car ajouter des fonctions JS de manipulation DOM peut [PS6] faire planter aléatoirement MSIE6, et donc empêcher ces visiteurs du dimanche d'accéder à votre site.

Alors que des erreurs de rendus, ces utilisateurs-là y prêtent tellement peu attention tellement ils les voient toutes la journée qu'il ne faut surtout pas bousculer leurs habitudes.

Foutaises !

L'usage de ce terme grossier est en fait une référence croisée entre le bingo-blabla de réunion, et un hommage personnel à mon prof d'informatique/mathématiquse du lycée, M. Hébrault.
Jeune, dire du gros-mot te met du caca dans ta bouche.

Basiquement, l'erreur d'analyse est de vouloir mettre une béquille pour un problème qui n'est pas durable. Vous vous souvenez de tous ces sites qui mettaient du Flash à tout va, et pour contourner la décision Eolas avaient mis du swfobject.js partout ? Microsoft avait pourtant prévenu très à l'avance qu'un patch en Avril 2008 retirerait cette limitation. Malgré ce calendrier défini à l'avance, maintenant il faut débarasser tous les sites web de ces scories d'un autre temps. Certains de ces sites avaient été livrés en début d'année ! Le problème du PNG est aussi condamné à être naturellement résolu, puisque MSIE7 est sorti et que Microsoft pousse à la mise à jour. Or vouloir patcher au forceps entraîne une lourdeur de son site. Bref, vous condamnez votre propre production pour un problème qui n'a plus à être résolu.

Et les “solutions”, toutes basées sur des technologies ultra-propriétaires qui n'existent que sur MS-Windows et que dans MSIE, on n'en a pas manqué :

  • Mettre un ActiveX ? Ceux-ci ont été bloqués pour des raisons de sécurité par Microsoft lors du XP SP2. Ça vous fera réfléchir à deux fois si vous songiez faire du XAML, du Silverlight ou tout autre technologie cadenassée par Microsoft.
  • Un .HTC (aka “css behavior”) ? C'était trop beau : Là encore, ce format “web” propriétaire de Microsoft a été retirée par son initiateur, et pour cause : C'était un ActiveX camouflé.
  • Un filtre css appelant AlphaImageLoader dans la CSS ? Cette composante propriétaire affectera aussi les navigateurs plus récents (MSIE7 et MSIE8 qui n'en ont pas besoin), et retardera d'autant l'affichage définitif de votre page. Qui plus est, elle ne fonctionne “proprement” que quand les PNG sont utilisées en image de fond.
  • Mettre les PNG dans des balises <object></> ? Ouaaaiiiis. Autant servir un code HTML différent par navigateur, comme en 1999...

Il n'y a aucune raison de se prendre la tête à son point et de gâcher autant de temps de travail pour un gain illusoire, qui ne concerne finalement qu'une population logicielle en sursis. (Faut reconnaitre que Windows Vista n'aide malheureusement pas à la migration). Il vaut mieux plutôt rendre service à ces visiteurs là en leur rappelant que MSIE7 est sorti, et que des logiciels plus intéressants existent (Firefox, Safari, Opera).

En faire, c'est bien. En abuser, ça craint

Mais revenons à la racine des choses. Structurellement, la transparence ARGB n'est pas évidente à mettre en place dans le code source d'un navigateur (j'ai pas vérifié, mais je crois que même les images .BMP avec transparence ne sont pas comprises de MSIE6). Pour chaque image avec alpha-transparence, votre client web (le navigateur) doit calculer tous les éléments qui sont dessous l'image, y plaquer l'image avec ses degrés d'opacité, puis refaire le rendu en final avec l'image composée. Évidemment, si un élément bouge dessous, il faut tout reprendre. Ainsi, j'ai vu des sites qui utilisaient du PNG pour faire des découpes ombrées sur des iframe. C'est très joli, mais ça ramait au possible mais quand on fait défiler le contenu de la page sur un ordinateur de bureau. C'est pour ça que les Flash semi-transparents (que MSIE6 gère pour le coup parfaitement) ou avec des éléments par dessus sont capable de mettre à genoux une bécane.

Depuis cet exemple, de l'eau a coulé dans les tuyaux de l'internet, les petits processeurs bouffent largement plus de MHz à grands coups de mégawatts, et les composantes logicielles d'abstraction graphique (Cairo, Quartz, OpenGL, X) ont permis d'accélérer les calculs de compositing au point que les navigateurs (ceux qui n'ont jamais cessés d'être développés) font ce genre d'opération beaucoup plus rapidement, sur les mêmes ordinateurs qu'il y a 4 ans.

Mais ça n'explique toujours pas pourquoi les autres logiciels de Microsoft comprenaient sans problème les PNG ARGB [PS7].

Chérie, j'ai (re-)détouré ton gravatar

Bref, tout ça pour dire que je suis super-content que mon gravatar ne soit plus sur un fond vert-fluo. Malheureusement, vous êtes bons pour recharger votre image et l'effet ne se verra que la prochaine fois que votre visiteur videra le cache de son navigateur.

Accessoirement, si votre site affiche les gravatars de vos commentateurs, vous ne pouvez qu'applaudir que ce service respectent enfin la volontée graphique des designers et de leur utilisateurs. C'est vrai quoi : en commentant, on ne manque jamais assez de tact par des textes respectueux et intelligents et des gravatars proprement détourés.

Vous vous essuyez bien les pieds quand vous êtes invités chez quelqu'un, non ?

Chunks additionnels

  1. ↑ popups de pub : Le service est gratuit et y'a pas une once de pub sur leur site... Faudra m'expliquer le business-plan de la société Gravatar.com, à part se faire racheter par Wordpress. Ou alors, two-point-zero m'échappe toujours autant...
  2. ↑ Phoenix 0.1 : Pour être tout à fait honnête, Firefox avant la version 2 n'avait pas une gestion très précise du calcul de l'information gamma contenu dans une image PNG, ce qui pouvait donner une légère imprécision de rendu, notamment quand l'image PNG était elle-même rendu avec une opacité non entière.
  3. ↑ ARGB : Les PNG en 24 bits RGB (un canal par composante primaire de couleur) avec alpha-channel (soit en fait 32 bits et que j'écris ARGB).
  4. ↑ Photoshop [...] incapable d'exporter [...] une image en alpha-channel : Il y a cinq ans, quand je faisais de la production tv, je me suis arraché les cheveux pour avoir une transparence correcte sur les PNG ARGB, mais aussi sur les Targa 32bits. C'est à cette époque que je suis passé définitivement à The Gimp, qui était loin d'être aussi pratique que maintenant.
  5. ↑ un PNG contenant la même image dans deux version : Un excellent bouton publicitaire de Firefox 1.5 en faisait l'étonnante démonstration. Hélas, je n'arrive plus à lui mettre la main dessus. Ça demande aussi un logiciel de débuggage de chunks PNG, tel que tweakPNG, tout comme le regretté excellent GIF construction kit oncques issu de... Microsoft !
  6. ↑ peut faire planter aléatoirement : C'est là que la définition du terme “aléatoirement” prend toute sa saveur. Surtout avec des messages d'erreurs erronnés (« Le site demandé est introuvable ») et le débuggueur JScript de Microsoft qui est aussi peu pratique qu'heureusement gratuit.
  7. ↑ Les autres logiciels Microsoft : L'unique exception étant IIS, un petit serveur web amateur, incapable de livrer le bon mime-type pour les .PNG. Étant donné que les CSS avaient le même problème, c'est bien la preuve que IIS n'était à l'époque qu'un logiciel familial bas de gamme, tout juste bon à aider les infections des Windows XP où il était activé par défaut !