url des images dans le css = economie de bande passante ou pas?

[php_addict]

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

[gameprog2]

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.

[Globe]

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;

}

[Anthor]

La comme ça à chaud, je n'y vois aucun intérêt, la bande passante consommé est la même..

[Sephi-Chan]

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

[Globe]

Merci pour ce lien, je savais pas qu'on pouvait définir les <a> comme block.

[php_addict]

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 ...

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

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" >

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

[Ter Rowan]

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)

[Gwym]

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...

[php_addict]

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

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