Wie die browserbasierte Bildkonvertierung funktioniert
Jede Konvertierung ist eine vierstufige Pipeline, die vollständig in JavaScript läuft. Es wird keine Codec-Bibliothek heruntergeladen — die native Canvas API des Browsers übernimmt Dekodierung und Neukodierung.
- 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.
- Ruft
canvas.toBlob(callback, ZielMimeTyp, Qualität)auf, um die Pixel neu zu kodieren. PNG-Ausgabe ist immer verlustfrei; JPEG und WebP berücksichtigen den Qualitätsschieberegler. - 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?
Quellbilder: jedes Format, das der Browser dekodieren kann — PNG, JPEG, WebP, GIF und BMP werden alle akzeptiert. Ausgabeformate: PNG (verlustfrei), JPEG und WebP. AVIF-Ausgabe wird noch nicht unterstützt, da der Canvas-API-Encoder nur in Chrome 105+ verfügbar und in Safari und Firefox nicht vorhanden ist; eine WASM-basierte AVIF-Route ist für eine zukünftige Version geplant.
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.
Wann kommt AVIF-Unterstützung?
AVIF-Kodierung über canvas.toBlob(…, 'image/avif') funktioniert heute nur in Chrome 105+; Safari und Firefox unterstützen es nicht. Eine zukünftige Version wird eine optionale AVIF-Route mit einem leichtgewichtigen WebAssembly-Encoder hinzufügen, damit die Funktion in allen Browsern funktioniert. Bis dahin wird die AVIF-Option als "demnächst" angezeigt, und der WebP-Encoder (der in modernen Browsern universell unterstützt wird) ist die empfohlene Nächste-Generation-Alternative.
Bilder ablegen, Format wählen, konvertieren. Alles läuft in Ihrem Tab — kein Upload, kein Konto, kein Warten auf einen Server.