PNG in WebP umwandeln

Was leistet das Tool, wenn Sie PNG in WebP umwandeln?

Wenn Sie PNG in WebP umwandeln, machen Sie aus einer verlustfreien PNG Datei das WebP Format von Google. Meist geht es darum, dasselbe Bild in einer kleineren Datei zu behalten, damit sich eine Seite schneller öffnet. Das Tool auf dieser Seite arbeitet in Ihrem Browser. Ihre Datei verlässt Ihr Gerät also nie, und die Seite lädt nichts hoch und speichert nichts.

Das Tool übernimmt Folgendes:

• Es erkennt die Eingabe selbst: Es liest das Format aus den ersten Bytes der Datei und ignoriert die Endung. Deshalb öffnet es auch eine Datei mit falscher Endung korrekt.
• Transparenz bleibt erhalten: Transparente Bereiche im PNG bleiben auch im WebP transparent.
• Die Ausgabe ist verlustbehaftetes WebP: Der Qualitätsregler startet bei 92 Prozent, und Sie können ihn jederzeit ändern.
• Die Pixelgröße bleibt gleich: Breite und Höhe ändern sich nicht. Für kleinere Abmessungen nutzen Sie das Tool zum Bildverkleinern.

Wir erledigen diese Umwandlung vor dem Start in unseren Webdesign Projekten, denn transparente PNG Dateien aus Designprogrammen gehören oft zu den schwersten Elementen einer Seite. Mehr zum Gesamtbild lesen Sie in unserem Beitrag Bilder für die Website optimieren.

Macht es Ihre Website schneller, wenn Sie PNG in WebP umwandeln?

Meistens ja. Bilder sind auf den meisten Seiten die schwersten Dateien, daher gehört ihre Verkleinerung zu den direktesten Hebeln für mehr Tempo. Laut der WebP Dokumentation von Google sind verlustfreie WebP Bilder 26 Prozent kleiner als PNG. Außerdem schreibt Google, dass verlustbehaftete WebP Bilder bei gleichem SSIM Qualitätsindex 25 bis 34 Prozent kleiner sind als vergleichbare JPEG Bilder.

Google ergänzt, dass WebP mit Transparenz bei akzeptabler verlustbehafteter Kompression typischerweise dreimal kleinere Dateien liefert als PNG. Genau diesen Fall deckt das Tool ab, daher gilt die Angabe auch für Ihre Dateien. Es sind allerdings typische Werte, und Ihr eigenes Ergebnis hängt vom Bild ab.

Eine kleinere Datei hilft an drei Stellen:

• Ladezeit: Das größte Element einer Seite ist oft ein Bild, deshalb fließt das Bildgewicht direkt in LCP, einen der Core Web Vitals, ein.
• Mobile Daten: Besucher laden weniger herunter, was bei langsamen Verbindungen zählt, denn jedes zusätzliche Kilobyte macht sich dort bemerkbar.
• Rankings: Tempo allein entscheidet nicht über Rankings, doch der Einfluss der Ladezeit auf SEO zeigt sich über die Nutzererfahrung.

Kurz gesagt: PNG in WebP umwandeln bewirkt allein keine Wunder. Auf einer Seite voller Designexporte gehört es dennoch zu den günstigsten Gewinnen.

Bleibt die Transparenz erhalten, wenn Sie PNG in WebP umwandeln?

Ja, sie bleibt erhalten. WebP unterstützt einen Alphakanal, der die transparenten Bereiche trägt. Laut Google kommt verlustfreies WebP mit Transparenz bei nur 22 Prozent zusätzlichen Bytes aus. In diesem Tool bleiben der transparente Hintergrund, halbtransparente Schatten und weiche Kanten Ihres PNG daher an ihrem Platz.

Das ist der wichtigste Unterschied zu JPG. JPG kann keine Transparenz speichern, deshalb füllt das Tool bei JPG als Ziel transparente Bereiche mit Weiß, Schwarz oder einer eigenen Farbe. Bei WebP als Ziel entfällt diese Füllung. Setzen Sie ein Logo auf hellem und dunklem Hintergrund ein, ist WebP also die bessere Wahl.

Eine Warnung gehört dazu. Sinkt die Qualität, leiden bei verlustbehafteter Kompression zuerst die Randlinien und weichen Schatten eines transparenten Bildes. Öffnen Sie die Datei nach dem Download in echter Größe auf einem weißen und einem dunklen Hintergrund. Sehen Sie Lichthöfe oder gezackte Kanten, erhöhen Sie die Qualität. Für Stellen, die JPG verlangen, nutzen Sie PNG in JPG umwandeln.

Wie verändert der Qualitätsregler die WebP Dateigröße?

Dieses Tool schreibt verlustbehaftetes WebP, eine verlustfreie WebP Option gibt es nicht. Der Qualitätsregler startet bei 92 Prozent. Senken Sie ihn, schrumpft die Datei, aber es gehen auch Details verloren. Deshalb stimmt die WebP Ausgabe nicht Pixel für Pixel mit Ihrem PNG überein. Bei den meisten Bildern sehen Sie keinen Unterschied, doch Grafiken mit harten Kanten und kleine Schrift verraten ihn zuerst.

