Sprites CSS : découpe d'images en CSS

Magazine
Marque
Linux Pratique
Numéro
67
Mois de parution
septembre 2011
Spécialité(s)


Résumé

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

Cet article est réservé aux abonnés. Il vous reste 93% à découvrir.
S'abonner à Connect
  • Accédez à tous les contenus de Connect en illimité
  • Découvrez chaque semaine un nouvel article premium
  • Consultez les nouveaux articles en avant-première
Je m'abonne


Article rédigé par

Par le(s) même(s) auteur(s)

Petite étude de la mémoire utilisée par les imports Python

Magazine
Marque
GNU/Linux Magazine
Numéro
252
Mois de parution
octobre 2021
Spécialité(s)
Résumé

Python est un langage de haut niveau, ce qui permet de ne pas avoir à se soucier de l’allocation/désallocation mémoire. Mais cela ne doit pas nous empêcher d’y réfléchir un minimum, de manière à ne pas gaspiller inutilement une ressource qui peut bien vite devenir limitée...

Les derniers articles Premiums

Les derniers articles Premium

Game & Watch : utilisons judicieusement la mémoire

Magazine
Marque
Contenu Premium
Spécialité(s)
Résumé

Au terme de l'article précédent [1] concernant la transformation de la console Nintendo Game & Watch en plateforme de développement, nous nous sommes heurtés à un problème : les 128 Ko de flash intégrés au microcontrôleur STM32 sont une ressource précieuse, car en quantité réduite. Mais heureusement pour nous, le STM32H7B0 dispose d'une mémoire vive de taille conséquente (~ 1,2 Mo) et se trouve être connecté à une flash externe QSPI offrant autant d'espace. Pour pouvoir développer des codes plus étoffés, nous devons apprendre à utiliser ces deux ressources.

Raspberry Pi Pico : PIO, DMA et mémoire flash

Magazine
Marque
Contenu Premium
Spécialité(s)
Résumé

Le microcontrôleur RP2040 équipant la Pico est une petite merveille et malgré l'absence de connectivité wifi ou Bluetooth, l'étendue des fonctionnalités intégrées reste très impressionnante. Nous avons abordé le sujet du sous-système PIO dans un précédent article [1], mais celui-ci n'était qu'une découverte de la fonctionnalité. Il est temps à présent de pousser plus loin nos expérimentations en mêlant plusieurs ressources à notre disposition : PIO, DMA et accès à la flash QSPI.

Programmation des PIO de la Raspberry Pi Pico

Magazine
Marque
Contenu Premium
Spécialité(s)
Résumé

La carte Pico de Raspberry Pi est appréciable à bien des égards. Ses ressources, son prix, ses deux cœurs ARM... Mais ce morceau de silicium qu'est le RP2040 renferme une fonctionnalité unique : des blocs PIO permettant de créer librement des périphériques supplémentaires qu'il s'agisse d'éléments standardisés comme SPI, UART ou i2c, ou des choses totalement exotiques et très spécifiques à un projet ou un environnement donné. Voyons ensemble comment prendre en main cette ressource et explorer le monde fantastique des huit machines à états de la Pico !

Les listes de lecture

9 article(s) - ajoutée le 01/07/2020
Vous désirez apprendre le langage Python, mais ne savez pas trop par où commencer ? Cette liste de lecture vous permettra de faire vos premiers pas en découvrant l'écosystème de Python et en écrivant de petits scripts.
11 article(s) - ajoutée le 01/07/2020
La base de tout programme effectuant une tâche un tant soit peu complexe est un algorithme, une méthode permettant de manipuler des données pour obtenir un résultat attendu. Dans cette liste, vous pourrez découvrir quelques spécimens d'algorithmes.
10 article(s) - ajoutée le 01/07/2020
À quoi bon se targuer de posséder des pétaoctets de données si l'on est incapable d'analyser ces dernières ? Cette liste vous aidera à "faire parler" vos données.
Voir les 53 listes de lecture

Abonnez-vous maintenant

et profitez de tous les contenus en illimité

Je découvre les offres

Déjà abonné ? Connectez-vous