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

124

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.

Jacob Rask
quelle
1
Wäre es nicht besser, ein aktuelles 1x1-Image mit Caching-Setup zu verwenden? Sie haben nicht mehr http-Anforderungen, und im gesamten Datenaufwand kann die URL zum Bild kleiner sein als die 78-Byte-Daten-URI.
Redzarf
1
@ Redzarf: Eigentlich nein, es wäre wahrscheinlich nicht besser. Kleine, sich selten ändernde Ressourcen wirken sich nicht aufgrund der Dateigröße, sondern aufgrund des Roundtrips einer HTTP-Anforderung auf die Ladezeiten der Seiten aus. Eine weitere Subtilität ist, dass die meisten Browser das Zwischenspeichern von CSS viel aggressiver gestalten als andere Ressourcen, sodass der Browser weniger wahrscheinlich mit dem Aktualisieren von CSS (und den damit eingebetteten Inhalten) experimentiert und so mehr http-Roundtrips spart.
SingleNegationElimination

Antworten:

167

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.

Layke
quelle
1
+1 danke! Mir ist aufgefallen, dass dies praktisch ist. Ich habe Ihre Daten verwendet, um dieses Plugin zu erstellen, damit ich reaktionsschnelle Bilder nativ mit Hintergrundabdeckung verwenden kann oder enthalten-> github.com/sebringj/jquery-transparent-gif/blob/master/…
Jason Sebring
1
Warum ist der kürzere "instabil"? Ich sehe, dass es gelegentlich ein schwarzes Bild verursacht. Ich bin nur neugierig, ob jemand weiß warum.
Jvenema
Nach vielen Schmerzen habe ich tatsächlich festgestellt, dass die "kürzere" Version den Browser auf einigen (nicht allen) Seiten meiner Website in älteren Android-Browsern (HTC One S, OS 4.1) tatsächlich zum Absturz gebracht hat.
WebSeed
Tolle Antwort, aber noch nicht die kleinstmögliche .
Josh Habdas
22
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.

Adria
quelle
3
Gibt es Argumente gegen die Verwendung einer SVG? Gibt es Fälle, in denen es keine gute Idee ist?
Tremby
Eine SVG ist in vielen Fällen in Ordnung, aber in Kombination mit width: auto;nimmt eine SVG die Breite ihres übergeordneten Elements an. Ein statisches Bild wie GIF oder PNG behält bei einer festgelegten Höhe und Breite automatisch sein Seitenverhältnis bei.
snazzybouche
16

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 .

KARASZI István
quelle
13

Kleinstes PNG - 114 Bytes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=
Joshcarr
quelle
Es ist erwähnenswert, dass dies mit GIMP leicht generiert werden kann. Die resultierende Datei hat eine Größe von 68 Bytes (die kleinstmögliche bisher).
Ismael Miguel
@AminahNuraini das ist ein PNG.
Joshcarr
2
@AminahNuraini: Was ist mit dieser Antwort, die "SVG" zu Ihnen sagt?
Leichtigkeitsrennen im Orbit
10

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 .

mckamey
quelle
1
Gemäß diesem Artikel beruht die 37-Byte-Variante auf undefiniertem Verhalten, und tatsächlich erwähnt der Autor, dass der Image-Parser von WordPress nicht damit umgehen kann. Während es wahrscheinlich auf den meisten Browsern funktioniert, würde ich es als riskante Wahl betrachten. Ich würde mich an die 43-Byte-Variante desselben Artikels halten. Eine Variante davon ist bereits oben veröffentlicht . Siehe auch Diskussion in den Kommentaren zur Top-Antwort
Brian
9

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:

Kenorb
quelle
2
Kann auch sein codiert in einem Favicon oder CSS und verwendet contentEigenschaft.
Josh Habdas
6

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

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=
KarasQ
quelle
Dies wird in IE11 schwarz angezeigt.
Thomasz86
4

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

Jurgis
quelle
Firefox 44 und Internet Explorer 11 zeigen das Tag img alt. Sie müssen entweder eines der oben genannten verwenden oder das Alt-Tag entfernen
PersyJack
Dies ist effizienter als eine Anfrage / Antwort für ein Bild?
Nu Everest
Wird jedoch nicht validiert
Lucian Davidescu
0

Für leeres Bild:

data:null

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

T.Todua
quelle
Ich mag das im Prinzip, aber der w3c-Validator genehmigt es in der Praxis nicht: Fehler: Ungültige Wertdaten: null für das Attribut src für das Element img: Vorzeitiges Ende des URI.
brennanyoung