Concernant l’optimisation de la technologie CSS Sprites, que pouvons-nous faire et dans quelle mesure pouvons-nous réduire le nombre de requêtes ? Cela ne peut pas se faire unilatéralement, tout dépend de la coopération entre les images XHTML, CSS et CSS Sprites. Jusqu'à présent, il n'existe pas de méthode d'optimisation absolue. C'est pourquoi je mesure souvent la relation entre les images CSS Sprites et XHTML dans des projets, tels que : "Un arrière-plan implémente une grille adaptative à neuf grilles". optimisation des images.
Optimisation de l'image
Pour les GIF non animés, il est recommandé d'utiliser PNG8 car il peut également obtenir le même effet et vous faire économiser 10 à 30 % de la taille du fichier.
Par rapport à Fireworks, Photoshop exporte des images PNG de la même qualité, mais la taille est légèrement plus grande. Bien que Fireworks ait procédé aux optimisations de compression correspondantes, il n'a pas atteint la meilleure compression.
Le logiciel de conception que je connais n'obtient pas la meilleure compression pour le traitement des images PNG, et la taille de l'image dispose toujours d'un certain espace de compression. Vous pouvez essayer d'utiliser « l'outil d'optimisation d'image » présenté ci-dessous pour obtenir une optimisation de compression sans distorsion.
En termes de volume et de taille de l'image, il est recommandé que la taille soit maintenue à moins de 100 Ko (ce qui est plus conforme aux meilleures exigences de TAILLE des conditions nationales) et que la taille soit de 800 px (la meilleure taille). (Appris d'une source personnelle faisant autorité, aucun moyen de vérifier les détails)
Technique de découpe d'images CSS Sprites
L'ordre des images des Sprites CSS et les images combinées sont ajoutées de haut en bas, de gauche à droite. La position d'arrière-plan est généralement positionnée à l'aide d'une combinaison de chiffres, ce qui peut réduire les problèmes inutiles causés par la maintenance.
Il n'est pas recommandé de maintenir un certain espacement dans les images CSS Sprites car la taille du fichier augmente et la taille du fichier augmente.
Dans les Sprites CSS, la combinaison de couleurs proches ou identiques peut réduire le nombre de couleurs, car la taille du fichier des images avec un petit nombre de couleurs sera relativement petite.
Il existe un grand écart entre les images CSS Sprites de même taille, ce qui dans la plupart des cas augmente la taille dans une certaine mesure, donc les images CSS Sprites ne devraient pas avoir d'espaces.
Parmi les images CSS Sprites de même taille, les images disposées verticalement auront des tailles de fichier plus grandes que les images disposées horizontalement. Démo
Dans les images CSS Sprites, les images disposées horizontalement auront des tailles de fichier plus grandes que les images disposées verticalement. Démo
Fusion égale d'images : lors de l'application d'images CSS Sprites, fusionnez des images identiques de manière appropriée pour économiser de l'espace et réduire le volume. Démo
Distinguer les images qui n'ont pas besoin d'être fusionnées : si l'utilisateur actuel détermine qu'un seul état ou niveau sera affiché, il n'est pas nécessaire de fusionner les images d'autres niveaux ou états. Démo
Position de coupe dorée : la position la plus flexible sur le côté droit ou gauche de l'image CSS Sprites est la position la plus appropriée pour placer l'icône devant le texte. Par conséquent, elle ne sera pas interférée par d'autres images CSS Sprites, et il y en a. pas besoin de réserver une certaine largeur de trait.