Plus petite image URI de données possible pour une image transparente

Question

Je suis à l'aide d'un transparent 1x1 image avec une image de fond, pour être en mesure d'utiliser des sprites et encore fournir un texte de remplacement pour certaines icônes.

Je veux utiliser un data URI de l'image afin de réduire le nombre de requêtes HTTP, mais ce serait le plus petit string pour produire une image transparente?

Je me rends compte que je pouvais utiliser les données URI:s pour les images réelles au lieu de sprites, mais il est plus facile à maintenir, lorsque tout est gardé dans le CSS au lieu de éparpillés.

Answer 1

Après avoir joué avec différents formats Gif transparents, certains sont instables et provoquer CSS pépins. Par exemple, si vous avez un <img> et que vous utilisez la plus petite GIF transparent possible, il fonctionne très bien, cependant, si vous voulez que votre GIF transparent pour avoir un background-image, alors c'est impossible. Pour une raison quelconque, certains GIFs telles que les suivantes empêcher CSS milieux (dans certains navigateurs).

Plus courte (mais instable)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Je conseille à l'aide de la légèrement plus longue et plus stable version comme suit:

⇊ Stable ⇊ (mais légèrement plus long)

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

---

Comme un autre conseil, ne pas omettre image/gif comme un commentaire suggère. Cela permettra de briser dans plusieurs navigateurs.

Answer 2

Je pense que ce doit être un GIF 1x1 transparent compressé:

 data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
 

Généré avec des données dopiaza.org: générateur d'URI .

Answer 3

Ce gars décompose le problème via la spécification GIF. À lire pour ceux qui s'intéressent à cette question:

• http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

Sa solution pour le transparent.gif serait 37 octets:

 data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
 

Il va encore plus petit en supprimant d'abord le transparent, puis la table de couleurs ...