Une introduction détaillée aux images de sprite en CSS

CSS Sprite CSS Sprite, certaines personnes l'appellent CSS sprite, est une technologie de fusion d'images CSS. Cette méthode consiste à fusionner de petites icônes et des images d'arrière-plan en une seule image, puis à utiliser CSS L'arrière-plan est positionné. pour afficher la partie de l’image qui doit être affichée. La technologie CSS Sprites est appelée CSS Sprite par certaines personnes en Chine. Elle intègre en fait certaines images d'arrière-plan de la page Web dans un seul fichier image, puis utilise CSS "background-image", "background-repeat", "background-". combinaison "position" pour le positionnement de l'arrière-plan, background-position peut utiliser des nombres pour localiser avec précision la position de l'image d'arrière-plan

Le principe de base de l'image de sprite CSS est de regroupez certaines images utilisées sur votre site Web en une seule image, réduisant ainsi le nombre de requêtes HTTP vers votre site Web. L'image est rendue à l'aide des propriétés CSS background et background-position, ce qui signifie que vos balises deviennent plus complexes. L'image est définie en CSS, et non par la balise .

Points de connaissance CSS :

image d'arrière-plan

position d'arrière-plan

Caractéristiques de l'image de sprite CSS :

Par rapport à une petite icône, il permet d'économiser la taille du fichier et les délais de demande de service. Intégrez toutes les images d'arrière-plan fragmentées des pages Web. Cela peut réduire efficacement le nombre de requêtes http d'images sans qu'il soit nécessaire de charger plusieurs fois les images d'arrière-plan fragmentées. Par conséquent, une utilisation rationnelle de celles-ci peut améliorer efficacement la vitesse de chargement des pages Web.

En général, vous devez enregistrer au format de fichier PNG-24.

Vous pouvez concevoir la surface du corps dans des couleurs riches et colorées.

Difficultés des images de sprite CSS :

Vous devez déterminer la taille de chaque petite icône à l'avance

Faites attention à la distance entre les petites icônes

Soyez prudent et patient

Format d'image PNG-24 : PNG-24 peut réduire les bavures.

Avantages des sprites CSS

Réduire le nombre de requêtes au serveur lors du chargement des images de pages Web

Peut fusionner la plupart des images d'arrière-plan et les petites icônes sont faciles à utiliser à n'importe quel endroit, de sorte que les requêtes provenant de différents emplacements n'ont besoin d'appeler qu'une seule image, réduisant ainsi le nombre de requêtes adressées au serveur, réduisant la pression sur le serveur, tout en améliorant la vitesse de chargement des pages et économiser le trafic du serveur.

Améliorer la vitesse de chargement des pages

L'un des avantages de la technologie des sprites est le temps de chargement des images (le temps de chargement d'une seule image lorsqu'il y a plusieurs sprites). Un GIF composé des images requises sera nettement plus petit que la taille combinée de toutes les images. Un seul GIF n'a qu'une seule table de couleurs associée, tandis que chaque GIF divisé a sa propre table de couleurs, ce qui augmente la taille globale. Par conséquent, un seul sprite JPEG ou PNG est susceptible d’être plus petit que la taille totale d’une image divisée en plusieurs images.

Réduire certains bugs lorsque la souris survole

IE6 ne préchargera pas activement l'image d'arrière-plan dans un:hover sur lequel la souris survole, donc si vous utilisez plusieurs images , il clignotera en blanc lorsque la souris passera dessus. En utilisant CSS Sprite, puisqu'une seule image suffit, ce phénomène ne se produira pas.

Images CSS Sprite insuffisantes

Le plus gros problème avec CSS Sprite est l'utilisation de la mémoire

À moins que l'image Sprite ne soit prise très une organisation soignée, vous vous retrouverez avec beaucoup d'espace blanc inutile. Un exemple provient du site Web WHIT TV. Notez qu’il s’agit d’une image PNG de 1 299 × 15 000 pixels. Il est également très bien compressé – 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à, 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 images mentionnées dans l'article n'existent plus)

Affecte la fonction zoom du navigateur

Si l'on utilise le CSS La page du Sprite est mise à l'échelle à l'aide de la fonction de zoom pleine page fournie par certains navigateurs. Le navigateur doit effectuer un travail supplémentaire pour corriger le comportement de ces bords d'image - essentiellement, pour empêcher les images adjacentes dans le Sprite d'être " Entrez ". Ce n'est pas un problème pour les petites images, mais ce sera un problème de performances pour les grandes images.

La maintenance du puzzle est gênante

Rassembler autant de photos demande de la patience. Dans le même temps, vous devez toujours réfléchir à la manière d’utiliser cette image sans vous affecter. Il n’est pas facile d’associer des images hautes et fines avec des images larges et courtes. 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.

Rendre l'écriture CSS difficile

Si CSS Sprite est suffisamment complexe, cela augmentera considérablement la quantité et la difficulté du code CSS, rendant la maintenance et la modification difficiles.

Les images appelées par CSS Sprite ne peuvent pas être imprimées

Les images appelées par CSS Sprite ne peuvent pas être imprimées à moins qu'une instruction d'impression ne soit spécifiquement ajoutée à @media.

L'utilisation incorrecte des Sprites affecte l'accessibilité

Certains nouveaux développeurs le feront afin d'économiser le nombre de requêtes HTTP (c'est l'avantage qui a été souligné par l'utilisation de CSS Sprites) Traitez toutes les images comme des images d’arrière-plan, même celles qui transmettent des informations importantes. Le résultat est un site Web qui manque d’accessibilité et réduit les avantages potentiels des titres et des alts en HTML.

