La plus petite image URI de données possible pour une image transparente

J'utilise une image 1x1 transparente avec une image d'arrière-plan, pour pouvoir utiliser des sprites et toujours fournir un texte alternatif pour certaines icônes.

Je souhaite utiliser un URI de données pour l'image afin de réduire le nombre de requêtes HTTP, mais quelle serait la plus petite chaîne possible pour produire une image transparente ?

Je me rends compte que je pourrais utiliser des URI de données: s pour les images réelles au lieu de sprites, mais c'est plus facile à maintenir lorsque tout est conservé dans le CSS au lieu d'être dispersé.

Après avoir joué avec différents GIF transparents, certains sont instables et provoquent des problèmes CSS. Par exemple, si vous avez un <img>et que vous utilisez le plus petit GIF transparent possible, cela fonctionne bien, cependant, si vous voulez ensuite que votre GIF transparent ait un background-image, alors c'est impossible. Pour une raison quelconque, certains GIF tels que les suivants empêchent les arrière-plans CSS (dans certains navigateurs).

Plus court (mais instable - 74 octets)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Je conseillerais d'utiliser la version légèrement plus longue et plus stable comme suit:

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

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

Autre astuce, ne l'omettez pas image/gifcomme le suggère un commentaire. Cela va casser dans plusieurs navigateurs.

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E

La longueur finale dépend de ce avec quoi il est gzippé.

Je pense que ce doit être un fichier GIF 1x1 transparent compressé (82 octets):

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

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

Plus petit PNG - 114 octets:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Ce gars résout le problème via la spécification GIF. Sa solution pour le transparent.gifserait 37 octets:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Il va encore plus petit en supprimant d'abord la transparence, puis la table des couleurs ...

Spécification GIF89a

• En-tête (6 octets)

  Se compose des octets «GIF» et du numéro de version, qui est généralement 89a.

• Descripteur d'écran logique (7 octets)

  Sans entrer trop dans les détails, cette section du fichier indique ce qui suit:

  • Le fichier a une taille de 1 x 1 pixels.
  • Il existe une table de couleurs globale.
  • Il y a 2 couleurs dans la table des couleurs globale, la seconde doit être utilisée comme couleur d'arrière-plan.

• Table de couleurs globale (6 octets)

  Se compose de 3 octets par couleur, un octet pour le rouge, le vert et le bleu, respectivement. Dans notre fichier, la première couleur est le blanc et la deuxième couleur est le noir.

• Extension de contrôle graphique (8 octets)

  Utilisé pour indiquer que la deuxième couleur de la table des couleurs doit être traitée comme transparente (peut également être utilisée pour les paramètres d'animation, mais n'est pas dans ce fichier).

• Descripteur d'image (10 octets)

  Un fichier GIF peut en fait contenir plusieurs «images», ce qui vous évite d'avoir à spécifier des données d'image pour des parties de l'image qui ont la même couleur que la couleur d'arrière-plan. Chaque bloc d'image a une position et une taille dans la taille globale de l'image. Dans le fichier ci-dessus, la position est 0,0 et la taille est 1x1.

• Données d'image (5 octets)

  Un bloc de données d'image codé LZW . Il faut 5 octets pour représenter le pixel unique de l'image. L'algorithme de compression n'a pas été conçu pour compresser très bien un seul octet.

• Bande-annonce GIF (1 octet)

  Un seul octet avec une valeur hexadécimale de 3B( ;en ASCII) indique la fin du GIF.

Sur la base des structures requises pour un GIF transparent, il s'avère que 43 octets sont presque aussi petits que possible.

Mais j'ai réussi à trouver un truc pour le rendre un peu plus petit. Il est mentionné dans la norme qu'il est facultatif d'avoir une table de couleurs globale. Bien sûr, ce qui se passe lorsque vous créez un GIF sans table de couleurs n'est pas du tout défini.

Cependant, lorsque vous avez un index de table de couleurs défini comme transparent, les décodeurs GIF ne semblent pas se soucier qu'il n'y ait pas réellement de table de couleurs.

J'ai donc changé le descripteur d'écran logique pour indiquer qu'il n'y avait pas de table de couleurs globale et supprimé la table elle-même, économisant un total de six octets, ramenant la taille du fichier à seulement 37 octets.

Il est intéressant de noter que Wordpress m'a donné une belle liste de messages d'erreur de GD se plaignant que ce n'est pas un fichier GIF valide, malgré le fait que Firefox et GIMP ouvrent et affichent tous les deux (est-il «affiché» quand il est transparent?) Le fichier ça va.

Pour le rendre encore plus petit, j'ai regardé le plus gros bloc «facultatif» restant dans l'image, l'extension de contrôle graphique. Si vous n'avez pas besoin de transparence, ce bloc n'est plus nécessaire et c'est 8 octets supplémentaires que vous pouvez retirer.

Source: Le plus petit GIF jamais créé .

Vous pouvez essayer les données SVG suivantes (60 octets):

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

Le fichier svg autonome ressemblerait à (62 octets):

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>

Voir également:

• Optimiser les SVG dans les URI de données
• Encodeur d'URL pour SVG ( GitHub ) / SVG CSS URI - Remplacement optimisé

C'est le plus petit que j'ai trouvé (26 octets):

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

J'utilise l'URI de données suivant pour obtenir une image vide: //:0

Pour une image vide:

data:null

(cela se traduira par src=(unknown))