Souvent ce n’est plus possible pour ceux qui s’occupent des performances mais si vous avez la chance d’avoir la main sur celui qui joue avec Photoshop et qu’il semble assez receptif à vos demandes, lisez vite l’article de Smashing magazine sur l’optimisation PNG, puis celui sur l’optimisation JPEG.

Vous y trouverez comment améliorer certaines zones, comment diminuer le nombre de couleurs tout en gardant une qualité très intéressante, comment supprimer les informations sur les pixels transparents peut améliorer la compression, ou pourquoi un jpeg à qualité 51% est infiniment mieux qu’un jpeg à qualité 49%.

Votre graphiste connait déjà tout ça, mais un rappel tel que celui ci permet de faire en sorte qu’il utilise. Vous vous aurez en tout cas dans les mains les armes pour le challenger sur le poids des images. Il vous restera juste à passer le résultat par OptiPNG si c’est encore nécessaire.

J’aime d’ailleurs beaucoup l’idée de supprimer les informations inutiles dans les pixels transparents pour améliorer la compression. Je suis étonné que ce ne soit pas fait par défaut lors de l’export « pour le web » de Photoshop. Je ne crois pas que OptiPNG ou PngCrush s’en occupent non plus, et c’est malheureux. Je vous propose donc de récupérer un filtre Photoshop pour faire ça automatiquement, ou plutôt le faire faire par votre graphiste.

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.