Discussion :

[MichaelREMY]

Bonjour,

en regardant les fichiers sources d'une page amazon, j'ai décovert qu'une partie de la charte graphique était dans un seul fichier image :
https://images-eu.ssl-images-amazon....146303974_.png



quelle est la technique qui permet en CSS de dire que pour telle div, je veux la partie graphique coordonnée allant du pixel 5,5 à 45,45 (x,y) pour mettre en background d'un div ou par exemple pour mettre sur un bouton ou autre élément html ?

Je suppose que cette technique est récente ?

merci de votre renseignement.

[mathieu]

voilà des exemples d'utilisation de cette technique :
http://wellstyled.com/singlelang.php...rollovers.html
http://codepen.io/anon/pen/CwDBm

[Invité]

Bonjour,

ces images s'appellent des "sprite",
et la technique date du grand-père de Mathusalem.

L'avantage est de n'avoir qu'une seule image à charger (car moins lourde que la somme des images isolées).

: "sprite"

• Création facile et utile de Sprites CSS

[MichaelREMY]

merci.
je connais la technique des sprites, je l'utilisais déjà sur amstrad cpc et amiga.... old times...
par contre, sur les vieilles machines comme sur les récentes, ça a un inconvénient : charge mémoire côté client (le navigateur utilise plus de mémoire) .
Certe le chargement est plus rapide, mais du coup pour charger un icone de 10x10, tu occupes la mémoire avec 5000x1000 cellules par exemple....

[mathieu]

par contre, sur les vieilles machines comme sur les récentes, ça a un inconvénient : charge mémoire côté client (le navigateur utilise plus de mémoire) .
Certe le chargement est plus rapide, mais du coup pour charger un icone de 10x10, tu occupes la mémoire avec 5000x1000 cellules par exemple....

étant données les configurations d'ordinateurs moyennes qu'il y a actuellement, la question se pose de moins en moins pour un site grand public.
Cela reste une préoccupation si on fait par exemple un site qui cible une population spéciale qui possède une ancienne configuration.

[Invité]

...quelle est la technique qui permet en CSS de dire que pour telle div, je veux la partie graphique ...

...je connais la technique des sprites, ...

Il faudrait savoir...

C'est quoi alors, la question ?

Certe le chargement est plus rapide, mais du coup pour charger un icone de 10x10, tu occupes la mémoire avec 5000x1000 cellules par exemple....

L'intérêt n'est pas de charger "une" icone, mais "toutes" les icones nécessaires en une seule fois.
C'est à toi de mettre juste ce qui est nécessaire/utile dans le sprite.

Donc, je ne vois toujours pas où tu veux en venir...