Bildformat-Konverter

Der Bildformat-Konverter kodiert ein Bild vollständig in deinem Browser von einem Format in ein anderes um. Er akzeptiert PNG-, JPEG-, WebP- und GIF-Dateien und schreibt PNG-, JPEG- oder WebP-Ausgaben, mit einem einstellbaren Qualitätsregler für die beiden verlustbehafteten Ziele. Da alles über die Canvas API läuft, wird nichts hochgeladen, und das Original verlässt den Tab nie.

Verwendung

1. Ziehe eine PNG-, JPEG-, WebP- oder GIF-Datei auf die Upload-Fläche oder klicke sie an, um den Dateidialog zu öffnen. Vorschau und eine Metadatenzeile mit Abmessungen, Dateigröße und MIME-Typ erscheinen sofort.
2. Wähle ein Zielformat: PNG, JPEG oder WebP.
3. Bei JPEG oder WebP stellst du den Qualitätsregler ein. Er reicht von 10 bis 100 und startet bei 90. PNG ist verlustfrei, deshalb wird der Regler für PNG ausgeblendet.
4. Drücke Konvertieren. Das Bild wird auf eine Canvas gezeichnet und mit canvas.toBlob kodiert; das Ergebnispanel nennt die neue Dateigröße.
5. Lade herunter. Die Datei behält deinen ursprünglichen Basisnamen und erhält die neue Endung, aus urlaub.png wird bei JPEG also urlaub.jpg.

Welche Konvertierungen tatsächlich funktionieren

Eingabe- und Ausgabemengen sind nicht symmetrisch, deshalb lohnt es sich, die Grenzen vor dem Start zu kennen.

Von	Zu PNG	Zu JPEG	Zu WebP	Hinweise
PNG	—	Ja	Ja	Transparenz bleibt bei PNG und WebP erhalten; JPEG flacht sie zu Weiß ab.
JPEG	Ja	—	Ja	JPEG hat keinen Alpha-Kanal, der erhalten werden könnte.
WebP	Ja	Ja	—	Nur statisches WebP; Animationen dekodiert Canvas nicht.
GIF	Ja	Ja	Ja	Nur das erste Einzelbild wird gelesen.

Formate außerhalb dieser Tabelle — SVG, HEIC, AVIF, TIFF, BMP und RAW — werden vor der Konvertierung abgelehnt. Das Tool dekodiert sie nicht und ersetzt sie nicht stillschweigend durch ein anderes Format.

Praxisbeispiele

• Ein 2400 × 1600 großes PNG-Screenshot mit 1,6 MB wird bei Qualität 90 zu einer etwa 250 bis 320 KB großen JPEG-Datei. Die sichtbaren Abmessungen ändern sich nicht, nur die Kodierung.
• Ein 800 × 800 großes PNG-Logo mit transparentem Hintergrund wird zu WebP mit erhaltener Transparenz, typischerweise 50 bis 75 % kleiner als die Quelle. Dasselbe Logo als JPEG bekommt einen weißen Hintergrund, weil das Tool die Canvas vor dem Zeichnen mit #FFFFFF füllt.
• Ein animiertes GIF mit 12 Frames wird als PNG zu einem einzigen Standbild von Frame eins, meist nur ein Bruchteil der Originalgröße. Die übrigen Frames werden verworfen, nicht extrahiert.

Wie die Canvas-Neukodierung funktioniert

Jede Konvertierung folgt denselben vier Schritten. Der Browser dekodiert die Quelle in ein Image-Element, das Tool erstellt eine Canvas mit naturalWidth und naturalHeight des Bildes, das Bild wird mit drawImage gezeichnet, und toBlob(callback, mimeType, quality) fragt den Encoder des Browsers nach einem frischen Bytestrom. Die Qualität wird als Dezimalzahl übergeben, aus „90“ auf dem Regler wird also 0.9; Werte werden auf den Bereich 0,1 bis 1,0 begrenzt.

Das erklärt zwei Verhaltensweisen. Erstens ist eine Konvertierung eine Neukodierung, keine Umbenennung: Pixel werden dekodiert und erneut kodiert, sodass selbst eine hochwertige Quelle beim Schreiben als JPEG ein wenig an Treue verlieren kann. Zweitens gehört der Encoder dem Browser, nicht der Seite. Moderne Chrome-, Edge-, Firefox- und Safari-Versionen unterstützen PNG-, JPEG- und WebP-Kodierung, doch alte Browser ignorieren den angeforderten WebP-Typ möglicherweise und geben stattdessen PNG-Bytes aus.

Qualität ist ein Wunsch, keine Garantie. Der Browser bildet den Wert von 0 bis 1 auf seinen eigenen Quantisierer ab, sodass dieselbe „90“ in verschiedenen Browsern leicht abweichende Byte-Zahlen liefert und keiner eine Zielgröße verspricht. Betrachte die angezeigte Ausgabegröße als verbindlich und senke den Regler, bis du dein Budget erreichst.

Genauigkeit und Grenzen

• Transparenz überlebt PNG und WebP und wird von JPEG zerstört. Wandle ein Logo zu JPEG, und jedes transparente Pixel wird weiß.
• Animierte Bilder werden nicht unterstützt. Canvas liest ein Frame, deshalb gehen APNG, animiertes WebP und GIF-Animation verloren.
• Die Auflösung wird nie verändert. Die Ausgabemaße entsprechen exakt der Eingabe. Skaliere zuerst, wenn du kleinere Pixel brauchst.
• Sehr große Bilder stoßen an Canvas-Grenzen des jeweiligen Browsers. Eine Canvas-Dimension ist in manchen Browsern bei etwa 16.384 px gedeckelt, und die Gesamtfläche liegt deutlich darunter; eine überdimensionierte Quelle lädt nicht oder kommt leer zurück.
• Metadaten werden verworfen. Browser wenden die EXIF-Ausrichtung beim Dekodieren an, aber der EXIF-Block selbst wird nicht in die Ausgabe kopiert.

Praktische Tipps

• Starte JPEG und WebP bei Qualität 80 bis 90. Unter etwa 60 zeigen Fotografien sichtbare Blockbildung an Kanten und in Text.
• Schicke einfarbige Grafiken und Logos lieber zu WebP als zu JPEG. WebP hält scharfe Kanten knackig und unterstützt Alpha, was es zum besseren Web-Ziel macht.
• Wenn du eine verlustfreie Archivkopie brauchst, wähle PNG — rechne aber damit, dass fotografische PNGs um ein Vielfaches größer sind als das JPEG-Äquivalent.
• Kodiere nur einmal neu. Jeder verlustbehaftete JPEG- oder WebP-Durchlauf summiert Kompressionsartefakte.

Zielformat in einem Satz: Fotografien gehen zu WebP bei Qualität 80 bis 85 mit JPEG als Kompatibilitäts-Fallback; flache Logos und Icons gehen zu WebP für die Auslieferung oder PNG für verlustfreie Bearbeitung; Screenshots mit feinem Text bleiben PNG, weil JPEG dünne Striche verschmiert; und Dateien, die in älterer Desktop-Software öffnen müssen, sind als JPEG am sichersten.

Verwandte Tools

• Bildkomprimierung — Komprimieren und skalieren Sie Bilder im Browser, um Dateigrößen weiter zu reduzieren.
• Bild zu Base64 — Konvertieren Sie beliebige Bilder in Base64-Daten-URIs zum Einbetten in Code.
• Favicon-Generator — Erzeugen Sie Favicon-PNGs in mehreren Größen aus Ihren Bildern.