So finden Sie die richtige Balance:

1. Zunächst lassen Sie die Qualität bei 92 Prozent und lesen die Größe vorher und nachher in der Zeile ab.
2. Ist die Ersparnis zu klein, senken Sie den Regler in kleinen Schritten. Das Tool rechnet die Liste nach jeder Änderung neu.
3. Danach laden Sie das Ergebnis herunter und öffnen es in echter Größe, denn die Vorschau in der Zeile ist klein und versteckt Fehler.
4. Sehen Sie Streifen in Verläufen oder Lichthöfe an Kanten, gehen Sie einen Schritt zurück.

Wechseln Sie das Ziel auf PNG, verschwindet der Regler, weil PNG verlustfrei ist und keine Qualitätseinstellung kennt. Außerdem sollten Sie das Original PNG behalten. Ein verlustbehaftetes WebP zurück in PNG zu wandeln, bringt verlorene Details nicht zurück.

Wann lohnt es sich bei Logos, Icons und Produktbildern?

Nicht jedes PNG sollte ein WebP sein. Über die Entscheidung bestimmen die Bildart und der Einsatzort:

• Große Logos und transparente Grafiken: Für die Anzeige auf einer Website ist WebP eine gute Wahl. Besitzen Sie das Logo als Vektor (SVG), ist das bei einfachen Linienlogos oft das bessere Format.
• Produktfotos: Freigestellte Produktbilder und Bilder mit weißem Hintergrund bringen die größte Ersparnis. Eine Shopseite kann Hunderte davon enthalten, daher summiert sich der Gewinn. Mehr dazu finden Sie bei unserer E-Commerce Beratung und im Beitrag Produktseite im Online Shop optimieren.
• Blogbilder und Screenshots: Bei fotolastigen Bildern lohnt sich WebP. Bei Screenshots mit viel Text prüfen Sie jedoch die Buchstabenkanten.
• Sehr kleine Icons: Misst die Datei ohnehin nur wenige KB, bleibt auch der Gewinn klein. Schauen Sie stattdessen auf die Änderung in Prozent in der Zeile.

Manche PNG Dateien sollten PNG bleiben: Quelldateien für den Druck, Entwürfe, die Sie wieder bearbeiten, und Grafiken, die Pixelgenauigkeit brauchen. Kurz gesagt: WebP ist die Kopie fürs Veröffentlichen, PNG die Archivkopie.

Unterstützen WordPress und Browser WebP?

Ja, beide unterstützen es. Seit Version 5.8 erlaubt WordPress, WebP Bilder in die Mediathek hochzuladen und wie JPG oder PNG zu nutzen. Die Bildbibliothek Ihres Servers (Imagick oder GD) kann manche Details beeinflussen, und die Funktion Site Health zeigt zum Beispiel, welche Formate sie beherrscht. Wählen Sie noch Ihre Plattform, lesen Sie WordPress oder individuelle Website.

Auch die Browser ziehen mit. Laut MDN zeigen Chrome, Edge, Firefox, Opera und Safari WebP an. Bei Safari gelten zwei Bedingungen: Es muss Version 14 oder neuer sein, und unter macOS braucht es Big Sur (11) oder neuer.

Zum Speichern gehört ein kurzer Hinweis. Das Tool erzeugt die WebP Datei mit dem eigenen Encoder Ihres Browsers. Kann Ihr Browser kein WebP speichern, sagt das Tool das offen und liefert nicht stillschweigend ein anderes Format. Öffnen Sie die Seite dann in einem anderen aktuellen Browser.

Wie bereiten Sie ein Ersatzformat für ältere Systeme vor?

Ein Ersatzformat ist eine PNG oder JPG Kopie, die Sie für Orte bereithalten, die WebP nicht öffnen können. Manche Formulare, E-Mail Programme und ältere Anwendungen lehnen WebP ab, deshalb lesen Sie zuerst die Upload Regeln.

Zwei Wege führen zum Ziel:

• Ersatz innerhalb der Seite: Wie MDN empfiehlt, packen Sie Ihr Bild in ein <picture> Element, setzen zuerst ein <source type="image/webp"> und fügen das PNG oder JPG als normales Bild hinzu. Browser, die WebP verstehen, nutzen es, alle anderen nehmen den Ersatz.
• Ersatz als Datei: Wandeln Sie stattdessen dasselbe Bild noch einmal mit PNG oder JPG als Ziel um. Für den Rückweg steht auch WebP in PNG umwandeln bereit.

Löschen Sie nie das Original PNG. Behalten Sie außerdem Dateinamen und Alternativtext bei; in unserer SEO Beratung sehen wir, dass sie Suchmaschinen unabhängig vom Format sagen, was das Bild zeigt. Weil sich die Endung ändert, ändert sich auch die Bildadresse, also passen Sie jede Seite an, die noch auf die alte Adresse zeigt.