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


125

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é.


1
Ne serait-il pas préférable d'utiliser une image 1x1 réelle, avec la configuration de la mise en cache? Vous n'avez pas plus de requêtes http, et au total, l'URL de l'image peut être plus petite que les 78 octets de l'URI de données.
Redzarf

1
@Redzarf: en fait, non, ce ne serait probablement pas mieux. Les petites ressources qui changent rarement affectent les temps de chargement des pages non pas à cause de la taille du fichier, mais à cause de l'aller-retour d'une requête HTTP. Une autre subtilité est que la plupart des navigateurs sont beaucoup plus agressifs à propos de la mise en cache CSS que d'autres ressources, de sorte que le navigateur est moins susceptible d'expérimenter avec l'actualisation du CSS (et du contenu ainsi intégré), économisant ainsi plus d'aller-retour http.
SingleNegationElimination

Réponses:


167

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.


1
+1 merci! J'ai remarqué que cela est utile. J'ai utilisé vos données pour créer ce plugin afin de pouvoir utiliser des images de type réactif nativement avec une couverture d'arrière-plan ou contenir-
Jason Sebring

1
Pourquoi le plus court est-il «instable»? Je vois que cela cause parfois une image noire, je suis juste curieux de savoir pourquoi.
jvenema

Après beaucoup de douleur, j'ai trouvé que la version "plus courte" plantait en fait le navigateur sur certaines pages (pas toutes) de mon site sur les anciens navigateurs Android (HTC One S, OS 4.1).
WebSeed

Excellente réponse mais pas la plus petite possible jusqu'à présent.
Josh Habdas

22
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é.


3
Y a-t-il des arguments contre l'utilisation d'un SVG? Y a-t-il des cas où ce n'est pas une bonne idée?
tremby

Un SVG convient dans de nombreux cas, mais lorsqu'il est combiné avec width: auto;, un SVG prendra la largeur de son parent. Une image statique telle que GIF ou PNG, lorsqu'elle a une hauteur et une largeur fixes automatiques, conservera son rapport hauteur / largeur.
snazzybouche


14

Plus petit PNG - 114 octets:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Il convient de mentionner que cela peut être facilement généré à l'aide de GIMP. Le fichier résultant aura une taille de 68 octets (le plus petit possible, à ce jour).
Ismael Miguel le

@AminahNuraini ceci est un PNG.
joshcarr

2
@AminahNuraini: Et cette réponse vous dit "SVG"?
Courses de légèreté en orbite

10

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éé .


1
Selon cet article, la variation de 37 octets repose sur un comportement indéfini, et en fait, l'auteur mentionne que l'analyseur d'images de wordpress ne peut pas le gérer. Bien que cela fonctionnera probablement sur la plupart des navigateurs, je le considérerais comme un choix risqué. Je m'en tiendrai à la variation de 43 octets de ce même article. Une variante de cela est déjà publiée ci-dessus . Voir aussi la discussion dans les commentaires sur la première réponse
Brian


6

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

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

Cela apparaît en noir dans IE11.
tomasz86

4

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


Firefox 44 et Internet Explorer 11 affichent la balise alt img. Vous devez soit utiliser l'un des éléments ci-dessus, soit supprimer la balise alt
PersyJack

C'est plus efficace qu'une demande / réponse pour une image?
nu everest

Ne validera pas cependant
Lucian Davidescu

0

Pour une image vide:

data:null

(cela se traduira par src=(unknown))


J'aime cela en principe, mais le validateur w3c n'approuve pas en pratique: Erreur: Données de valeur incorrecte: null pour l'attribut src sur l'élément img: Fin prématurée de l'URI.
brennanyoung
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.