Base64-Bild-Encoder

Wann das Einfügen von Bildern sinnvoll ist

Kandidaten, die vor dem Einbetten geprüft und getestet werden sollten:

• Icons unter 2 KB, Spart eine HTTP-Anfrage mit vernachlässigbarem Overhead.
• E-Mail-Vorlagen - Daten-URIs werden von Mail-Clients nicht einheitlich unterstützt. Testen Sie die Zielprogramme und verwenden Sie bei Bedarf CID- oder gehostete Bilder.
• Hero-Platzhalter (LQIP), Niedrigqualitative verschwommene Version inline, volles Bild wird danach geladen.
• Einmal verwendete SVGs, SVG ist Text; eine korrekt prozentkodierte Daten-URI kann je nach Zeichen und Formatierung kleiner als Base64 sein.

Schlechte Kandidaten:

• Große Bilder, Eine Aufblähung um 33 % für ein 500 KB Bild sind 166 KB Abfall.
• Bilder, die über Seiten hinweg wiederverwendet werden, Das Einfügen deaktiviert das Browser-Caching über Routen hinweg.
• Kritisches CSS, Das Einfügen schwerer Bilder sprengt den kritischen Pfad.

Größenerwartungen

Daten-URI-Format

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==

• data:-Schema
• MIME-Typ
• ;base64,-Indikator
• Die kodierten Bytes

SVG ist ein Sonderfall

Base64 vergrößert die ursprünglichen SVG-Bytes vor der umgebenden Syntax um ungefähr ein Drittel; Prozentkodierung verlängert nur Zeichen, die maskiert werden müssen. Welche Form kürzer ist, hängt vom SVG ab. Die Textform sollte eine korrekt prozentkodierte data:image/svg+xml,...-Adresse verwenden. Der bloße ;utf8-Zusatz ist kein standardmäßiger Daten-URI-Parameter, und unmaskierte Zeichen wie #, %, Anführungszeichen oder Leerraum können die Adresse beschädigen. Dieses Tool prüft die SVG-Struktur, entfernt aber keine Skripte, Ereignisattribute oder externen Referenzen. Prüfen Sie daher nicht vertrauenswürdige SVGs vor der Verwendung.