Texte original : CSS Sprite : à faire ou à ne pas faire ?
Traduit de : Sprite ou pas
Avis de non-responsabilité : les sprites CSS mentionnés dans cet article sont des sprites CSS . Cette expression n'a jamais eu de traduction chinoise fixe ou conventionnelle. Certaines personnes ont commencé à l'appeler des sprites CSS. Traitons-la comme un essai. nous continuerons à le faire à l'avenir. Nous continuerons à nous appeler CSS Sprites. Shenfei (chant)
CSS Sprite existe depuis un certain temps et s'est imposé comme un moyen de rendre votre site Web plus rapide. Steve Souders vient de présenter SpriteMe ! à Velocity 09 (expliquant pourquoi utiliser un générateur de sprites CSS ou un autre outil basé sur un serveur alors que vous pouvez utiliser canevas et toDataURL et générer des sprites à la volée ?). Cependant, il existe certaines idées fausses à propos des sprites CSS, la principale étant qu’ils ne présentent aucun inconvénient.
Le principe de base de CSS Sprite est d'intégrer certaines images utilisées sur votre site web en une seule image, réduisant ainsi le nombre de requêtes HTTP pour votre site web. L'image est rendue à l'aide des propriétés CSS background et background-position (il convient de mentionner que cela signifie également que vos balises deviennent plus complexes, l'image est définie en CSS, pas la balise <img>).
Le plus gros problème avec CSS Sprite est l’utilisation de la mémoire. À moins que l'image du sprite ne soit organisée avec beaucoup de soin, vous vous retrouverez avec beaucoup d' espace blanc inutile. Mon exemple préféré vient du site Web de WHIT TV, où cette image est utilisée comme sprite. Notez qu’il s’agit d’une image PNG de 129 915 000 pixels. Il est également très bien compressé et la taille réelle du téléchargement n'est que d'environ 26 Ko - mais le navigateur ne restitue pas les données d'image compressées. Lorsque cette image est téléchargée et décompressée, elle occupera environ 75 Mo de mémoire (1299 * 15000 * 4). Si cette image n'utilise pas la transparence alpha, elle sera optimisée à 1299*15000*3, mais au détriment de la vitesse de rendu. Même dans ce cas, nous parlons de 55 Mo. La majeure partie de cette image est en fait vierge , il n’y a rien là-bas, aucun contenu utile. Le simple chargement de la page d'accueil de WHIT entraînera une utilisation de la mémoire de votre navigateur jusqu'à au moins 75+ Mo, simplement à cause de cette image. ( PS : Malheureusement, le site a été récemment révisé et les photos mentionnées dans l'article n'existent plus )
Le bon compromis en faveur d’un site Web n’existe pas.
Un autre inconvénient (bien que moins important) est que si une page utilisant CSS Sprite est mise à l'échelle à l'aide de la fonction de zoom pleine page fournie par certains navigateurs, le navigateur devra effectuer un travail supplémentaire pour corriger le comportement de ces bords d'image. empêcher les images adjacentes dans Sprite d’être exposées. Ce n'est pas un problème pour les petites images, mais ce sera un problème de performances pour les grandes images.
Il existe certainement quelques exemples qui montrent les avantages évidents des sprites CSS, le principal étant la fusion d'un lot d'images de même taille en un seul fichier. Par exemple, une série d'icônes 16 × 16 utilisées pour identifier de nombreux éléments sur votre site Web, ou des icônes 32 × 32 utilisées comme en-têtes de catégorie ou autres. Mais ce n’est jamais une bonne idée de combiner des images de tailles très différentes, en particulier une image haute et fine à côté d’une image large et courte.
Cependant, CSS Sprite améliore les temps de chargement des pages (au moins lors du chargement initial de la page et lors des chargements de pages suivants, le navigateur met l'image en cache). Y a-t-il quelque chose qui puisse être remplacé ? Malheureusement, il n'existe pas encore d'alternative. De nombreux navigateurs commencent à prendre en charge les manifestes hors ligne, et il peut être possible d'étendre cette fonctionnalité pour permettre le téléchargement d'un fichier (tel qu'un fichier jar/zip) contenant une liste de ressources et les URL correspondantes. Mais une telle approche ne sera pas envisagée avant un certain temps...
Ainsi, lorsque vous décidez d'utiliser CSS Sprite, sachez qu'il existe de nombreux facteurs au-delà des performances de chargement initial de la page. En règle générale, si une grande partie de votre sprite CSS ne contient pas de contenu d'image réel, vous devez éviter de l'utiliser en conséquence. De même, gardez un œil sur d’éventuels problèmes futurs tout en maintenant les vitesses de chargement des pages tout en prenant soin d’éviter les bugs de mémoire et les impacts sur les performances du Sprite.
Autres lacunes du Sprite CSS
Voici quelques défauts de CSS Sprite mentionnés par certains internautes dans les commentaires de cet article :
Les images appelées par CSS Sprite ne peuvent pas être imprimées à moins que l'instruction d'impression ne soit spécifiquement ajoutée à @media par RichB.
Si vous souhaitez modifier une image dans Sprite, vous devez modifier l'image entière, ce qui augmentera sans aucun doute la charge de travail de Tom B.
Si vous constatez des lacunes dans d'autres Sprites CSS lors de leur utilisation, n'hésitez pas à les mentionner.