Lorsque vous travaillez avec des sprites, il devient nécessaire d'utiliser des images transparentes pour intégrer de manière transparente les images d'arrière-plan tout en fournissant un texte alternatif pour les icônes. L'utilisation d'URI de données peut aider à minimiser les requêtes HTTP.
Cependant, des défis surviennent lors de la détermination de la plus petite chaîne possible pour restituer une image transparente via un URI de données. Diverses tentatives ont été faites, mais certains GIF transparents présentent une instabilité, provoquant des problèmes CSS ou entravant l'application des images d'arrière-plan.
Après des tests approfondis, il a été découvert que même s'il existe une version plus courte (74 octets), elle a tendance à être instable, ce qui peut entraîner des problèmes graphiques. Par conséquent, la solution recommandée est d'utiliser une version légèrement plus longue mais plus stable (78 octets) :
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
Remarque importante : N'omettez pas l'en-tête "image/gif", car suggéré ailleurs. Cela peut entraîner une rupture de l'URI des données dans plusieurs navigateurs.
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!