Bilder zwischen PNG, JPEG, WebP und AVIF im Browser konvertieren
Für CDN-Budget skalieren, verlustbehaftet oder verlustfrei wählen und Qualität prüfen — ohne Originale auf fragwürdige Konverter-Seiten hochzuladen.
Weitere Utilities, die gut zu dieser Anleitung passen:
Warum das wichtig ist
Marketing liefert Hero-Banner als mehrmegabytegroße PNGs, weil niemand an WebP-Fallbacks dachte. Entwickler hängen BMP-Screenshots an GitHub-Issues und blähen Klone auf. E-Commerce verlangt JPEG unter 200 KB, Designer bestehen auf Alpha — und alle springen manuell durch Photoshop. Ein rein browserbasierter Konverter hält NDAs ein und verkürzt Iterationen beim Format-Matrix-Experiment über Breakpoints hinweg.
Drei echte Szenarien
AVIF-/WebP-Varianten aus PNG-Mastern stapelweise exportieren und Qualität pro Breakpoint feintunen.
Messbare LCP-Gewinne
Aus Illustrator exportiertes PNG ablegen, JPEG-Comps ausgeben, wenn keine Transparenz nötig ist.
Schnelle Lieferung
Breite reduzieren und vor Ticket-Upload stark komprimieren.
Weniger Zurückweisungen
Schritt für Schritt
Öffnen Sie den Bildkonverter.
Quell-Raster hochladen
PNG, JPEG, WebP, AVIF, GIF (erstes Frame), BMP — per Drag-and-drop aus Finder oder Explorer.
Zielformat wählen
Container und Codec an CDN-Richtlinie anpassen (moderne Stacks bevorzugen WebP/AVIF mit JPEG-Fallback).
Abmessungen anpassen
Seitenverhältnis beibehalten oder maximale Kantenlängen für responsive
srcsetsetzen.Qualität oder verlustfrei feinjustieren
JPEG-/WebP-Qualitätsschieber tauschen Größe gegen Artefakte — in der Vorschau bei Halos um Text zoomen.
Konvertierte Dateien laden
Einheitlich benennen (
hero@2x.webp), bevor sie in die Static-Asset-Pipeline gehen.
Profi-Tipps
- Mit Komprimierung kombinieren, wenn nur kleinere JPEG/WebP ohne Formatwechsel nötig sind — siehe Bildkomprimierung.
- Master verlustfrei (PNG/AVIF lossless) in Git LFS halten; verlustbehaftete Varianten in CI ableiten und diesen Workflow beim Prototyping referenzieren.
- Alpha beachten: JPEG hat keine Transparenz — PNG/WebP/AVIF wählen, wenn Overlays sie brauchen.
Typische Stolpersteine
Stolperstein
Doppelte Kompression
Bereits verlustbehaftete JPEGs neu kodieren summiert Blockartefakte — möglichst von Roh-Exporten starten.
Stolperstein
Farbprofil entfernt
Manche Browser nehmen nach Konvertierung sRGB an — brandkritische Fotos auf kalibrierten Monitoren prüfen, wenn ICC wichtig ist.
Stolperstein
Erwartungen an animierte GIFs
Nur das erste Frame wird exportiert, außer Sie nutzen woanders eine animationsbewusste Pipeline — Bewegungsanforderungen vorab klären.
Wann dieses Tool nicht passt
- Vektor zu Raster in großem Maßstab: headless Inkscape oder
rsvg-convertin CI für deterministische SVG-Exports (Tutorial SVG zu PNG). - RAW-Entwicklung: darktable/Lightroom liefern Objektivkorrekturen jenseits schneller Raster-Transformationen.
- Tausende Dateien nächtlich: serverseitig
ffmpeg/magickmit Checksummen-Audit planen.
FAQ
Verlassen Uploads meinen Laptop?
Nein — Dekodierung und Kodierung laufen über Browser-APIs; WLAN trennen als Air-Gap-Sanity-Check.
Warum sehen AVIF-Exports in Safari anders aus?
Decoder-Versionen prüfen — in Zielbrowsern vorschauen, wenn feines Korn die Freigabe beeinflusst.
Kann ich EXIF-Metadaten behalten?
Hängt von Zielformat und Tool-Einstellungen ab — Datenschutz prüfen, bevor GPS-Tags erhalten bleiben.
Nächste Schritte
- Sensible EXIF mit dem EXIF-Editor-Tutorial entfernen oder bearbeiten.
- ICO-Favicons nach Vektor-Bereinigung über SVG zu ICO erzeugen.
- Storyboards mit Bild zu PDF zusammenführen.