Quelle est la taille optimale pour une image URI de données transparentes minimaliste ?

URI de données minimaliste pour les images transparentes

Imaginez utiliser une image transparente 1x1 à côté d'une image d'arrière-plan dans CSS. Cela permet l'utilisation de sprites tout en fournissant un texte alternatif pour des icônes spécifiques.

Pour optimiser les performances, envisagez d'utiliser des URI de données pour les images. Cependant, quelle est la taille optimale pour créer une image transparente en utilisant cette approche ?

La réponse concise

Grâce à des expérimentations approfondies avec des GIF transparents, certaines images présentaient une instabilité et provoquaient problèmes dans CSS. Par exemple, les tentatives visant à ajouter une image d'arrière-plan à un GIF transparent en utilisant les plus petites dimensions possibles peuvent entraver sa fonctionnalité. Bizarrement, certains GIF, comme celui ci-dessous, peuvent bloquer les arrière-plans CSS dans certains navigateurs.

Plus court mais instable (74 octets)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Stable mais légèrement plus long (78 octets)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

Une considération supplémentaire est de s'abstenir d'omettre « image/gif » comme suggestion souvent trouvée dans les commentaires. Cette omission peut entraîner un dysfonctionnement 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!