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 veux 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 les données URI: s pour les images réelles au lieu des images-objets, mais il 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 très bien, cependant, si vous voulez 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
Comme autre astuce, n'omettez pas image/gif comme le suggère un commentaire. Cela se cassera 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 compressé.
Je pense que ce doit être un fichier GIF transparent compressé 1x1 (82 octets):
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
Généré avec données dopiaza.org: générateur d'URI .
PNG le plus petit - 114 octets:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=
Ce gars décompose le problème via la spécification GIF. Sa solution pour le transparent.gif serait de 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 dans trop de détails, cette section du fichier indique ce qui suit:
- Le fichier mesure 1 x 1 pixel.
- Il existe une table de couleurs globale.
- Il y a 2 couleurs dans la table de couleurs globale, la seconde doit être utilisée comme couleur de fond.
Tableau des couleurs globales (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 blanche et la deuxième couleur est noire.
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 codé LZW bloc de données d'image. Il faut 5 octets pour représenter le pixel unique que contient 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 octet unique 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 est assez proche du plus petit que vous pouvez obtenir.
Mais, j'ai réussi à trouver une astuce pour la rendre un peu plus petite. 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 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’existe pas 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 j'ai supprimé la table elle-même, économisant un total de six octets, réduisant la taille du fichier à seulement 37 octets.
Chose intéressante, 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 s'ouvrent et s'affichent (est-ce " affiché "quand il est transparent?) le fichier très bien.
Pour le rendre encore plus petit, j'ai regardé le plus grand bloc "optionnel" 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 cela vous permet de retirer 8 octets supplémentaires.
Source: Le plus petit GIF jamais .
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:
C'est le plus petit que j'ai trouvé (26 octets):
data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=
J'utilise les données suivantes uri pour obtenir une image vide: //:0
Pour une image vide:
data:null
(cela se traduira par src=(unknown))