Ne pas filtrer les PNGs

Utiliser les filtres CSS d’Internet Explorer n’est pas une bonne idée. Déjà ils sont inutiles la plupart du temps, quand vous pouvez vous contenter d’un PNG8 avec une transparence binaire (c’est à dire la plupart du temps si vous avez suivi le début de la phrase), mais en plus ils sont lents.

Quand vous faites un filter:AlphaImageLoader dans vos CSS, Internet Explorer l’exécute à chaque apparition de l’image dans votre page. Oubliez l’idée qu’il met en cache le résultat ou même qu’il n’exécute le filtre qu’une seule fois par image. Si vous l’utilisez pour une petite icône de présentation qui apparaît vingt fois dans votre page, c’est vingt exécutions du filtres qui sont faites.

À chaque exécution du filtre le rendu est bloqué, en attente. Sur Yahoo! Search en retirant AlphaImageLoader de la feuille CSS c’est jusqu’à 100ms qu’ils ont gagné (information donnée par Stoyan Stefanov sur sa dernière présentation).

Faites un compromis avec vous-même et laissez une simple transparence binaire sur un PNG8. Mais si vous n’y êtes pas prêts, faites au moins en sorte que Internet Explorer 7 et plus n’utilisent pas le filtre, car eux savent nativement lire les couches alpha des images PNG. Transformer filter: en _filter: devrait suffire.

Publié par edaspet

Plus d'informations sur mon profil en ligne

