22-09-2008, 12:18 PM
L'utilisation massive d'image n'est pas du tout un problème si on fait ça intelligemment.
Je te propose de jeter un œil au site Mozilla.org - Modules Firefox qui est un excellent exemple d'utilisation intelligente de sprites CSS, très bien expliqués sur Pompage.net - Sprites CSS : Meurs, découpe d’images, meurs !.
Le site entier utilise (presque) une seule image de fond tous les éléments (qui ont une image de fond, évidemment), il suffit ensuite de jouer sur la propriété background-position afin d'obtenir le résultat escompté.
Le gain en terme de performance est énorme puisqu'il réduit énormément le nombre de transferts HTTP nécessaire au chargement des éléments de la page (or, un navigateur n'en effectue que deux simultanément), puis le mets en cache. De plus, une grosse image est moins lourde que plusieurs petites (16.6 Ko pour une image de 1000 * 2000 px), donc le gain se fait vraiment à tous les niveaux.
Le résultat est évident pour l'utilisateur : la page se charge très vite et en une seule fois, les effets au survols sont instantanés dès le premier passage de la souris (il n'y a pas de deuxième image de survol à charger) et cette unique image est mise en cache immédiatement.
Sephi-Chan
Je te propose de jeter un œil au site Mozilla.org - Modules Firefox qui est un excellent exemple d'utilisation intelligente de sprites CSS, très bien expliqués sur Pompage.net - Sprites CSS : Meurs, découpe d’images, meurs !.
Le site entier utilise (presque) une seule image de fond tous les éléments (qui ont une image de fond, évidemment), il suffit ensuite de jouer sur la propriété background-position afin d'obtenir le résultat escompté.
Le gain en terme de performance est énorme puisqu'il réduit énormément le nombre de transferts HTTP nécessaire au chargement des éléments de la page (or, un navigateur n'en effectue que deux simultanément), puis le mets en cache. De plus, une grosse image est moins lourde que plusieurs petites (16.6 Ko pour une image de 1000 * 2000 px), donc le gain se fait vraiment à tous les niveaux.
Le résultat est évident pour l'utilisateur : la page se charge très vite et en une seule fois, les effets au survols sont instantanés dès le premier passage de la souris (il n'y a pas de deuxième image de survol à charger) et cette unique image est mise en cache immédiatement.
Sephi-Chan