Lorsque vous voulez créer une animation comme, par exemple, le survol d'un bouton, vous n'utilisez plus de Javascript mais des CSS depuis fort longtemps. Pour chaque animation vous devez charger au minimum deux images et cela a un impact sur le temps de chargement de vos pages... Dans cet article, nous allons étudier une technique permettant d'exploiter un seul fichier contenant plusieurs images et de réduire ainsi les temps de chargement.
De nos jours, même si les débits de nos connexions ADSL, câble, ou fibre nous permettent de charger rapidement de nombreux fichiers, il est toujours important de minimiser le nombre de requêtes HTTP et ce pour deux raisons : minimiser le travail de votre (ou de vos) serveur(s) et permettre un chargement dans un temps correct pour les autres types de connexions... En effet, il faut penser que les sites ou applications web sont de plus en plus utilisés depuis des appareils nomades et que la 3G ne permet pas de rivaliser avec des connexions non itinérantes.
Dans cet article je vais vous présenter la technique des sprites CSS permettant de réduire le temps de chargement des fichiers d'images (même si vous n'utilisez que des images statiques). Nous verrons ce qu'est un sprite d'un point de vue théorique avant de passer à la pratique et, pour finir, nous verrons comment combiner cette technique relativement ancienne avec des directives CSS3 pour créer des animations.
1....
- Accédez à tous les contenus de Connect en illimité
- Découvrez des listes de lecture et des contenus Premium
- Consultez les nouveaux articles en avant-première
