plus petite taille de fichier pour une image en pixel simple transparente

blank.gif ce fichier blank.gif (43 octets). Moins de 49: d

Voici un GIF transparent de 32 octets qui devrait (devrait) fonctionner partout

 data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI= 47 49 46 38 39 61 01 00 01 00 00 00 00 21 F9 04 01 00 00 00 00 2C 00 00 00 00 01 00 01 00 00 02 

Explication

La réalisation du plus petit GIF possible dépend de l’implémentation de la spécification GIF utilisée. Les navigateurs Web sont généralement indulgents quant au décodage des fichiers GIF. Vous pouvez trouver un très petit GIF qui fonctionne comme transparent dans un navigateur, mais blanc / noir dans un autre. Et il pourrait même ne pas s’ouvrir dans des logiciels comme Gimp, Paint et Photoshop.

Le plus petit GIF transparent presque valide est de 32 octets. “Presque valide”, car la bande-annonce et certaines des données LZW peuvent être supprimées et elles s’ouvriront dans pratiquement tous les logiciels.

Cela se fait en suivant la spécification GIF , et chaque composant peut être décomposé comme suit:

1. Signature de fichier / version, 6 octets
2. Descripteur d’écran logique , 7 octets
3. Facultatif: tableau de couleurs global , 6 octets¹
4. Facultatif: Extension de contrôle graphique , 8 octets²
5. Descripteur d’image , 10 octets
6. Données LZW , 1-4 octets³
7. Facultatif: Bande – annonce ( 0x3B ), 1 octet⁴

¹ La table de couleurs globales peut être supprimée en toute sécurité en la désactivant dans le descripteur d’écran logique
² Cela est nécessaire pour la transparence dans la plupart des logiciels
³ Seulement 3 octets des données LZW sont requirejs et les octets peuvent être presque n’importe quoi. Bien que seul le premier octet de 0x02 soit ssortingctement requirejs.
Iler La remorque peut être retirée sans effets indésirables.

La plupart des logiciels GIF nécessitent la présence d’une table de couleurs globale / locale. D’autres réductions (par exemple, la suppression de la table de couleurs globale) peuvent fonctionner dans certains navigateurs, mais leurs effets sont généralement spécifiques à la mise en œuvre. Edit: Il existe un indicateur pour désactiver la table de couleurs globales et cela ne semble pas poser de problème.

Autres exemples:

Les 24 octets suivants sont rendus sous forme de GIF transparent dans Chrome, mais ils sont blancs opaques dans Firefox:

 47 49 46 38 39 61 01 00 01 00 00 00 00 2C 00 00 00 00 01 00 01 00 00 02 data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA= 

Les 14 octets suivants fonctionnaient uniquement dans Chrome, mais plus maintenant:

 47 49 46 38 39 61 01 00 01 00 00 00 00 2C data:image/gif;base64,R0lGODlhAQABAAAAACw= 

Voici ce que j’utilise dans un tableau d’octets C # (évite l’access aux fichiers)

 static readonly byte[] TrackingGif = { 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x1, 0x0, 0x1, 0x0, 0x80, 0x0, 0x0, 0xff, 0xff, 0xff, 0x0, 0x0, 0x0, 0x2c, 0x0, 0x0, 0x0, 0x0, 0x1, 0x0, 0x1, 0x0, 0x0, 0x2, 0x2, 0x44, 0x1, 0x0, 0x3b }; 

En asp.net MVC cela peut être retourné comme ça

 return File(TrackingGif, "image/gif"); 

Pour développer la réponse du tableau d’octets de Jacob, j’ai généré le tableau d’octets c # pour un fichier gif 1×1 transparent que j’ai créé dans photoshop.

 static readonly byte[] TrackingGif = { 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x01, 0x00, 0x01, 0x00, 0x81, 0x00, 0x00, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x21, 0xff, 0x0b, 0x4e, 0x45, 0x54, 0x53, 0x43, 0x41, 0x50, 0x45, 0x32, 0x2e, 0x30, 0x03, 0x01, 0x01, 0x00, 0x00, 0x21, 0xf9, 0x04, 0x01, 0x00, 0x00, 0x00, 0x00, 0x2c, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x00, 0x08, 0x04, 0x00, 0x01, 0x04, 0x04, 0x00, 0x3b}; 

http://soffr.miximages.com/filesize/blank.gif est un GIF transparent de 37 octets réalisé avec gifsicle.

