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

BMP - 1x1 RGBA (transparent) - basierend auf diese - 194 Bytes

data:image/bmp;base64,Qk1xAAAAAAAAAHsAAABsAAAAAQAAAAEAAAABACAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAD/AAD/AAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQ==

innerhalb von Java-Skript kann es auf 106 Bytes komprimiert werden

"data:image/bmp;base64,Qk1x"+"9Hs3Bs5Q4E4B1C3w9995D/2D/2D/8/w999999993Q==".replace(/\d/g,c=>"A".repeat(c))

let s = "data:image/bmp;base64,Qk1x"+"9Hs3Bs5Q4E4B1C3w9995D/2D/2D/8/w999999993Q==".replace(/\d/g,c=>"A".repeat(c))

console.log(s);