Base64.imBase64 Online-Kodierung und -Dekodierung(Das beste Base64 Online-Tool)
Tutorial zur Verwendung von Base64.im
1. Warum Base64-Kodierung verwenden?
Die Base64-Kodierung ist eine Möglichkeit, Binärdaten (z. B. Bilddateien) in ein Textformat zu konvertieren und eignet sich ideal für die folgenden Szenarien:
- Schnelles Laden kleiner Bilder: Betten Sie Base64-Bilder in HTML- oder CSS-Dateien ein, um zusätzliche HTTP-Anfragen zu vermeiden und die Ladegeschwindigkeit zu erhöhen.
- HTML-E-Mail-Signatur: Betten Sie Bilder über Base64-Kodierung ein, um zu vermeiden, dass die Warnung „Bild anzeigen“ in Ihrem E-Mail-Client ausgelöst wird.
- Einzeldatei-Demos: Erstellen Sie Einzeldatei-Mockups oder Demoseiten für Kunden, die keine externen Ressourcen benötigen.
2. Unterstützte Bildformate
Dieses Tool unterstützt die Kodierung der folgenden gängigen Bildformate: .jpeg, .png, .gif, .webp, .svg, .BMP und .bmp.
3. So verwenden Sie base64.im zum Konvertieren von Bildern
Ein Bild hochladen: Wählen Sie das Bild aus, das Sie kodieren möchten, indem Sie die Bilddatei in das Browserfenster ziehen oder auf die Schaltfläche „Hochladen“ klicken.
Ergebnisse anzeigen: Sobald die Datei hochgeladen wurde, können Sie unten die Base64-Zeichenfolge sehen.
Upload-Limit: Sie können bis zu 20 Dateien gleichzeitig hochladen.
4. Verwenden Sie Base64-codierte Bilder als HTML-Bildquellen
Base64-Strings können als „src“-Attributwert des „img“-Tags in HTML verwendet werden. Hier ist ein Beispiel:
<img src="data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA..." width="100" height="50" alt="base64 test">
Nutzungsschritte:
① Klicken Sie auf die Schaltfläche „Kopieren“, die das Tool bereitstellt, um die Base64-Zeichenfolge in die Zwischenablage zu kopieren.
② Wenn Ihr Browser das direkte Kopieren nicht unterstützt, können Sie die Zeichenfolge manuell aus dem Dialogfeld kopieren.
③. Fügen Sie die Zeichenfolge in das Attribut „src“ in der HTML-Datei ein.
Sie können die Base64-Bilddemo auf CodePen ansehen.
5. Base64-codiertes Bild als CSS-Hintergrund verwenden
Base64-Strings können auch als Wert der CSS-Eigenschaft „background“ verwendet werden, um ein Hintergrundbild zu definieren. Hier ist ein Beispiel:
.my-class {
background: url('data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...');
}
Nutzungsschritte:
① Klicken Sie auf die Schaltfläche „Kopieren“ des Tools, um die Base64-Zeichenfolge in die Zwischenablage zu kopieren.
② Wenn die Schaltfläche „Kopieren“ nicht verfügbar ist, können Sie die Zeichenfolge manuell aus dem Dialogfeld kopieren.
③. Fügen Sie die Zeichenfolge in den Parameter „url()“ in der CSS-Datei ein.
Sie können die Base64-CSS-Demo auf CodePen ansehen.
6. Notizen
Base64-Kodierung ist für kleine Bilder geeignet. Große Dateien können die Dateigröße erhöhen. Sie wird nicht für große Bilder oder Ressourcen empfohlen, die häufig geladen werden müssen.
Bitte stellen Sie sicher, dass die codierte Zeichenfolge den Projektanforderungen entspricht und auf verschiedenen Geräten ordnungsgemäß angezeigt wird.
Durch die oben genannten Schritte können Sie Base64-Tools ganz einfach verwenden, um Bildkodierungsaufgaben abzuschließen und die Entwicklungseffizienz zu verbessern!