Inclure les images semi-transparentes dans les sprites CSS ?

[Argorate]

Bonjour,

je voulais avoir votre avis sur le sujet, je tente d'optimiser un peu ma v0.2 en créant plus de sprite css, et ils se trouvent que pour mes terrains par exemple, j'ai une image de "brouillard de guerre" qui est en semi transparence.

Le problème c'est que la semi transparence étant gérer uniquement en png 24, cela m'obligerais a rendre tout le sprite au format png24 qui comme vous le savez est tres lourd.

Donc que me conseillez vous? Nous sommes d'accord qu'il ne faut pas mélanger les semi transparent avec les autres images? Faut t-il faire un sprite d'image semi transparente a part entière?

Comment gérez vous la chose?


merci.

EDIT: en plus j'ai un autre problème, le fait de mettre tout mes terrains sur la même image, je dépasse les 256 couleurs, du coup si je prend autre chose que du png 24 je perd en qualité de manière visible Donc au final le sprite est plus lourd que la somme des poids de chaque image prit individuellement, quel solution dans ce cas?

[Sephi-Chan]

Le problème n'est pas le poids, c'est la quantité de requêtes HTTP.


Sephi-Chan

[Argorate]

Si tu te souviens bien de hier, j'ai les deux problématique a prendre en compte en l'occurrence...

D'ailleurs, j'ai un autre problème pour les bannière des partenaires. Autant on peut mettre <a><img></a>, mais si je fais un sprite, je suis obligé de passé par un div, et je ne peux pas l'encadrer d'un lien, donc ça m'embête ça aussi?

Des solutions a tout ça? ^^

[Sephi-Chan]

Lesquelles ?

Pour tes bannières, tu peux très simplement faire :

<a href="…" class="ad nom-du-partenaire"><span>Nom du partenaire</span></a>

Avec le CSS suivant :

.ad {

  display: block;

}

.ad span {

  display: block;

  text-indent: -10000px;

}



.nom-du-partenaire {

  width: <largeur de la bannière dudit partenaire>px;

  height: <hauteur de la bannière dudit partenaire>px;

  background: url('ads-sprite.png') Xpx Ypx;

}

Sephi-Chan

[php_addict]

D'ailleurs, j'ai un autre problème pour les bannière des partenaires.

le soucis dans ce cas va être les bannières en gif animé...

[Sephi-Chan]

On peut mettre des gif animés en background-image.

Tu peux séparer tes images en plusieurs sprites. Tu mets ceux qui ont besoin de transparence sur un sprite enregistré en PNG 24 bits, et les autres sont sur du gif ou du PNG 16 bits.

Mais de toute façon, c'est de la foutaise ces images… Ça ne sert à rien, si ce n'est ajouter des tas d'images clignotantes plus moches les unes que les autres… Ça n'apporte rien à ton référencement puisque tous les jeux amateurs les mettent (donc les liens sont sans valeur).



Sexy.

Pour le fun, j'ai pris les 5 premiers jeux amateurs sur Tourdejeu (en excluant les jeux par forum), et sur chacun d'eux je vois ces horribles images : Les Terres de Saïhan, Droits Divins, Spice Conquest, Syfaria. Le seul qui n'en avait pas est Stellaris.


Sephi-Chan

[Argorate]

Ne t'inquiète pas, j'ai dégagé la plus part de ces lien sur la v0.2 et j'ai transformer les gif en png pour plus que ça clignote, donc ça règles la question.
(Idem pour la config)

Sinon reste mon probleme que le sprite de tout mes terrain reste plus de 2 fois plus lourd que les images individuel en png 24. et si je met en png 8, ça perd en qualité car je dépasse les 256 couleurs, donc je ne sais pas trop si c'est rentable?

[Sephi-Chan]

Même si j'ai du mal à concevoir que ton sprite pèse 2 fois plus lourd que toutes les images réunies, je pense que ce n'est pas un problème. Les sprites sont une solution clairement éprouvée : le gain en vitesse perçu est réel.

Quel est le poids de ton sprite, actuellement ? Avec combien d'images embarquées ?


Sephi-Chan

[Argorate]

38 images (158ko, format GIF), vu que de base elle sont en gif, le fait de passé en png 24 fait que le poids est presque deux fois plus lourd: 211ko le png 24 des 38 images en une.

[Blarg]

Passer de 158ko à 211ko de téléchargement, ça me semble tout à fait négligeable. Mais économiser 37 requêtes, ça c'est intéressant!