Zum Inhalt springen
Codex DesignBETA

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.

Umwandeln in

Läuft in deinem Browser. Nichts, was du hier hinzufügst, wird hochgeladen oder gespeichert.

So wandelst du ein Bild um

  1. Wähle deine Bilder aus oder zieh sie auf das Feld oben. Du kannst mehrere auf einmal hinzufügen.
  2. Wähle das Zielformat: PNG, JPG oder WebP.
  3. 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.
  4. 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.png wird hero.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:

Auf WebP-Bilder umstellen
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

Ein unabhängiges Plugin für Codex. Nicht mit OpenAI verbunden und nicht von OpenAI unterstützt.