Kleinstmögliches Daten-URI-Bild für ein transparentes Bild

Question

Ich verwende ein transparentes 1x1-Bild mit einem Hintergrundbild, um Sprites verwenden zu können und dennoch alternativen Text für einige Icons bereitzustellen.

Ich möchte einen Daten-URI für das Bild verwenden, um die Anzahl der HTTP-Anfragen zu reduzieren, aber Was wäre die kleinstmögliche Zeichenkette, um ein transparentes Bild zu erzeugen? ?

Ich weiß, ich könnte Daten URI:s für die tatsächlichen Bilder anstelle von Sprites, aber es ist einfacher zu pflegen, wenn alles in der CSS gehalten wird, anstatt verstreut herum.

Answer 1

Dieser Typ schlüsselt das Problem anhand der GIF-Spezifikation auf. Seine Lösung für das transparent.gif würde 37 Bytes betragen:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Er geht sogar noch kleiner, indem er zuerst die Transparenz und dann die Farbtabelle entfernt...

---

GIF89a-Spezifikation

• Kopfzeile (6 Bytes)

  Besteht aus den Bytes "GIF" und der Versionsnummer, die normalerweise lautet 89a .

• Logischer Bildschirm Deskriptor (7 Bytes)

  Ohne zu sehr ins Detail zu gehen, wird in diesem Abschnitt der Akte Folgendes angegeben:

  • Die Datei ist 1x1 Pixel groß.
  • Es gibt eine globale Farbtabelle.
  • Es gibt 2 Farben in der globalen Farbtabelle, die zweite sollte als Hintergrundfarbe verwendet werden.

• Globale Farbtabelle (6 Bytes)

  Besteht aus 3 Bytes pro Farbe, jeweils ein Byte für Rot, Grün und Blau. In unserer Datei ist die erste Farbe weiß und die zweite Farbe ist schwarz.

• Erweiterung der Grafiksteuerung (8 Bytes)

  Wird verwendet, um anzugeben, dass die zweite Farbe in der Farbtabelle als transparent behandelt werden soll (kann auch für Animationsparameter verwendet werden, ist aber nicht in dieser Datei enthalten).

• Bild Deskriptor (10 Bytes)

  Eine GIF-Datei kann tatsächlich mehrere "Bilder" enthalten, so dass Sie keine Bilddaten für Teile des Bildes angeben müssen, die dieselbe Farbe wie die Hintergrundfarbe haben. Jeder Bildblock hat eine Position und eine Größe innerhalb der Gesamtgröße des Bildes. In der obigen Datei ist die Position 0,0 und die Größe 1x1.

• Bilddaten (5 Bytes)

  Eine LZW-verschlüsselt Block von Bilddaten. Es werden 5 Bytes benötigt, um ein einzelnes Pixel des Bildes darzustellen. Der Komprimierungsalgorithmus wurde nicht dafür entwickelt, ein einzelnes Byte sehr gut zu komprimieren.

• GIF-Anhänger (1 Byte)

  Ein einzelnes Byte mit einem Hex-Wert von 3B ( ; in ASCII) zeigt das Ende des GIFs an.

Ausgehend von den erforderlichen Strukturen für ein transparentes GIF stellt sich heraus, dass 43 Bytes schon fast die kleinstmögliche Größe sind.

Aber ich habe einen Trick herausgefunden, um sie etwas kleiner zu machen. In der Norm wird erwähnt, dass es optional ist, eine globale Farbtabelle zu haben. Natürlich ist nicht definiert, was passiert, wenn man ein GIF ohne eine Farbtabelle erstellt.

Wenn Sie einen Farbtabellenindex als transparent definiert haben, scheint es den GIF-Decodern jedoch egal zu sein, dass es eigentlich keine Farbtabelle gibt.

Also änderte ich den logischen Bildschirmdeskriptor, um anzuzeigen, dass es keine globale Farbtabelle gab, und entfernte die Tabelle selbst, was insgesamt sechs Bytes einsparte und die Dateigröße auf nur 37 Bytes reduzierte.

Interessanterweise gab mir Wordpress eine schöne Liste von GD-Fehlermeldungen, die besagen, dass es sich nicht um eine gültige GIF-Datei handelt, obwohl Firefox und GIMP die Datei problemlos öffnen und anzeigen (wird sie "angezeigt", wenn sie transparent ist?).

Um es noch kleiner zu machen, habe ich mir den größten verbleibenden "optionalen" Block im Bild angesehen, die grafische Steuerungserweiterung. Wenn Sie keine Transparenz benötigen, wird dieser Block nicht mehr benötigt, und das sind weitere 8 Bytes, die Sie wegnehmen können.

Quelle: Das winzigste GIF aller Zeiten .

Answer 2

Ich verwende folgende Datenuri, um ein leeres Bild zu erhalten: //:0

Answer 3

Dies ist die kleinste, die ich gefunden habe (26 Bytes):

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

Answer 4

Sie können verwenden

data:null;,

<img src="data:null;," alt="My null image">

<img src="data:null;," alt="My null image" style="width: 100px;height: 10px;background: red;padding: 25px 16px;margin: 5px 15px;z-index: 5000;display: block ruby;">

oder

  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
        9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Answer 5

Für leeres Bild :

data:null

(es wird übersetzt in src=(unknown) )