+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : url des images dans le css = economie de bande passante ou pas? (/showthread.php?tid=1375)
url des images dans le css = economie de bande passante ou pas? - php_addict - 09-10-2010
bonjour
je vois pas mal de site faire ceci:
<img class="aaa" src="vide.gif">
<img class="bbb" src="vide.gif">
<img class="ccc" src="vide.gif">
img.aaa
{
height: 20px;
width: 20px;
background-image: url(images/aaa.gif); background-repeat:no-repeat;
}
img.bbb
{
height: 20px;
width: 20px;
background-image: url(images/bbb.gif); background-repeat:no-repeat;
}
img.ccc
{
height: 20px;
width: 20px;
background-image: url(images/ccc.gif); background-repeat:no-repeat;
}
autrement dit dans le code html les images pointent toutes vers une image vide de 1x1 pixel et transparente mais dans le css il y a le lien vers le fichier image.
en quoi est ce utile?
économiser des requêtes http? de la bande passante? et si oui pourquoi?
et surtout est ce valide comme utilisation du css ?
bonne fin de journée
RE: url des images dans le css = economie de bande passante ou pas? - gameprog2 - 09-10-2010
Je ne crois pas que le css permette de faire ça...
Les pros te répondront mais moi je ne pense pas
Le css ne permet pas de changer le src d'une image, essaie le javascript.
RE: url des images dans le css = economie de bande passante ou pas? - Globe - 09-10-2010
Techniquement y'a rien de mal à faire ça. Si tu nous filais des liens ce serait plus simple de trouver l'explication.
Comme ça à froid je dirais que c'est probablement pour utiliser la propriété hover de CSS tout en affichant un lien. Il me semble que pour faire un hover sur un <img src="" alt="" /> on doit utiliser du JS alors qu'en CSS tu affiches une image vide pour faire le lien (on ne peut pas appliquer un lien à un div enfin il me semble) et tu t'en sers de la classe pour l'image ce qui te permet d'avoir hover sur le div et le lien en même temps. J'ai du mal à m'exprimer donc dis moi si ça se comprend pas =D
EDIT : Pour illustrer mon propos :
<a href="monlien.html"> <img src="vide.png" alt="" class="a" /> </a>}
.a {
background: url(image_a.jpg) no-repeat;
height: 20px;
width: 20px;
}
.a:hover {
background: url(image_a_hover.jpg) no-repeat;
}RE: url des images dans le css = economie de bande passante ou pas? - Anthor - 09-10-2010
La comme ça à chaud, je n'y vois aucun intérêt, la bande passante consommé est la même..
RE: url des images dans le css = economie de bande passante ou pas? - Sephi-Chan - 09-10-2010
Il ne faut pas faire ce genre de chose. Si on a besoin d'une image, on met une image avec une vraie source.
Si ces une image de fond, on utilise CSS.
Parfois, on peut utiliser du balisage HTML avec du CSS pour les images, ça s'appelle des CSS sprites et dans ce cas, plusieurs éléments sont regroupés sur une seule image afin d'économiser beaucoup de bande passante et surtout : n'imposer qu'une seule requête HTTP pour charger l'image qui en regroupe plusieurs (plutôt qu'une requête pour chaque image).
Par exemple, j'ai proposé cette technique à Argorate pour son jeu dévotion. J'ai mis une archive en téléchargement qui contient tout le nécessaire pour comprendre le fonctionnement et l'intérêt dans l'un de mes messages.
Sephi-Chan
RE: url des images dans le css = economie de bande passante ou pas? - Globe - 09-10-2010
Merci pour ce lien, je savais pas qu'on pouvait définir les <a> comme block.
RE: url des images dans le css = economie de bande passante ou pas? - php_addict - 09-10-2010
(09-10-2010, 06:42 PM)gameprog2 a écrit : Je ne crois pas que le css permette de faire ça...
ben si...je ne dis pas que des bétises...si tu avais lu mon post il est ecrit: "je vois pas mal de site faire ceci" et en plus ca marche ...
(09-10-2010, 06:57 PM)Globe a écrit : Techniquement y'a rien de mal à faire ça. Si tu nous filais des liens ce serait plus simple de trouver l'explication.
toutes les images de travian
(09-10-2010, 07:11 PM)Anthor a écrit : La comme ça à chaud, je n'y vois aucun intérêt, la bande passante consommé est la même..
ah ba non je pense au contraire que de faire <img class="aaa" src="vide.gif"> consomme moins que <img src="ton_image.gif" width="100" height="100" >
(09-10-2010, 07:13 PM)Sephi-Chan a écrit : Il ne faut pas faire ce genre de chose. Si on a besoin d'une image, on met une image avec une vraie source.
Si ces une image de fond, on utilise CSS.
Parfois, on peut utiliser du balisage HTML avec du CSS pour les images, ça s'appelle des CSS sprites
ah oui les sprites...je les utilises parfois...donc ca faits moins de requetes html mais pourquoi tu ne conseille pas ce genre de chose alors ?
donc si j'ai bien compris:
- cela semble valide
- moins de code source (à cause du css) (donc moin de bande passante)
- moins de requete http donc plus rapide (si l'on fait des sprites)
mais alors pourquoi s'en privé ?
évidement je pense le faire mais sur toutes mes mini images et icônes qui sont extrêmement récurrents
y voyez vous tout de même des désavantages ?
encore merci de vos avis si précieux
RE: url des images dans le css = economie de bande passante ou pas? - Ter Rowan - 09-10-2010
la j ai regardé leur code (en haut, les drapeaux)
ils font bien le système de sprites (une seule image, avec tous les drapeaux)
mais je comprends pas non plus pourquoi ils le mettent en back ground et pas comme source de l'image directement
(sachant qu'ils utilisent le javascript pour changer l'opacité lors du survol, y a pas l'utilisation de a:hover a priori)
RE: url des images dans le css = economie de bande passante ou pas? - Gwym - 09-10-2010
(09-10-2010, 07:59 PM)php_addict a écrit : ah ba non je pense au contraire que de faire <img class="aaa" src="vide.gif"> consomme moins que <img src="ton_image.gif" width="100" height="100" >
Pourquoi ça consommerait moins ? Au contraire, dans le premier cas il faut charger n images et une image inutile de plus : vide.gif, dans l'autre une seule !
Au vu du reste de leur page, je ne m'en inspirerais pas spécialement, mélange de style en dur dans le html en plus du css, lien générés en javascript donc inaccessibles si désactivé, mise en page l'aide de tableaux...
J'avoue que je ne vois pas trop l'utilité de prendre un élément plus "lourd" (img) pour l'utiliser comme un simple div + css...
RE: url des images dans le css = economie de bande passante ou pas? - php_addict - 09-10-2010
(09-10-2010, 09:33 PM)Gwym a écrit :(09-10-2010, 07:59 PM)php_addict a écrit : ah ba non je pense au contraire que de faire <img class="aaa" src="vide.gif"> consomme moins que <img src="ton_image.gif" width="100" height="100" >
Pourquoi ça consommerait moins ? Au contraire, dans le premier cas il faut charger n images et une image inutile de plus : vide.gif, dans l'autre une seule !
et bein la 1ere chaine est plus courte que la 1ere et le css est mit en cache par le navigateur...voyons
(09-10-2010, 09:33 PM)Gwym a écrit : Au vu du reste de leur page, je ne m'en inspirerais pas spécialement, mélange de style en dur dans le html en plus du css, lien générés en javascript donc inaccessibles si désactivé, mise en page l'aide de tableaux...
euh il est où le javascript??? il n'y a pas de JS dans ce quoi dont je parles