15 réponses sur « Ne pas filtrer les PNGs »

  1. Bonjour,

    Je ne vois pas vraiment ça comme un problème. La seule utilité que j’ai des filtres IE est de conserver une compatibilité avec IE6, le temps que ce navigateur disparaisse : les performances importent peu dans ce cas.

    Je privilégie cependant un équivalent PNG8 de l’image en PNG24 lorsque c’est possible (c’est à dire la plupart du temps).

    Pour appliquer le filtre ou l’image alternative, j’utilise la technique des commentaires conditionnels : http://www.lesintegristes.net/2008/04/08/cibler-internet-explorer-dans-une-css-oui-et-sans-hack/

  2. Ne pas perdre tout de même de vue le but du site, qui est de publier des infos. Tant que IE6 n’est pas négligeable du point de vue traffic, la question des performances est tout aussi importante pour IE6 que pour Firefox 3 à mon avis.

    On ne peut pas se permettre de jeter des mauvaises performances à plus de 50% des utilisateurs. Qu’on pense qu’ils aient raison ou tort d’utiliser encore IE6 n’intervient même pas.

  3. Sous entendu que tu considères comme « dégradé » un site en PNG8, et c’est là que je tends à ne pas vous suivre.

    Les rares fois où la qualité du PNG8 avec transparence binaire n’est pas satisfaisant, il est possible de faire des petits compromis avec le graphiste pour trouver une solution. Ca peut par exemple fusionner l’image transparente avec le fond d’en dessous pour avoir une seule image non transparente.

    Dans l’ensemble on peut avoir un site joli *et* rapide. Là où je bosse on a parfois des graphistes très radicaux, mais je n’ai jamais eu aucun conflit entre perf et graphisme. Dans les très rares cas où le PNG8 n’allait pas, on a toujours trouvé une solution sans avoir à mettre des filtres Internet Explorer.

  4. Mon propos plus général était : les performances oui ! Mais c’est un des multiples paramètres à prendre en compte… sans pour autant devoir sacrifier les autres quel qu’en soit le prix. C’est toujours (ou souvent) une question de compromis.

    Tout dépendra donc de la maquette en effet… j’ai pas mal de contre-exemples en stock (de très grandes images en PNG 24). Mais je te suis tout à fait sur la démarche globale cependant !

  5. Le problème avec le « la démarche globale est bonne mais les situations sont à évaluer au cas par cas » c’est que tout le monde croit toujours être dans le cas exceptionnel. En des années de métiers je n’ai jamais eu à faire un filter, et j’ai travaillé sur des sites plus gros que pas mal de gens, avec des graphistes plus intégristes que la plupart n’en rencontreront.

    Que les gens se disent bien que s’ils croient être dans l’exception (qui existe, on est d’accord), il y a 98% de chances qu’ils se trompent.

    Puis des grosses images PNG24 avec transparence …, je suis curieux, très curieux.

  6. Les deux premiers commentaires ci-dessus (Pierre et la réponse d’Eric) m’avaient bien plu, parce que je les trouve tous les deux justes, même s’ils ne défendent pas le même point de vue. Oui, la compatibilité avec IE6 est capitale aujourd’hui, mais oui aussi à l’utilisation des technos qui tirent le web vers le haut et vers l’avenir.

    Pour éviter le filter, j’aurais tendance à supprimer une ombre portée sous IE6 et à passer à du PNG8 uniquement sous ce navigateur : c’est moins beau, mais ça n’altère pas les perfs, ça « degrade gracefully ». Et si en plus ça peut « punir » l’utilisateur qui tourne encore sous IE6, je ne vais pas cracher sur ce petit plaisir mesquin…

  7. Avoir recours à du PNG8 me semble totalement inconcevable pour nos amis les directeurs artistiques.

    Sinon pour le cache, tout dépend du développeur, l’utilisation de PNGHack (http://png-hack.googlecode.com) par exemple démontre bien que les images sont accédé à partir du cache.

    Je plussois le dernier point de changer filtre en _filtre.

  8. J’ai discuté off-line avec 20cent vis à vis de ses exemples. On a trouvé une solution : aucune perte de perf, deux heures de travail pour tout le site (parce que ça n’a pas été implémenté depuis le début, sinon c’est virtuellement nul comme charge de travail), et on gagne même du poids et des requêtes HTTP en moins.

    Yves les cas où la transparence est requise est très fréquemment limitée aux icônes et images de graphisme, souvent petites. La différence PNG8 / PNG24 est quasiment invisible assez souvent dans ce cas.
    Je peux t’assurer que dans les équipes où j’ai travaillé on a toujours trouvé des solutions ou au pire des compromis, acceptés même pas les graphistes les plus intransigeants.

    Sinon pour PNGHack l’image est bien venant du cache. Par contre le filtre est réappliqué à chaque fois, avec une charge de CPU non négligeable .. sans compter celle du script PNGhack lui même.

    Tentez d’imposer un aller-retour avec votre graphiste / directeur artistique. Insistez pour passer 30 minutes à trouver une solution ou un compromis. Oui, j’insiste sur la notion de compromis parce que lui aussi doit faire un pas en avant pour une solution commune. Sérieusement sur ce sujet précis je n’ai jamais vu d’échec.

    il faut juste insister et remonter la chose jusqu’à ce que cette petite réunion se fasse. C’est votre responsabilité en tant que dev web / intégrateur. Si vous ne le faîtes pas c’est que vous considérez votre travail comme de la pure exécution qu’on pourrait remplacer par un bon logiciel. Il y quelques années j’avais écrit http://www.cybercodeur.net/weblog/articles/art_20040606.php mais c’est toujours d’actualité.

    Mais surtout cette réunion peut durer 30 minutes la première fois. Elle peut nécessiter de faire pression pendant des semaines pour que le graphiste accepte de dire autre chose que « c’est moi qui décide toi tu fais avec » en oubliant que vous aussi vous avez une responsabilité d’autres aspects de qualité du site.
    Une fois que c’est fait les suivantes prendront moins de cinq minutes parce que les solutions sont souvent simples et les compromis ne sont pas si durs à avaler pour peu qu’on y réfléchisse sans à priori ni lutte d’influence.

    Si vous ne faites rien, alors rien ne sera fait. Mais si vous souhaitez faire quelque chose, je peux vous garantir qu’il y a des solutions possibles derrière et qu’elles ne vont pas mettre en l’air le résultat graphique ou le planning du projet. Il ne s’agit que de volonté, pas d’obstacles techniques ; et cette volonté dont je parle c’est la votre, pas celle du graphiste.

  9. Il faut ajouter la couleur du background sur les png et ne pas laisser la couleur transparent quand c’est inutile.
    Moi j’utilise « !important » pour remplacer les png transparent par du gif.
    C’est moins joli mais mieux que filter.

Les commentaires sont fermés.