Charger une image png8 uniquement pour ie6, votre avis ?

Bonjour à tous

Vu qu'il n'y a pas vraiment de partie "performances" je poste ici, n'hésitez pas à déplacer à un endroit plus approprié du forum. D'entrée de jeu, ce poste n'a pas pour but de partir en débat "faut-il encore optimiser pour IE6?", je ne cherche pas la perfection au pixel près pour ie6, juste la lisibilité du site, et parfois le "gros bloc gris" généré en raison de la non prise en compte du png24 peut rendre le site illisible voir cacher du contenu.

On le sait tous, IE6 ne gère pas la transparence png24. Donc mon idée du moment pour contrer ce petit problème est d'utiliser la technique de Paul Irish qui consiste à donner une classe au body (ou html) en fonction du navigateur. Du coup, je crée des images png8 spécial IE6 (souvent avec le fond aplati par exemple pour un rendu visuel potable) et je les utilise en css pour remplacer les images pour les autres navigateurs, ce qui nous donne quelque chose du genre

.monelement{
background:url('jolieimage.png') no-repeat;
}
.ie6 .monelement{
background:url('jolieimage_png8.png') no-repeat;
}

Le navigateur classique va utiliser la première image, et ie6 utilisera la seconde. L'avantage : plus besoin de javascript pour émuler la transparence, mais pas de transparence progressive comme en png24.

Ne m'y connaissant pas trop en performances je me pose donc la question suivante :
en utilisant cette technique, ie6 va-t-il charger la première image, puis la deuxième ou juste la deuxième image? Est-ce qu'on va perdre beaucoup d'un point de vue performances ?

Le coté négatif de cette technique,c'est qu'il faut prévoir deux images. Ceci veut également dire que si un jour on change une image, il faut penser à changer la deuxième aussi. Donc un peu plus de lignes de code / de boulot pour le designer. Du coup le gain "non utilisation de javascript" vaut-il le coup selon vous ?

Pourquoi ne pas inclure ton png8 dans une CSS specifique a ie6 ?

Sinon je ne pense pas que ie6 va charger les deux images, pour un attribut, une seule classe est prise en compte... A tester.

Pour ma part, si le png ne pose pas de problème de lisibilité sur ie6 je ne m'encombre ni de 2eme image, et encore moins de javascript !
Modifié par spiral123 (16 Mar 2011 - 17:06)

Parce que je trouve la technique de Paul Irish plus pratique, elle permet d'avoir sous les yeux les styles pour tout le document et les styles pour ie dans une même feuille de style, cela revient au même qu'une feuille de style conditionnelle au final (il me semble) sans les requêtes https en plus (cf article cité plus haut).
En plus il me semble que dans le cas d'une feuille de style spécifique IE6 la feuille normale est chargée, puis la feuille spéciale. Je me demandais du coup si pour la technique décrite pas Paul Irish les deux images étaient chargées pour IE, la deuxième écrasant la première, ou si justement seule la deuxième était chargée par IE.

(dans mon cas il posait problème, le png étant "par dessus" une div en z-index tout le texte derrière était caché)
Modifié par InpIxelItrust (16 Mar 2011 - 17:19)

J'ai commis ceci l'année dernière: Obtenir la transparence PNG avec Internet Explorer 6.
La technique discutée est la troisième présentée dans l'article (les deux premières étant aussi des techniques de dégradation gracieuse).

Pour ma part j'évite en général les scripts JS qui automatisent certains correctifs pour IE à coup de filtres DirectX (propriété filter) ou de VML. Limites des scripts, bugs dans de nombreux cas, déclenchement du HasLayout qui vient perturber les comportements des éléments...
Donc je recommande cette solution (un PNG-8 pour IE6), ou mieux encore l'utilisation d'un PNG-8 avec couleurs RGBA bien fichu.

Et je sais que c'est hors-sujet, mais IE9 vient de sortir. Le support de trois versions majeures de ce navigateur, ça fait déjà beaucoup.
Modifié par fvsch (16 Mar 2011 - 18:57)

Merci Florent pour ta réponse et l'article. J'évite également aussi les scripts et autres direct X, la seule fois où j'avais essayé j'ai réussit à faire planter le navigateur avec un temps de chargement trop long. Autant dire que ça ne m'a pas donné envie de continuer dans cette voie.

Pour le hors sujet, oui, mais il y a des moments où on n'a pas le choix (notamment quand c'est pour une plateforme destinée à des utilisateurs en entreprise qui sont sous... windows xp, yeah ^^) Donc pas de IE9 il me semble (à moins d'avoir loupé un récent chapitre?).
Comme dit plus haut, je ne cherche pas la perfection au pixel près, mais bon, un png24 avec un gros truc gris qui couvre la navigation (gros z-index) c'est pas super userfriendly, même pour ie6, d'où l'idée de le remplacer par un png8 et cette technique m'avait l'air d'être la plus simple.
Modifié par InpIxelItrust (16 Mar 2011 - 19:25)

Hello,
Juste pour confirmer, j'ai fait le test, et effectivement une seule image est chargée! Pas de problème de perf donc. Le "C" de CSS fait bien son boulot

Si tu ne connais pas la technique, je te conseille de regarder aussi du côté du PNG-8 avec couleurs RGBA. Ça permet de faire des trucs sympa et d'optimiser les images (le PNG-32, c'est parfois très lourd). Pour des logiciels qui gèrent ce format, regarder du côté de Fireworks ou de ImageAlpha.
Le principe c'est que les pixels dans une couleur translucide seront invisibles sous IE6. Pour certaines images ça peut donner des trucs corrects. Et bien sûr le format gagne à être connu même pour les autres navigateurs (optimisation des perfs).

InpIxelItrust a écrit :
mais il y a des moments où on n'a pas le choix (notamment quand c'est pour une plateforme destinée à des utilisateurs en entreprise qui sont sous... windows xp, yeah ^^) Donc pas de IE9 il me semble (à moins d'avoir loupé un récent chapitre?).

Pas de IE9 sous XP. Mais il y a IE7 et IE8 disponibles sur cet OS.