[Image] file più piccolo per immagini a pixel singolo trasparenti



Answers

Ecco una GIF trasparente a 32 byte che (dovrebbe) funziona ovunque

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

Spiegazione

Il raggiungimento del GIF più piccolo possibile dipende dall'implementazione delle specifiche GIF utilizzate. I browser Web sono solitamente indulgenti quando si tratta di decodificare i file GIF. È possibile trovare una GIF molto piccola che funziona come trasparente in un browser, ma in bianco / nero in un altro. E potrebbe anche non aprirsi in software come Gimp, Paint e Photoshop.

Il più piccolo GIF trasparente quasi valido è di 32 byte. "Quasi valido", perché il trailer e alcuni dati LZW possono essere scartati e funzionerà ancora praticamente in tutti i software.

Questo viene fatto seguendo le specifiche GIF e ogni componente può essere suddiviso come segue:

  1. Firma / versione del file, 6 byte
  2. Logical Screen Descriptor , 7 byte
  3. Opzionale: tabella colori globale , 6 byte¹
  4. Opzionale: estensione controllo grafica , 8 byte²
  5. Descrittore di immagine , 10 byte
  6. Dati LZW , 1-4 byte³
  7. Opzionale: Trailer ( 0x3B ), 1 byte⁴

¹ La Global Color Table può essere rimossa in sicurezza disabilitandola nel Logical Screen Descriptor
² Ciò è richiesto per la trasparenza nella maggior parte dei software
³ Sono richiesti solo 3 byte di dati LZW e i byte possono essere praticamente qualsiasi cosa. Sebbene solo il primo byte di 0x02 sia strettamente necessario.
⁴ Il rimorchio può essere rimosso senza effetti negativi.

La maggior parte dei software GIF richiede la presenza di una tabella colori globale / locale. Ulteriori riduzioni (ad esempio l'eliminazione della tabella colori globale) potrebbero funzionare in alcuni browser, ma i loro effetti sono in genere specifici dell'implementazione. Modifica: c'è un flag per disabilitare la tavola dei colori globale, e non sembra causare alcun problema.

Altri esempi:

I seguenti 24 byte sono resi come GIF trasparenti in Chrome, tuttavia in Firefox è bianco opaco:

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=

I 14 byte seguenti hanno funzionato solo in Chrome, ma non più:

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

data:image/gif;base64,R0lGODlhAQABAAAAACw=
Question

Sto cercando la più piccola (in termini di filesize) di 1 pixel trasparente.

Attualmente ho un gif di 49 byte che sembra essere il più popolare.

Ma ricordo che molti anni fa ne avevo uno che era meno di 40 byte. Potrebbe essere stato 32 byte.

Qualcuno può fare di meglio? Il formato grafico non è un problema finché i browser Web moderni possono visualizzarlo e rispettare la trasparenza.

AGGIORNAMENTO : OK, ho trovato una gif trasparente a pixel da 42 byte: http://bignosebird.com/docs/h3.shtml

UPDATE2 : Sembra che qualcosa di meno di 43 byte possa essere instabile in alcuni client. Non posso averlo.




  • Vedi: http://www.google-analytics.com/__utm.gif , 35B

  • Alternativa in 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;
    

Eseguirlo ...

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



Non dovresti usare veramente "spacer gif". Erano usati negli anni '90; ora sono molto obsoleti e non hanno alcuno scopo e causano diversi problemi di accessibilità e compatibilità.

Usa CSS.




Per espandere la risposta dell'array di byte di Jacob, ho generato l'array di byte c # per un gif trasparente 1x1 creato in 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};



Penso che questo sia il più memorabile 1x1 (38 byte):

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

Secondo le specifiche dell'intestazione 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>

Il primo %01%00 è larghezza = 0x0001

nota che 1px è %01%00 uguale a 0x0001

non %00%01 altrimenti sarà 0x0100

Il secondo è l'altezza, come sopra

i prossimi 3 byte puoi inserire qualsiasi cosa, il browser può analizzarlo

ad esempio /// o !!! o ,,, o ;;; o +++

l'ultimo byte deve essere ; , !

a proposito, se usi /// o \\\ ai 3 byte accanto alla dimensione

il titolo della pagina mostrerà l'ultimo carattere, altrimenti mostrerà gif,...

testato con Chrome, Firefox ha funzionato entrambi, IE non funziona






Links