Wie die browserbasierte Bildkonvertierung funktioniert
Jede Konvertierung ist eine vierstufige Pipeline, die in Ihrem Browser läuft. Für JPEG und PNG übernimmt die Canvas-API des Browsers die Kodierung direkt. Für WebP im Safari und AVIF in jedem Browser lädt die Seite bei Bedarf einen leichten WebAssembly-Codec — dennoch alles lokal, Ihre Bilder verlassen niemals Ihr Gerät.
- Liest jede hochgeladene Datei als Blob und erstellt eine Objekt-URL, damit der Browser sie dekodieren kann, ohne Bytes an einen Server zu kopieren.
- Zeichnet das dekodierte Bild auf ein offscreen Canvas-Element, wobei Größenänderungsbeschränkungen unter Beibehaltung des ursprünglichen Seitenverhältnisses angewendet werden.
- Rufen Sie
canvas.toBlob(callback, targetMimeType, quality)auf, um die Pixel für PNG, JPEG und Chrome/Firefox-WebP neu zu kodieren. Für Safari-WebP und AVIF-Kodierung wird bei erster Nutzung ein WebAssembly-Codec-Worker geladen, der die Kodierung in einem Hintergrund-Thread übernimmt. PNG-Ausgabe ist stets verlustfrei; JPEG, WebP und AVIF respektieren den Qualitätsregler, der direkt auf die Quantisierungseinstellung des Kodierers abgebildet wird. - Zeigt eine Vorher/Nachher-Miniaturansicht mit Ausgabeabmessungen und Dateigröße an, und bietet dann einen Download-Button pro Bild oder eine einzige ZIP-Datei für den gesamten Batch.
Warum Bildformate konvertieren?
- Der Wechsel von PNG zu WebP reduziert typische Dateigrößen um 25–35% ohne sichtbaren Qualitätsverlust bei Qualität 0.8, was das Seitengewicht direkt senkt und LCP-Werte der Core Web Vitals verbessert.
- PNG erhält die Transparenz, wo JPEG sie verwirft; PNG→JPEG rendert transparente Pixel auf weißem Hintergrund — nützlich, wenn das Ziel (E-Mail, älteres CMS) kein PNG akzeptiert.
- Social-Media-Plattformen und Werbenetzwerke haben strenge Formatanforderungen: Facebook und LinkedIn bevorzugen JPEG für Fotos; Twitters OG-Vorschau-Pipeline verarbeitet WebP; einige Ad-Server lehnen Nicht-JPEG-Creatives ab.
- Die Standardisierung eines Batches gemischter Bildformate (PNG-Screenshots, JPEG-Fotos, WebP-Exporte) auf ein einziges Format vor dem Upload auf ein CMS oder DAM eliminiert die Format-Handling-Komplexität im Ingest-Pipeline.
Häufige Anwendungsfälle
Formatkonvertierung ist nötig, wenn Quellformat und Zielerwartungen nicht übereinstimmen.
- Produktfotos für einen Shopify- oder WooCommerce-Shop vorbereiten — JPEG-Originale für die Storefront in WebP mit Qualität 0.85 konvertiert, PNG für druckfertige Exporte beibehalten.
- Designer-PNG-Exporte vor der Einbettung in einen React- oder Next.js-Build in JPEG oder WebP konvertieren, damit der Bild-Optimierer des Frameworks mit einer kleineren Quelle beginnt.
- Stapelverarbeitung eines Ordners mit Screenshots aus einem QA-Durchlauf — PNG zu JPEG mit Qualität 0.9, um die Archivgröße zu reduzieren, bevor es an ein Bug-Tracker-Ticket angehängt wird.
Ein Praxisbeispiel: 2-MB-PNG → 300-KB-WebP
Ein 2-MB-PNG-Hero-Bild mit 2400×1600 Pixeln ist eine häufige Last auf Marketing-Landing-Pages.
PNG hier ablegen, WebP als Zielformat wählen, Qualität auf 0.8 einstellen und optional maximale Breite auf 1200 setzen, um die Pixelabmessungen zu halbieren. Die Canvas-Pipeline zeichnet das Bild bei 1200×800 (Seitenverhältnis erhalten), kodiert in WebP um, und die Ausgabekarte zeigt das Ergebnis — typischerweise 280–320 KB, eine Reduktion von 85%. Klicken Sie auf Herunterladen auf der Karte, um die einzelne Datei zu laden, oder klicken Sie auf ZIP herunterladen am unteren Rand des Panels, wenn Sie mehrere Bilder in einem Durchgang konvertiert haben. Der gesamte Vorgang, vom Ablegen bis zum Download, läuft in wenigen Hundert Millisekunden für ein Bild dieser Größe.
Welche Formate werden unterstützt?
Auf der Eingabeseite wird jedes Format akzeptiert, das der Browser dekodieren kann: PNG, JPEG, WebP, GIF und BMP decken praktisch jede Datei ab, die ein Designer oder Screenshot-Tool erzeugt. Ausgabeformate sind PNG (stets verlustfrei), JPEG, WebP und AVIF. AVIF-Ausgabe wird über einen WebAssembly-Kodierer unterstützt, der bei Bedarf in jedem Browser geladen wird — kein nativer Canvas-Kodierer nötig.
Läuft das auf meinem Gerät?
Ja. Die Seite verwendet die native Canvas API des Browsers und die Web File API. Keine Bilddaten werden an einen Server gesendet; die Konvertierungs-Pipeline läuft vollständig in Ihrem Browser-Tab. Sie können dies überprüfen, indem Sie DevTools öffnen und das Network-Panel überprüfen — nach dem Laden der Seite gibt es keine ausgehenden Anfragen.
Was ist der Qualitätsunterschied zwischen PNG und JPEG?
PNG ist ein verlustfreies Format — jedes Pixel übersteht den Kodierungszyklus genau. JPEG verwendet DCT-Kompression und verwirft Feinheiten, die das Auge selten bemerkt; Qualität 0.8 ist ein üblicher Sweet Spot, bei dem der visuelle Unterschied zum Original für die meisten Betrachter kaum wahrnehmbar ist, die Datei aber 4–6 Mal kleiner als PNG ist. WebP kann sowohl verlustfrei als auch verlustbehaftet arbeiten; der Qualitätsschieberegler hier steuert den Verlust-Encoder, und Qualität 0.85 übertrifft JPEG 0.85 typischerweise um 25–30% bei Naturfotos.
Wie funktioniert die AVIF-Ausgabe?
Die AVIF-Kodierung verwendet einen WebAssembly-Codec, der auf Abruf geladen wird, sobald Sie das AVIF-Format auswählen — kein Plugin, kein Browser-Flag, kein Warten auf eine zukünftige Chrome-Version. Die WASM-Binärdatei wird von unserem eigenen Ursprung ausgeliefert, kodiert Ihr Bild vollständig in einem Hintergrund-Thread und gibt einen standardmäßigen image/avif-Blob zum Herunterladen zurück. Die einzige Netzwerkanfrage ist der einmalige Abruf des Codecs selbst; keinerlei Bilddaten verlassen Ihr Gerät. Nach dem Laden bleibt der Kodierer für die Sitzung zwischengespeichert, sodass nachfolgende Konvertierungen schneller sind. AVIF-Dateien sind typischerweise 20–30 % kleiner als WebP und 50 % kleiner als JPEG bei gleichwertiger Qualität, was sie zur besten Wahl für leistungssensible Websites macht.
Bilder ablegen, Format wählen, konvertieren. Alles läuft in Ihrem Tab — kein Upload, kein Konto, kein Warten auf einen Server.