it-swarm.com.de

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

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 Bild verwenden, um die Anzahl der HTTP-Anforderungen zu verringern, aber was wäre die kleinstmögliche Zeichenfolge, um ein transparentes Bild zu erstellen?

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

110
Jacob R

Nach dem Herumspielen mit verschiedenen transparenten GIFs sind einige instabil und verursachen CSS-Pannen. Wenn Sie beispielsweise ein <img> Haben und das kleinstmögliche transparente GIF verwenden, funktioniert dies problemlos. Wenn Sie jedoch möchten, dass Ihr transparentes GIF ein background-image Hat, 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 als weiteren Tipp image/gif Nicht aus, wie in einem Kommentar vorgeschlagen. Dies kann in mehreren Browsern zu Problemen führen.

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

Die endgültige Länge hängt davon ab, womit es komprimiert wurde.

19
Adria

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

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

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

16
KARASZI István

Kleinstes PNG - 114 Bytes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=
11
joshcarr

Dieser Typ Bricht das Problem über die GIF-Spezifikation auf. Seine Lösung für die transparent.gif wä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 in der Regel 89a.

  • Logical Screen Descriptor (7 Bytes)

    In diesem Abschnitt der Datei wird, ohne auf allzu viele Details einzugehen, 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, einem Byte für Rot, Grün und Blau. In unserer Datei ist die erste Farbe Weiß und die zweite Farbe ist Schwarz.

  • Grafiksteuerungserweiterung (8 Byte)

    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).

  • Image Descriptor (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 war nicht dafür ausgelegt, 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 fast so klein wie möglich sind.

Aber ich habe es geschafft, einen Trick zu finden, um es ein bisschen kleiner zu machen. In der Norm wird erwähnt, dass eine globale Farbtabelle optional ist. Natürlich ist nicht klar, was passiert, wenn Sie ein GIF ohne Farbtabelle erstellen.

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

Daher habe ich die logische Bildschirmbeschreibung dahingehend geändert, dass keine globale Farbtabelle vorhanden ist, und die Tabelle selbst entfernt, wodurch insgesamt sechs Bytes gespart und die Dateigröße auf nur 37 Bytes gesenkt wurde.

Interessanterweise hat mir Wordpress) eine schöne Liste von Fehlermeldungen von Gd gegeben, in denen ich mich beschwerte, dass dies keine gültige GIF-Datei ist, obwohl Firefox und das GIMP sowohl geöffnet als auch angezeigt werden (oder?). angezeigt ", wenn es transparent ist?) die Datei in Ordnung.

Um es noch kleiner zu machen, habe ich nach dem größten verbleibenden „optionalen“ Block im Bild gesucht, der grafischen Steuerungserweiterung. Wenn Sie keine Transparenz benötigen, wird dieser Block nicht mehr benötigt. Das sind weitere 8 Byte, die Sie mitnehmen können.

Quelle: Das kleinste GIF aller Zeiten .

10
mckamey

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

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

Standalone-SVG-Datei würde wie folgt aussehen (62 Bytes):

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

Siehe auch:

6
kenorb

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

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

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

4
Jurgis

Für leeres Bild:

data:null

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

0
T.Todua