Immagine URI di dati più piccola possibile per un'immagine trasparente

Sto usando un'immagine 1x1 trasparente con un'immagine di sfondo, per poter usare gli sprite e fornire comunque testo alternativo per alcune icone.

Voglio utilizzare un URI di dati per l'immagine per ridurre il numero di richieste HTTP, ma quale sarebbe la stringa più piccola possibile per produrre un'immagine trasparente ?

Mi rendo conto che potrei usare l'URI dei dati: s per le immagini reali invece degli sprite, ma è più facile da mantenere quando tutto è mantenuto nel CSS invece che sparso.

Dopo aver giocato con diverse GIF trasparenti, alcune sono instabili e causano problemi CSS. Ad esempio, se hai una <img>GIF trasparente e usi la più piccola GIF trasparente possibile, funziona bene, tuttavia, se vuoi che la tua GIF trasparente abbia una background-image, allora questo è impossibile. Per qualche motivo, alcune GIF come le seguenti impediscono gli sfondi CSS (in alcuni browser).

Più breve (ma instabile - 74 byte)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Consiglierei di utilizzare la versione leggermente più lunga e più stabile come segue:

⇊ Stabile ⇊ (ma leggermente più lungo - 78 byte)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

Come altro suggerimento, non omettere image/gifcome suggerisce un commento. Ciò si interromperà in diversi browser.

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E

La lunghezza finale dipende da cosa è compresso con gzip.

Penso che debba essere un file GIF 1x1 trasparente compresso (82 byte):

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

Generato con i dati di dopiaza.org: generatore di URI .

PNG più piccolo - 114 byte:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Questo ragazzo risolve il problema tramite le specifiche GIF. La sua soluzione per il transparent.gifsarebbe 37 byte:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Va ancora più piccolo rimuovendo prima la trasparenza, poi la tavola dei colori ...

Specifica GIF89a

• Intestazione (6 byte)

  È costituito dai byte "GIF" e dal numero di versione, che di solito è 89a.

• Descrittore logico dello schermo (7 byte)

  Senza entrare troppo nei dettagli, questa sezione del file indica quanto segue:

  • Il file ha una dimensione di 1x1 pixel.
  • C'è una tavola dei colori globale.
  • Ci sono 2 colori nella tavola dei colori globale, il secondo dovrebbe essere usato come colore di sfondo.

• Tabella dei colori globale (6 byte)

  Consiste di 3 byte per colore, un byte per rosso, verde e blu, rispettivamente. Nel nostro file, il primo colore è bianco e il secondo colore è nero.

• Estensione controllo grafico (8 byte)

  Utilizzato per indicare che il secondo colore nella tavola dei colori deve essere trattato come trasparente (può essere utilizzato anche per i parametri di animazione, ma non è in questo file).

• Descrittore immagine (10 byte)

  Un file GIF può effettivamente contenere più "immagini" al suo interno, il che evita di dover specificare i dati dell'immagine per parti dell'immagine che hanno lo stesso colore del colore di sfondo. Ogni blocco immagine ha una posizione e una dimensione all'interno della dimensione complessiva dell'immagine. Nel file sopra, la posizione è 0,0 e la dimensione è 1x1.

• Dati immagine (5 byte)

  Un blocco di dati immagine con codifica LZW . Sono necessari 5 byte per rappresentare il singolo pixel che l'immagine contiene. L'algoritmo di compressione non è stato progettato per comprimere molto bene un singolo byte.

• Trailer GIF (1 byte)

  Un singolo byte con un valore esadecimale di 3B( ;in ASCII) indica la fine della GIF.

Sulla base delle strutture richieste per una GIF trasparente, risulta che 43 byte sono abbastanza vicini al più piccolo che puoi ottenere.

Ma sono riuscito a trovare un trucco per renderlo un po 'più piccolo. Nello standard è menzionato che è opzionale avere una tavola dei colori globale. Ovviamente non è definito cosa succede quando si crea una GIF senza una tavola dei colori.

Quando hai un indice della tavola dei colori definito come trasparente, tuttavia, ai decoder GIF non sembra importare che non ci sia effettivamente una tavola dei colori.

Quindi ho cambiato il descrittore logico dello schermo per indicare che non c'era una tabella dei colori globale e ho rimosso la tabella stessa, salvando un totale di sei byte, portando la dimensione del file a soli 37 byte.

È interessante notare che Wordpress mi ha fornito un delizioso elenco di messaggi di errore di GD che si lamentano del fatto che questo non è un file GIF valido, nonostante il fatto che Firefox e GIMP aprano e visualizzano (è "visualizzato" quando è trasparente?) Il file va bene.

Per renderlo ancora più piccolo, ho guardato al più grande blocco "opzionale" rimasto nell'immagine, l'estensione del controllo grafico. Se non hai bisogno di trasparenza, questo blocco non è più necessario e sono altri 8 byte che puoi portare via.

Fonte: la GIF più piccola di sempre .

Puoi provare i seguenti dati SVG (60 byte):

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

Il file svg autonomo sarebbe simile a (62 byte):

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>

Guarda anche:

• Ottimizzazione di SVG negli URI di dati
• Codificatore URL per URI SVG ( GitHub ) / SVG CSS - Sostituzione ottimizzata

Questo è il più piccolo che ho trovato (26 byte):

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

Sto usando i seguenti dati uri per ottenere un'immagine vuota: //:0

Per un'immagine vuota:

data:null

(si tradurrà in src=(unknown))