Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Sprites, CSS et téléchargement image

17 réponses
Avatar
Pierre Goiffon
Bonjour,

Je suis en train de travailler de manière approfondi à améliorer les
perf des écrans du produit sur lequel je travail. Après avoir concaténé
les CSS autant que possible, je m'attaque à mettre en sprites les images.

Une question m'est venue : si j'ai une css générique, appelée sur toutes
les pages, qui contient des appels aux images sprites_A.png et
sprites_B.png, que va-t-il se passer (téléchargement des images par le
navigateur) :
- sur une page qui n'utilise que des sélecteurs utilisant sprites_A
- lorsque l'on n'a que des sélecteurs utilisant sprites_B
- une page qui mélange des appels à sprites_A et sprites_B
- une page qui ne contient que des appels à sprites_A, mais dans
laquelle on va charger ensuite en Ajax du html contenant des appels à
sprites_B

Je n'ai pas vraiment trouvé de support pour avoir une idée des
comportements... et j'imagine qu'ils vont varier de navigateur à
navigateur ?

7 réponses

1 2
Avatar
Pierre Goiffon
On 05/07/2011 16:24, SAM wrote:
Je suis en train de travailler de manière approfondi à améliorer les
perf des écrans du produit sur lequel je travail. Après avoir concaténé
les CSS autant que possible, je m'attaque à mettre en sprites les images.



keskecé ?

Ha!? mais c'est une image de x images ! que l'on déplace en background



Oui, exactement !

à part le problème de son chargement (assez lourd) au 1er appel
à mon avis : que du bonheur !



C'est bien le prb :)
Car après inventaire précis des images existantes (un peu moins d'une
centaine, dans des tailles très variées) et de leurs appels, je me
posais la question du découpage. Evidemment, faire une seule image de
sprites aurait été un peu crétin ! Pour les usages mais aussi pour des
prb techniques (tailles et repeat-x en particulier).

Mais quasiment tout est centralisé dans une seule CSS appelée de partout.

J'avais donc cette question sur des images appelée uniquement dans
certains écrans de l'application, en me demandant si je faisais une
image de sprites dédiée s'il fallait également créer une css dédiée.

Il y a bcp de problématique derrière, car il faut penser également à la
maintenance (et avoir toutes les icones au même endroit par exemple !)...
Avatar
Pierre Goiffon
On 06/07/2011 14:31, Olivier Masson wrote:
Par ailleurs, pour l'optimisation web, tu peux d'inspirer de
HTML5boilerplate, que j'utilise en prod depuis 2 projets.



Ca a pas mal grandit depuis la première fois où j'y suis allé !
Malheureusement il n'y a pas possibilité pour moi d'incorporer
facilement tout celà, et même des bouts.

Enfin, il y a quand même énormément de doc sur les perf web, ça fait
plaisir ! En plus de l'indispensable site de Yahoo dédié au sujet
(http://developer.yahoo.com/performance/) je me suis appuyé sur
l'excellent http://performance.survol.fr/ (mais sniif, qui commence à
dater) et http://www.websiteoptimization.com/, et beaucoup de recherches
google :)
Avatar
SAM
Le 08/07/11 15:24, Pierre Goiffon a écrit :
On 05/07/2011 16:24, SAM wrote:
je m'attaque à mettre en sprites les images.



à mon avis : que du bonheur !



C'est bien le prb :)
Car après inventaire précis des images existantes (un peu moins d'une
centaine, dans des tailles très variées) et de leurs appels, je me
posais la question du découpage. Evidemment, faire une seule image de
sprites aurait été un peu crétin !



heu ... google a une image avec des tas d'icônes de tailles variées
<http://v3.x.mappy.com/static/images/6bea5d3cd4720d8bc99929a351605f1c.png?iU4>
il suffit que les zones d'affichages soient aux dimensions des icônes y
requises.

On nous assure qque part que le poids total des images n'est guère
différent du poids de l'image les réunissant, le blanc nécessaire à la
mise en forme de cette sprite ne comptant pas (beaucoup).

Pour les usages mais aussi pour des
prb techniques (tailles et repeat-x en particulier).



Ha! du repeat-x avec une image spritée ... je ne sais pas faire
c'est possible ?
(en HTML 5 ... ou 6 ?)

Mais quasiment tout est centralisé dans une seule CSS appelée de partout.

J'avais donc cette question sur des images appelée uniquement dans
certains écrans de l'application, en me demandant si je faisais une
image de sprites dédiée s'il fallait également créer une css dédiée.



Ma foi ...
avec une css dédiée cela doit assurer de moins encombrer,
ça doit aussi faciliter la création des règles

Mais ... à mon idée :
des règles des feuilles de styles ne seront chargées au load que les
images utiles à la page.
Donc à part la lourdeur du chargement des lignes du fichier css, qu'il y
ait dedans 1 ou 1000 lignes désignant x images (de background), ne
seront effectivement chargées ou contrôlées que les images utiles à
l'affichage *normal* de la page appelant ce fichier css.
Le fichier css, surtout s'il est compacté, ne doit pas peser bp dans
l'ensemble de la page, il doit pouvoir tout réunir sans poser de tracas.
Le truc des fichiers séparés peut être avantageux pour l'humain qui s'y
colle et probablement la maintenance mais guère pour le fonctionnement
du site ou du serveur.

Il y a bcp de problématique derrière, car il faut penser également à la
maintenance (et avoir toutes les icones au même endroit par exemple !)...



