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

Nachdem ich mit verschiedenen transparenten GIFs herumgespielt habe, sind einige instabil und verursachen CSS-Störungen. Zum Beispiel, wenn Sie ein <img> und Sie verwenden das kleinstmögliche transparente GIF, funktioniert es gut, aber wenn Sie dann wollen, dass Ihr transparentes GIF einen background-image dann ist dies unmöglich. Aus irgendeinem Grund verhindern einige GIFs, wie die folgenden, CSS-Hintergründe (in einigen Browsern).

Kürzere (aber instabile - 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

---

Ein weiterer Tipp: Lassen Sie nicht aus, dass image/gif wie ein Kommentar nahelegt. Dies wird in mehreren Browsern nicht funktionieren.

Answer 2

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

Die endgültige Länge hängt davon ab, womit die Datei gzipped wird.

Answer 3

Kleinstes PNG - 114 Bytes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Answer 4

Ich denke, dass es sich um eine komprimierte transparente 1x1-GIF-Datei (82 Byte) handeln muss:

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

Erzeugt mit dopiaza.org data:URI-Generator .

Answer 5

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

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

Eine eigenständige svg-Datei würde wie folgt aussehen (62 Bytes):

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

Siehe auch:

• Optimierung von SVGs in Daten-URIs
• Url-Kodierer für SVG ( GitHub ) / SVG CSS URI - Optimierter Ersetzer