Anleitung
- Legen Sie eine WebP-Datei auf dem Ablagebereich ab, klicken Sie darauf, um eine Datei auszuwählen, oder fügen Sie ein Bild ein. PNG- und JPEG-Dateien funktionieren ebenfalls.
- Um WebP aus einem anderen Format zu erzeugen, wählen Sie unter „Konvertieren in“ WebP als Zielformat und stellen die „Qualität“ ein.
- Legen Sie bei Bedarf unter „Max. Breite“ eine maximale Breite fest und vergleichen Sie dann die Original- mit der kodierten Größe.
- Kopieren oder laden Sie die Data-URI, reines Base64, den HTML-img-Tag, CSS-background-image oder Markdown herunter.
Was ist WebP?
WebP ist ein Bildformat, das Google 2010 veröffentlicht hat. Es bietet verlustbehaftete Komprimierung auf Basis des Videocodecs VP8, einen separaten verlustfreien Modus, einen Alphakanal und Animationen, alles in einem Format. Der MIME-Typ ist image/webp, und da die Datei ein RIFF-Container ist, beginnt die Base64-Ausgabe mit UklGR. Laut Google sind verlustfreie WebP-Dateien etwa 26 % kleiner als PNG und verlustbehaftete bei vergleichbarer Qualität 25 bis 34 % kleiner als JPEG.
Warum WebP gut zu Data-URIs passt
Base64 vergrößert jede Datei um dasselbe Drittel, daher ergibt die kleinste Quelle den kürzesten String. Das macht WebP zur naheliegenden Wahl: Ein transparentes PNG-Icon behält bei der Konvertierung in WebP seine Transparenz und wird meist kleiner, und ein JPEG-Foto schrumpft bei ähnlicher visueller Qualität. Sehr hohe Qualitätseinstellungen können eine Datei erzeugen, die größer ist als ein optimiertes Original, prüfen Sie also vor dem Kopieren die kodierte Größe.
Animierte WebP-Dateien behalten alle Einzelbilder, wenn Sie sie unverändert kodieren. Beim Konvertieren oder Skalieren wird nur ein einzelnes Bild neu gerendert.
Unterstützung in Browsern und E-Mail-Programmen
Alle aktuellen gängigen Browser zeigen WebP an: Chrome, Edge, Firefox, Opera und Safari ab Version 14. Nur sehr alte Browser wie der Internet Explorer unterstützen es nicht. Bei E-Mails sieht es anders aus: Mehrere Desktop-E-Mail-Programme, darunter Outlook für Windows, stellen WebP nicht dar. Verwenden Sie in E-Mail-Vorlagen daher PNG oder JPEG.
WebP-Data-URIs in JavaScript erstellen
// Eine vom Benutzer ausgewählte Datei lesen
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Ein Canvas als WebP mit 80 % Qualität neu kodieren
const uri = canvas.toDataURL('image/webp', 0.8);Wenn ein Browser WebP nicht kodieren kann, weicht toDataURL stillschweigend auf PNG aus. Prüfen Sie daher, ob das Ergebnis mit data:image/webp beginnt.
Häufig gestellte Fragen
Kann ich hier PNG oder JPEG in WebP-Base64 umwandeln?
Ja. Laden Sie das Bild, wählen Sie WebP als Zielformat und stellen Sie die Qualität ein. Die Konvertierung nutzt den in Ihren Browser integrierten Encoder, und das Ergebnis wird als data:image/webp kodiert.
Bleibt die WebP-Animation mit Base64 erhalten?
Ja, sofern keine Konvertierung gewählt und keine maximale Breite festgelegt ist. Der Base64-String enthält dann die exakte Datei mit allen Einzelbildern.
Zeigen alle Browser data:image/webp-Bilder an?
Alle aktuellen Versionen von Chrome, Edge, Firefox, Opera und Safari tun das, der Internet Explorer und Safari vor Version 14 dagegen nicht.