oui ... bon .. à chacun son dada, hein ?
si je préfère avoir les icônes arrondies dans le dossier /smoth/ et
celles plutôt carrées dans celui /rect/ et celles en étoiles dans
/stars/ ... ;-)
d'avoir les icônes au même endroit doit faciliter leur recherche humaine
sinon pour le serveur leur emplacement ne doit pas beaucoup influencer
sur sa célérité, non ?

Maintenant, il est certain que si les icônes sont toutes réunies sur la
même image ça doit en faciliter les recherches puisque reduites à une.

Se poser la question du devenir de cette image quand on ajoutera de
nvelles icones ou les modifiera en tailles.

Pour la maintenance des FdS, penser à LESS dont Olivier Masson nous a
vanté les bienfaits
js : <http://lesscss.org/>
app : <http://incident57.com/less/>
... encore d'autres instructions/fonctions à apprendre :-/

Curieusement j'ai l'impression que le rollover est plus réactif avec 2
images (si déjà en cache)
qu'avec une seule image glissée
(essai avec images 560ko/1120px/655px ou double)

--
Stéphane Moriaux avec/with iMac-intel
Avatar
Olivier Masson
Le 08/07/2011 15:21, Pierre Goiffon a écrit :

Firebug est pour Firefox... Et comme je n'ai pas trouvé de référence sur



Tu as un équivalent pour Chrome (même comportement que Safari a priori),
Opera a aussi des outils. Et IE... 10. Peut-être 9 aussi.
Et tu peux toujours utiliser un sniffer réseau (Ethereal) pour regarder
ce qui est lu. La lecture n'est pas aisée mais tu sais ce que tu
cherches (le nom de ton image) donc ça facilite grandement.
Avatar
Pierre Goiffon
On 08/07/2011 19:31, SAM wrote:
Car après inventaire précis des images existantes (un peu moins d'une
centaine, dans des tailles très variées) et de leurs appels, je me
posais la question du découpage. Evidemment, faire une seule image de
sprites aurait été un peu crétin !



heu ... google a une image avec des tas d'icônes de tailles variées
<http://v3.x.mappy.com/static/images/6bea5d3cd4720d8bc99929a351605f1c.png?iU4>



Oui en effet il est tout à fait possible de mixer des images de tailles
différentes, je l'ai d'ailleurs fait ! Mais la taille des images n'est
pas le seul argument à prendre en compte : il faut voir la fréquence
d'appel et sur quels écrans, les règles de cache que l'on va appliquer,
la fréquence de maj, etc. etc.

C'est tout de même rare qu'il soit pertinent de charger toutes les
images d'une application web en même temps, certains écrans sont
forcément très spécifiques, et puis des composants sont génériques, etc etc.

Ha! du repeat-x avec une image spritée ... je ne sais pas faire
c'est possible ?



Pour le repeat-x, il suffit de répéter ses images les unes au-dessus des
autres et que le conteneur auquel on applique l'image ait bien une
hauteur fixe. Et inversement pour le repeat-y.

On peut aussi très bien mettre en place le système des sprites sur la
technique des sliding doors.

Mais ... à mon idée :
des règles des feuilles de styles ne seront chargées au load que les
images utiles à la page.



Ca parait logique, mais je n'ai trouvé aucun document me permettant
d'être sûr que c'est bien le cas. Et comme ça n'est pas écrit noir sur
blanc dans la recommandation ça me laisse très très dubitatif sur le
fonctionnement adopté par les navigateurs !

Pour la maintenance des FdS, penser à LESS dont Olivier Masson nous a
vanté les bienfaits
js : <http://lesscss.org/>
app : <http://incident57.com/less/>
... encore d'autres instructions/fonctions à apprendre :-/



Oui, j'avais vu passer sur le groupe le lien vers ce framework, mais ça
me parait dans mon cas trop lourd à adopter ! Mais en effet il faut le
garder en tête car dans certains cas ça pourrait rendre de fiers services !

Curieusement j'ai l'impression que le rollover est plus réactif avec 2
images (si déjà en cache)
qu'avec une seule image glissée
(essai avec images 560ko/1120px/655px ou double)



Ha ? Surprenant !
Ici nous avons commencé la mise en sprites sur les images concernées par
des rollover, nous n'avons jamais constaté de différence significative ?
Mais ce sont pour des images de 16*16px ou 32*32px max...
Avatar
Pierre Goiffon
On 09/07/2011 20:34, Olivier Masson wrote:
Firebug est pour Firefox... Et comme je n'ai pas trouvé de référence sur



Tu as un équivalent pour Chrome (même comportement que Safari a priori),
Opera a aussi des outils. Et IE... 10. Peut-être 9 aussi.
Et tu peux toujours utiliser un sniffer réseau (Ethereal) pour regarder
ce qui est lu. La lecture n'est pas aisée mais tu sais ce que tu
cherches (le nom de ton image) donc ça facilite grandement.



En effet c'est faisable, mais le coût me parait déraisonnable.
Avatar
Olivier Masson
Le 12/07/2011 15:00, Pierre Goiffon a écrit :

Pour le repeat-x, il suffit de répéter ses images les unes au-dessus des
autres et que le conteneur auquel on applique l'image ait bien une
hauteur fixe. Et inversement pour le repeat-y.




Et en diagonale http://www.aaronbarker.net/2010/07/diagonal-sprites/
1 2