web-dev-qa-db-fra.com

taille de fichier la plus petite pour une image à pixel unique transparente

Je recherche la plus petite image transparente (en termes de taille de fichier) de 1 pixel.

Actuellement, j'ai un gif de 49 octets qui semble être le plus populaire.

Mais je me souviens il y a de nombreuses années en avoir un qui faisait moins de 40 octets. Cela aurait pu être 32 octets.

Quelqu'un peut-il faire mieux? Le format graphique n'est pas un problème tant que les navigateurs Web modernes peuvent l'afficher et respecter la transparence.

[~ # ~] mise à jour [~ # ~] : OK, j'ai trouvé un gif transparent transparent de 42 octets: http: //bignosebird.com/docs/h3.shtml

UPDATE2 : Il semble que tout élément inférieur à 43 octets soit instable sur certains clients. Ça ne peut pas ętre ça.

imagegraphicstransparencyfilesize
62
zaf

Regarde ça blank.gif fichier (43 octets). Moins de 49: D

20
gmunkhbaatarmn

Voici un 2 octets transparent GIF qui (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

Atteindre le plus petit GIF possible dépend de la mise en œuvre de la spécification GIF utilisée. Les navigateurs Web sont généralement indulgents en ce qui concerne le 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 presque valide GIF transparent est de 32 octets. "Presque valide", car la bande-annonce et certaines des données LZW peuvent être supprimées et elles seront toujours ouvertes dans pratiquement tous les logiciels.

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

  1. Signature/version du fichier, 6 octets
  2. Descripteur d'écran logique, 7 octets
  3. Facultatif: Global Color Table, 6 octets¹
  4. Facultatif: Graphics Control Extension, 8 octets²
  5. Descripteur d'image, 10 octets
  6. Données LZW, 1-4 octets³
  7. Facultatif: Bande-annonce (0x3B), 1 octet⁴

¹ Le Global Color Table peut être supprimé en toute sécurité en le désactivant dans le Logical Screen Descriptor
² Ceci est requis pour la transparence dans la plupart des logiciels
³ Seuls 3 octets des données LZW sont requis et les octets peuvent être presque n'importe quoi. Bien que seul le premier octet de 0x02 est strictement requis.
⁴ La remorque peut être retirée sans effets néfastes.

La plupart des logiciels GIF nécessitent la présence d'une table des couleurs globale/locale. D'autres réductions (par exemple la suppression de Global Color Table) peuvent fonctionner dans certains navigateurs, mais leurs effets sont généralement spécifiques à l'implémentation. Modifier: il y a un indicateur pour désactiver la table de couleurs globale, et cela ne semble pas poser de problème.

Autres exemples:

Les 24 octets suivants sont rendus sous la forme d'un GIF transparent dans Chrome, mais il est blanc opaque 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 auparavant en Chrome uniquement, mais plus: 

47 49 46 38 39 61 01 00 01 00 00 00 00 2C

data:image/gif;base64,R0lGODlhAQABAAAAACw=
81
bryc

Voici ce que j'utilise dans un tableau d'octets C # (évite l'accès 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 };

Dans asp.net MVC, cela peut être retourné comme ceci

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

Pour développer la réponse du tableau d'octets de Jacob, j'ai généré le tableau d'octets c # pour un gif transparent 1x1 que j'ai fait 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};
18
Michiel Cornille

http://polpo.org/blank.gif est un GIF transparent de 37 octets réalisé avec gifsicle.

Au format base64 prêt pour CSS:

data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==
14
polpo

  • Voir: http://www.google-analytics.com/__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 strict;
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
7
miku

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 (à l'époque de la vulnérabilité timthumb) et je ne me souviens pas des sources. Le dernier que j'ai trouvé ici .

P.S .: Utiliser à des fins de suivi, pas comme espaceurs.

4
s3v3n

Je pense que c'est le 1x1 le plus mémorable (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  <Logical Screen Width>
  8      2 bytes  <Logical Screen Height>

Première %01%00 est une largeur = 0x0001

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

ne pas %00%01 sinon ce sera 0x0100

La deuxième est la hauteur, comme ci-dessus

3 octets suivants, vous pouvez saisir n'importe quoi, le navigateur peut l'analyser

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

le dernier octet doit être: ;,!

soit dit 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 fonctionnait tous les deux, IE ne fonctionne pas

1
user3896501

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 s'affichera 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.

0
Ross

http://www.maproom.co.uk/0.gif Est de 43 octets, rase un peu.

0
Dested

Vous ne devriez pas vraiment utiliser de "gifs d'espacement". Ils ont été utilisés dans les années 90; maintenant, ils sont très obsolètes et ils n'ont aucun but, et ils causent plusieurs problèmes d'accessibilité et de compatibilité.

Utilisez CSS.

0
Thomas Bonini