Bildkonverter: PNG, JPG und WebP.
Wandle Bilder zwischen PNG, JPG und WebP um, einzeln oder viele auf einmal, und vergleiche die Dateigröße vorher und nachher. Alles läuft in deinem Browser, deine Bilder werden also nie hochgeladen.
Läuft in deinem Browser. Nichts, was du hier hinzufügst, wird hochgeladen oder gespeichert.
So wandelst du ein Bild um
- Wähle deine Bilder aus oder zieh sie auf das Feld oben. Du kannst mehrere auf einmal hinzufügen.
- Wähle das Zielformat: PNG, JPG oder WebP.
- Stell die Qualität ein für JPG oder WebP, von 40 % bis 100 %. Voreingestellt sind 85 %; niedrigere Werte ergeben kleinere Dateien mit deutlicher sichtbarer Kompression. PNG ist verlustfrei und hat deshalb keine Qualitätseinstellung.
- Wandle um und lade dann jede Datei herunter. Die Liste zeigt die Größe jeder Datei vorher und nachher.
Ein paar Dinge, die du wissen solltest:
- Transparenz. PNG und WebP behalten transparente Bereiche. JPG kann keine Transparenz speichern, deshalb werden transparente Bereiche weiß.
- Größe und Name. Bilder behalten ihre Breite und Höhe und ihren Dateinamen mit der neuen Endung: Aus
hero.pngwirdhero.webp. - Eingabe. Neben PNG, JPG und WebP kannst du auch andere Bilder hinzufügen, die dein Browser öffnen kann, etwa GIF. Animierte Bilder werden als einzelnes Standbild gespeichert.
- Metadaten. Jedes Bild wird aus seinen Pixeln neu gezeichnet. Metadaten wie Kameradaten oder GPS-Standort landen deshalb nicht in der neuen Datei.
- Browser-Unterstützung. Kann dein Browser ein Format nicht speichern, sagt das Tool dir das, statt heimlich ein anderes Format zu speichern. Probier dann ein anderes Format oder einen anderen Browser.
Mit WebP schnellere Seiten bauen, mit Codex
Bilder sind meist der schwerste Teil einer Seite. Eine WebP-Datei ist in der Regel spürbar kleiner als ein JPG in ähnlicher Qualität und viel kleiner als ein PNG-Foto, und alle gängigen Browser zeigen WebP an. Bilder umzuwandeln, bevor sie in dein Projekt wandern, ist die einfachste Beschleunigung überhaupt.
- Erst umwandeln, dann committen. Wandle Hero-Fotos, Screenshots und die Bilder, die du für ein Design generiert hast, mit 75–85 % Qualität in WebP um, prüfe, ob sie noch gut aussehen, und leg sie in den Bildordner deines Projekts, etwa
public/images. - PNG behalten, wo es zählt. Wenn WebP feine Linien oder kleinen Text in einer Grafik verwischt, lass genau diese Datei als PNG. Logos und Icons sind meist als SVG am besten aufgehoben.
- Große Mengen automatisieren. Dieses Tool ist für eine Handvoll Bilder am schnellsten. Bei Dutzenden bitte Codex lieber, einen Umwandlungsschritt in deinen Build einzubauen.
Sag Codex dann, dass es die neuen Dateien verwenden soll:
Verwende die WebP-Bilder in [public/images] für [die Landingpage]. Ersetze jeden Verweis auf ein PNG oder JPG durch die passende .webp-Datei, gib jedem <img> eine Breite und Höhe, damit das Layout beim Laden nicht springt, und lade die Bilder unterhalb des ersten Bildschirms per Lazy Loading.
Häufige Fragen
Ist der Bildkonverter kostenlos?
Ja. Keine Anmeldung, kein Wasserzeichen und kein Tageslimit.
Werden meine Bilder hochgeladen?
Nein. Dein Browser liest jedes Bild, zeichnet es neu und speichert es auf deinem Gerät. Umgewandelte Dateien bleiben im Arbeitsspeicher der Seite, bis du erneut umwandelst oder den Tab schließt. Die Website zählt nur, dass das Tool benutzt wurde, nie, was du hineingibst.
Ist WebP besser als PNG oder JPG?
Für die meisten Bilder auf einer Website: ja. WebP-Dateien sind bei ähnlicher Qualität meist kleiner als JPG, und anders als JPG unterstützt WebP Transparenz. Für E-Mails oder ältere Software, die WebP nicht öffnen kann, ist JPG weiterhin die sicherste Wahl. PNG bewahrt jedes Pixel exakt, was bei manchen Screenshots und Grafiken wichtig ist.
Warum ist meine umgewandelte Datei größer?
Wenn du ein JPG oder WebP in PNG umwandelst, wird die Datei meist größer, weil PNG jedes Pixel ohne verlustbehaftete Kompression speichert. Auch eine sehr hohe Qualitätseinstellung kann ein WebP oder JPG größer machen als das Original. Für eine kleinere Datei wähl WebP oder senk die Qualität.
Weiterlesen
- Farbpalette aus Bild erstellenHol dir die Hauptfarben eines beliebigen Bildes als HEX-Codes, fertig zum Kopieren.
- DESIGN.md-GeneratorMach aus deinen Farben, Schriften und Abständen eine DESIGN.md für Codex.
- GPT Image 2.6 für UI-DesignWas neu ist, Flare vs. Sunburst und Prompts für UI-Mockups.
- UI-Mockups mit KI erstellenVom Satz zum Wireframe zum High-Fidelity-Mockup.