Au format base64 css-ready:

 data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw== 

• Voir: http://soffr.miximages.com/filesize/__utm.gif , 35B

• Alternative en Perl (45B):

   ## tinygif ## World's Smallest Gif ## 35 bytes, 43 if transparent ## Credit: http://www.perlmonks.org/?node_id=7974 use ssortingct; my($RED,$GREEN,$BLUE,$GHOST,$CGI); ## Adjust the colors here, from 0-255 $RED = 255; $GREEN = 0; $BLUE = 0; ## Set $GHOST to 1 for a transparent gif, 0 for normal $GHOST = 1; ## Set $CGI to 1 if writing to a web browser, 0 if not $CGI = 0; $CGI && printf "Content-Length: %d\nContent-Type: image/gif\n\n", $GHOST?43:35; printf "GIF89a\1\0\1\0%c\0\0%c%c%c\0\0\0%s,\0\0\0\0\1\0\1\0\0%c%c%c\1\ +0;", 144,$RED,$GREEN,$BLUE,$GHOST?pack("c8",33,249,4,5,16,0,0,0):"",2,2,4 +0; 

Exécuter …

 $ perl tinygif > tiny.gif $ ll tiny.gif -rw-r--r-- 1 stackoverflow staff 45B Apr 3 10:21 tiny.gif 

Point transparent, 43 octets:

 echo "\x47\x49\x46\x38\x39\x61\x1\x0\x1\x0\x80\x0\x0\xff\xff\xff\xff\xff"; echo "\xff\x21\xf9\x04\x1\x0a\x0\x1\x0\x2c\x0\x0\x0\x0\x1\x0\x1\x0"; echo "\x0\x2\x2\x4c\x1\x0\x3b"; 

Point orange, 35 octets:

 echo "\x47\x49\x46\x38\x37\x61\x1\x0\x1\x0\x80\x0\x0\xfc\x6a\x6c\x0"; echo "\x0\x0\x2c\x0\x0\x0\x0\x1\x0\x1\x0\x0\x2\x2\x44\x1\x0\x3b"; 

Sans tableau de couleurs (éventuellement peint en noir), 26 octets:

 echo "\x47\x49\x46\x38\x39\x61\x1\x0\x1\x0\x0\xFF"; echo "\x0\x2C\x0\x0\x0\x0\x1\x0\x1\x0\x0\x2\x0\x3B"; 

Les deux premiers que j’ai trouvés il y a quelque temps (à une époque où la vulnérabilité était minime) et je ne me souviens plus des sources. Le dernier que j’ai trouvé ici .

PS: à des fins de suivi, pas comme entretoises.

Je pense que c’est le plus mémorable 1×1 (38 octets):

 data:image/gif,GIF89a%01%00%01%00///; 

Selon les spécifications d’en-tête GIF:

 GIF Header Offset Length Contents 0 3 bytes "GIF" 3 3 bytes "87a" or "89a" 6 2 bytes  8 2 bytes  

Premier %01%00 est largeur = 0x0001

notez que 1px est %01%00 est égal à 0x0001

pas %00%01 sinon il sera 0x0100

La seconde est la hauteur, comme ci-dessus

3 octets suivants vous pouvez entrer n’importe quoi, le navigateur peut parsingr

par exemple /// ou !!! ou ,,, ou ;;; ou +++

le dernier octet doit être ; , !

en passant, si vous utilisez /// ou \\\ aux 3 octets à côté de la taille

le titre de la page affichera le dernier caractère, sinon affichera gif,...

testé avec Chrome, Firefox a fonctionné, IE ne fonctionne pas

http://soffr.miximages.com/filesize/0.gif Est de 43 octets, rase un peu.

Vous ne devriez pas vraiment utiliser les “gifs d’espacement”. Ils ont été utilisés dans les années 90; Désormais, ils sont très obsolètes et ils ne servent à rien, et ils entraînent plusieurs problèmes d’accessibilité et de compatibilité.

Utilisez CSS.

Je me souviens une fois, il y a longtemps, j’ai essayé de créer le plus petit gif possible. Si vous suivez la norme, si je me souviens bien, la taille est de 32 octets. Mais vous pouvez “pirater” la spécification et avoir un octet de 26-28, qui apparaîtra dans la plupart des navigateurs. Ce GIF n’est pas entièrement “correct” mais fonctionne, parfois. Utilisez simplement une spécification d’en-tête GIF et un éditeur HEX.