shadcn.io— Tausende fertige shadcn/ui-Blöcke
Zum Inhalt springen

Warum ich PNG in WebP umwandle (und das eine Mal, wo ich es nicht tue)

Auf meinem Schreibtisch liegt ein Ordner namens to-shrink. Jahrelang war er der Ort, an dem Screenshots sterben gingen — 2-MB-PNGs von Dashboards und halbfertigen Mockups, die ich Leuten schickte, die 2 MB meines Bildschirms ganz sicher nicht brauchten. Eines Nachmittags öffnete ich den Ordner tatsächlich und rechnete nach: er war größer als die App, die ich in derselben Woche ausgeliefert hatte. Das ist die stille Sache mit PNG. Es ist ein wunderbares Format, das eine erstaunliche Menge Platz verschwendet, und die meisten von uns bemerken es nie, weil Bandbreite billig ist und die Datei „sich einwandfrei öffnet".

Lass mich also das Argument machen, das mir jemand viel früher hätte machen sollen. Wenn ein PNG für eine Website bestimmt ist — überallhin, wo es angesehen statt bearbeitet wird —, sollte es fast mit Sicherheit stattdessen ein WebP sein.

Worin PNG wirklich gut ist

PNG ist verlustfrei. Jeder Pixel, den du hineingibst, kommt exakt wieder heraus, jedes Mal. Das ist eine echte Tugend — für eine Master-Datei. Deshalb exportiert dein Design-Tool PNG, deshalb sind Screenshots PNG, deshalb greift man danach, sobald es scharfe Kanten und Transparenz braucht. Verlustfrei heißt, du kannst es hundertmal öffnen, anpassen und neu speichern, ohne dass sich das Geringste verschlechtert.

Der Haken ist, dass „jeden Pixel perfekt speichern" ein Versprechen ist, das du in Bytes bezahlst. Speichere ein Foto als PNG, und es hält treu Verläufe, Sensorrauschen und feine Farbverschiebungen fest, die dein Auge nie vermissen würde, wären sie bloß angenähert. Du zahlst den vollen Preis für Detail, das niemand sehen kann.

Was WebP kann, was PNG nicht kann

WebP war Googles Antwort auf eine einfache Frage: Was, wenn wir einfach ein besseres Format machen? Es kann zwei Dinge, die PNG nicht kann. Es kann verlustbehaftet komprimieren, wenn du willst — das Unmerkliche wegwerfen wie JPEG, nur cleverer — und behält dabei einen vollen Alphakanal. Dieser zweite Teil ist das stille Wunder. Jahrelang war der Handel „Transparenz oder eine kleine Datei, entscheide dich". WebP ist beides zugleich.

In der Praxis landet die Umwandlung eines fotografischen oder screenshot-lastigen PNG bei vernünftiger Qualität irgendwo zwischen 60 % und 90 % kleiner. Nicht 10 %. Ein 1,8-MB-Screenshot wird zu rund 250 KB, und nebeneinandergelegt kannst du nicht sagen, welcher welcher ist. Ich habe diesen Test öfter an mir selbst gemacht, als ich zugeben möchte, jedes Mal sicher, ich würde das WebP überführen. Ich tue es nie.

Der Vergleich, der mich überzeugt hat

Grobe Zahlen aus einer Charge, die ich letzten Monat umgewandelt habe:

Ausgangs-PNGAls WebP
Ein UI-Screenshot — 1,8 MB~240 KB
Ein Hero-Foto — 3,1 MB~380 KB
Ein flaches zweifarbiges Logo — 42 KB~30 KB

Schau dir das Logo an. Es hat sich kaum bewegt — und das ist die Fußnote, auf die es ankommt.

Wann ich mir die Umwandlung spare

Einfache Grafik — flache Farben, eine Handvoll davon, harte Kanten — ist genau das, wofür PNG gebaut wurde, und es macht seine Sache etwa so gut wie irgendjemand. Ein zweifarbiges Symbol, ein Strichdiagramm, ein QR-Code: lass sie als PNG, oder besser, liefere sie als SVG, wenn du den Vektor hast. WebP schadet diesen Dateien nicht, hilft ihnen aber auch nicht nennenswert, und du hast für nichts einen Schritt hinzugefügt.

Das andere Mal, wo ich nicht umwandle, ist der Master. Ich rühre die einzige Kopie von etwas nie an. WebPs verlustbehafteter Modus ist eine Einbahntür: das Detail, das du wegwirfst, bekommst du nicht zurück. Also hier die eine Regel, die ich nie breche — wandle die Kopie um, die du veröffentlichst, behalte das Original dort, wo du bearbeitest. Auf meiner Maschine sind das buchstäblich zwei Dateien: das PNG bleibt im Projektordner, das WebP geht auf die Seite. Billige Versicherung, und ich habe es nicht ein einziges Mal bereut.

„Aber funktioniert das wirklich überall?"

Das war früher der echte Einwand, und er stimmt einfach nicht mehr. Jeder Browser, den Leute tatsächlich nutzen, unterstützt WebP seit etwa 2020 — Chrome, Safari, Firefox, Edge, alle. E-Mail-Clients sind noch durchwachsen, und manche alte Unternehmenssoftware ist eigen damit, für einen Newsletter greife ich also weiter zu JPEG. Aber fürs offene Web? WebP ohne Rückfall auszuliefern, hat vor Jahren aufgehört, eine mutige Entscheidung zu sein.

Wie ich es tatsächlich machen würde

Der ehrliche Grund, warum ich den PNG-zu-WebP-Konverter auf dieser Seite gebaut habe, ist, dass ich es leid war, Screenshots in irgendwelche Web-Tools zu ziehen, um sie zu schrumpfen, nie ganz sicher, wo meine Dateien danach landeten. Die Version, die ich empfehle, ist also die langweilige, private: wandle auf deiner eigenen Maschine um, im Browser, wo die Datei dein Gerät nie verlässt. Zieh die PNGs herein, sieh der Größenspalte beim Fallen zu, lade das WebP herunter.

Aber das Tool ist nebensächlich. Es geht um die Gewohnheit. Sobald „PNG zum Bearbeiten, WebP zum Ausliefern" automatisch wird, hörst du auf, Leuten 2-MB-Screenshots zu schicken, deine Seiten werden gratis schneller, und dieser to-shrink-Ordner auf deinem Schreibtisch bleibt endlich leer. Meiner ist es, seit etwa einem Jahr. Kleiner Sieg — ich nehme ihn.

Ähnliche Beiträge


Alle Beiträge