Par conséquent, il n'y a rien de mal en soi avec les sprites CSS, et ils ne causent pas de problèmes d'accessibilité (en fait, lorsqu'ils sont utilisés correctement, ils améliorent l'accessibilité). Mais la surutilisation des sprites, à tort ou à raison, peut entraver le processus de création de pages Web en termes d'accessibilité et de productivité.

CSS Sprite CSS Sprite, certaines personnes l'appellent également CSS sprite, est une technologie de fusion d'images CSS. Cette méthode consiste à fusionner de petites icônes et des images d'arrière-plan en une seule image. positionnement du CSS pour afficher la partie de l'image qui doit être affichée. La technologie CSS Sprites est appelée CSS Sprite par certaines personnes en Chine. Elle intègre en fait certaines images d'arrière-plan de la page Web dans un seul fichier image, puis utilise CSS "background-image", "background-repeat", "background-". combinaison "position" pour le positionnement de l'arrière-plan, background-position peut utiliser des nombres pour localiser avec précision la position de l'image d'arrière-plan

Le principe de base de l'image de sprite CSS est de regroupez certaines images utilisées sur votre site Web en une seule image, réduisant ainsi le nombre de requêtes HTTP vers votre site Web. L'image est rendue à l'aide des propriétés CSS background et background-position, ce qui signifie que vos balises deviennent plus complexes. L'image est définie en CSS, et non par la balise .

Points de connaissance CSS :

image d'arrière-plan

position d'arrière-plan

Caractéristiques de l'image de sprite CSS :

Par rapport à une petite icône, il permet d'économiser la taille du fichier et les délais de demande de service. Intégrez toutes les images d'arrière-plan fragmentées des pages Web. Cela peut réduire efficacement le nombre de requêtes http d'images sans qu'il soit nécessaire de charger plusieurs fois les images d'arrière-plan fragmentées. Par conséquent, une utilisation rationnelle de celles-ci peut améliorer efficacement la vitesse de chargement des pages Web.

En général, vous devez enregistrer au format de fichier PNG-24.

Vous pouvez concevoir la surface du corps dans des couleurs riches et colorées.

Difficultés des images de sprite CSS :

Vous devez déterminer la taille de chaque petite icône à l'avance

Faites attention à la distance entre les petites icônes

Soyez prudent et patient

Format d'image PNG-24 : PNG-24 peut réduire les bavures.

Avantages des sprites CSS

Réduire le nombre de requêtes au serveur lors du chargement des images de pages Web

Peut fusionner la plupart des images d'arrière-plan et les petites icônes sont faciles à utiliser à n'importe quel endroit, de sorte que les requêtes provenant de différents emplacements n'ont besoin d'appeler qu'une seule image, réduisant ainsi le nombre de requêtes adressées au serveur, réduisant la pression sur le serveur, tout en améliorant la vitesse de chargement des pages et économiser le trafic du serveur.

Améliorer la vitesse de chargement des pages

L'un des avantages de la technologie des sprites est le temps de chargement des images (le temps de chargement d'une seule image lorsqu'il y a plusieurs sprites). Un GIF composé des images requises sera nettement plus petit que la taille combinée de toutes les images. Un seul GIF n'a qu'une seule table de couleurs associée, tandis que chaque GIF divisé a sa propre table de couleurs, ce qui augmente la taille globale. Par conséquent, un seul sprite JPEG ou PNG est susceptible d’être plus petit que la taille totale d’une image divisée en plusieurs images.

Réduire certains bugs lorsque la souris survole

IE6 ne préchargera pas activement l'image d'arrière-plan dans un:hover sur lequel la souris survole, donc si vous utilisez plusieurs images , il clignotera en blanc lorsque la souris passera dessus. En utilisant CSS Sprite, puisqu'une seule image suffit, ce phénomène ne se produira pas.

Images CSS Sprite insuffisantes

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 très soigneusement, vous vous retrouverez avec beaucoup d'espace blanc inutile. Un exemple provient du site Web WHIT TV. Notez qu’il s’agit d’une image PNG de 1 299 × 15 000 pixels. Il est également très bien compressé – 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à, 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 images mentionnées dans l'article n'existent plus)

Affecte la fonction zoom du navigateur

Si l'on utilise le CSS La page du Sprite est mise à l'échelle à l'aide de la fonction de zoom pleine page fournie par certains navigateurs. Le navigateur doit effectuer un travail supplémentaire pour corriger le comportement de ces bords d'image - essentiellement, pour empêcher les images adjacentes dans le Sprite d'être " Entrez ". Ce n'est pas un problème pour les petites images, mais ce sera un problème de performances pour les grandes images.

La maintenance du puzzle est fastidieuse

Assembler autant d'images demande de la patience. Dans le même temps, vous devez toujours réfléchir à la manière d’utiliser cette image sans vous affecter. Il n’est pas facile d’associer des images hautes et fines avec des images larges et courtes. 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.

Rendre l'écriture CSS difficile

Si le sprite CSS est suffisamment complexe, cela augmentera considérablement la quantité et la difficulté du code CSS, rendant la maintenance et la modification difficiles.

Les images appelées par CSS Sprite ne peuvent pas être imprimées

Les images appelées par CSS Sprite ne peuvent pas être imprimées à moins qu'une instruction d'impression ne soit spécifiquement ajoutée à @media.

L'utilisation incorrecte des Sprites affecte l'accessibilité

Certains nouveaux développeurs le feront afin d'économiser le nombre de requêtes HTTP (c'est l'avantage qui a été souligné par l'utilisation de CSS Sprites) Traitez toutes les images comme des images d’arrière-plan, même celles qui transmettent des informations importantes. Le résultat est un site Web qui manque d’accessibilité et réduit les avantages potentiels des titres et des alts en HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!