Kleinstes Daten-URI-Bild für ein transparentes Bild möglich

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

Ich möchte einen Daten-URI für das Image verwenden, um die Anzahl der HTTP-Anforderungen zu verringern. Was wäre jedoch die kleinstmögliche Zeichenfolge, um ein transparentes Image zu erstellen ?

Mir ist klar, dass ich Daten-URIs für die tatsächlichen Bilder anstelle von Sprites verwenden könnte, aber es ist einfacher zu pflegen, wenn alles im CSS gespeichert ist, anstatt verstreut zu sein.

Nach dem Herumspielen mit verschiedenen transparenten GIFs sind einige instabil und verursachen CSS-Störungen. Wenn Sie beispielsweise ein haben <img>und das kleinstmögliche transparente GIF verwenden, funktioniert dies einwandfrei. Wenn Sie jedoch möchten, dass Ihr transparentes GIF ein hat background-image, ist dies unmöglich. Aus irgendeinem Grund verhindern einige GIFs wie die folgenden CSS-Hintergründe (in einigen Browsern).

Kürzer (aber instabil - 74 Bytes)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Ich würde empfehlen, die etwas längere und stabilere Version wie folgt zu verwenden:

⇊ Stabil ⇊ (aber etwas länger - 78 Bytes)

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

Lassen Sie image/gifals weiteren Tipp nicht aus, wie ein Kommentar andeutet. Dies wird in mehreren Browsern unterbrochen.

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

Die endgültige Länge hängt davon ab, mit was es gezippt wird.

Ich denke, es muss eine komprimierte transparente 1x1-GIF-Datei (82 Byte) sein:

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

Generiert mit dopiaza.org-Daten: URI-Generator .

Kleinstes PNG - 114 Bytes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Dieser Typ bricht das Problem über die GIF-Spezifikation auf. Seine Lösung für das transparent.gifwäre 37 Bytes:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

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

GIF89a-Spezifikation

• Header (6 Bytes)

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

• Logischer Bildschirmdeskriptor (7 Bytes)

  Ohne zu sehr ins Detail zu gehen, zeigt dieser Abschnitt der Datei Folgendes an:

  • Die Datei ist 1x1 Pixel groß.
  • Es gibt eine globale Farbtabelle.
  • Die globale Farbtabelle enthält zwei Farben. Die zweite Farbe sollte als Hintergrundfarbe verwendet werden.

• Globale Farbtabelle (6 Bytes)

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

• Grafische Steuerungserweiterung (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 jedoch nicht in dieser Datei enthalten).

• Bilddeskriptor (10 Bytes)

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

• Bilddaten (5 Bytes)

  Ein LZW-codierter Block von Bilddaten. Es dauert 5 Bytes, um das einzelne Pixel darzustellen, das das Bild enthält. Der Komprimierungsalgorithmus wurde nicht entwickelt, um ein einzelnes Byte sehr gut zu komprimieren.

• GIF-Trailer (1 Byte)

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

Basierend auf den erforderlichen Strukturen für ein transparentes GIF stellt sich heraus, dass 43 Bytes so klein wie möglich sind.

Aber ich habe es geschafft, einen Trick herauszufinden, um es ein bisschen 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 Sie ein GIF ohne Farbtabelle erstellen.

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

Also habe ich den logischen Bildschirmdeskriptor geändert, um anzuzeigen, dass es keine globale Farbtabelle gibt, und die Tabelle selbst entfernt, wodurch insgesamt sechs Bytes gespeichert und die Dateigröße auf nur 37 Bytes reduziert wurden.

Interessanterweise gab mir Wordpress eine schöne Liste von Fehlermeldungen von GD, in denen ich mich beschwerte, dass dies keine gültige GIF-Datei ist, obwohl Firefox und GIMP die Datei sowohl öffnen als auch anzeigen (wird sie "angezeigt", wenn sie transparent ist?) Alles gut.

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 entfernen können.

Quelle: Das kleinste GIF aller Zeiten .

Sie können die folgenden SVG-Daten (60 Byte) ausprobieren:

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

Eine eigenständige SVG-Datei würde folgendermaßen aussehen (62 Byte):

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

Siehe auch:

• Optimieren von SVGs in Daten-URIs
• URL-Encoder für SVG ( GitHub ) / SVG CSS URI - Optimierter Ersatz

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

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

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

Für leeres Bild:

data:null

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