Bildoptimierung: Mit diesen Tools werden deine PNG und JPG federleicht

Facebook
XING
Twitter
LinkedIn

Regelmäßige Leserinnen und Leser des Dr. Web Magazin kennen den großartigen Bildoptimierer TinyPNG aus den Niederlanden. Viele, so wie ich, werden den Schrumpf-Service fest in den Arbeitsalltag aufgenommen haben. Über 70% Ersparnis in der Dateigröße bringt TinyPNG zuverlässig, ohne sichtbar die Qualität zu beeinträchtigen. Das bedeutet indes nicht, dass der Dienst alternativlos wäre. Ich habe diesen und ein paar andere für euch näher betrachtet.

Welche Formate eignen sich für welche Bilder am besten?

Produkt - Produktdesign

Für jeden Bildertyp gibt es ein Format, das sich am besten dazu eignet, Bilder möglichst klein abzuspeichern und gleichzeitig die Bildqualität möglichst unmerklich zu verringern.

Hier habe ich dir eine Übersicht zusammengestellt:

FormatGeeignet fürOptimierungsoptionen
JPEGFotos und Grafiken, die viele Farben oder Farbverläufe (Gradients) enhaltenRauschen reduzieren, Qualität reduzieren, „Als Progressiv exportieren“
GIFBewegtbilderDithering reduzieren, Anzahl der Farben reduzieren, horizontale Muster vergrößern, vertikales Rauschen verringern
PNG-8Grafiken mit wenigen FarbenDithering reduzieren, Anzahl der Farben reduzieren, horizontale und vertikale Muster vergrößern
PNG-24Bilder mit transparentem HintergrundRauschen reduzieren, Anzahl der Farben reduzieren

Im Folgenden will ich nun die Optionen und Tools entsprechend erörtern.

TinyPNG: Schnell und unkompliziert

TinyPNG komprimiert JPG und PNG wie kaum ein anderes Tool. Besonders für PNGs gibt es durch die Lossy Compression wenig Alternativen. Als WordPress-Plugin aufgesetzt, kümmert sich TinyPNG vollautomatisch um optimale Bildgrößen.

Die wichtigste Neuerung stellt die deutlich erhöhte Größengrenze für PNGs dar. Diese liegt jetzt bei 5 MB. Zum Start vor einigen Jahren akzeptierten sie nur Grafiken mit nicht mehr als 1 MB.

Inzwischen kannst du dir für einen jährlichen Obolus von 25 USD Zugang zum sogenannten Web Interface Pro sichern. Damit entfallen beide Begrenzungen und du kannst beliebig viele, beliebig große Bilder per Batch hoch- und wieder runterladen. Rechne das mal auf eine Datei um. An sich ist das Angebot ein Nobrainer.

tinypng-screenshot
TinyPNG ohne Schwächen: Auch bei meinem Testbild reduzierte es wieder 72%

Damit bleibt TinyPNG das Rundum-Sorglos-Paket für die schnelle Bildoptimierung zwischendurch. Einfach bis zu 20 Bilder im PNG-Format von der lokalen Festplatte auswählen und per Drag and Drop in den Dienst laden.

codeschool-devtools-tinypng_04
So sieht das Testbild nach Behandlung mit TinyPNG aus

Sobald die Bilder dort angekommen sind, beginnt der Schrumpfungsprozess, der in meinem Fall stabil bei um 70% liegt. Dabei komprimiere ich fast ausschließlich Screenshots, naheliegend angesichts meiner Tätigkeit. Ist TinyPNG mit der Arbeit fertig, kann mittels eines Download-Links jedes Bild einzeln wieder heruntergeladen werden. Fertig!

TinyPNG als kostenloses WordPress-Plugin

Was mir dabei vollkommen entgangen ist, ist, dass TinyPNG zwischenzeitlich ein WordPress-Plugin auf den Markt gebracht hatte. Dieses arbeitet logischerweise mit dem gleichen Algorithmus und kann die Bilder, die du in dein WordPress hochlädst, automatisch komprimieren, egal ob es sich um JPG oder PNG handelt. Bei JPG erzielt TinyPNG Werte wie andere auch, aber bei PNG kann es glänzen. Gewichtsverluste von bis zu 75 Prozent sind drin, um die 60 sind es immer.

Ein kostenloser API-Key ist für den Betrieb zwingend erforderlich

Einmal installiert, musst du dir zunächst direkt aus dem Backend heraus einen API-Key für die TinyPNG-API holen. Das funktioniert ganz einfach unter Angabe von Name und E-Mail-Adresse. An eben jene E-Mail-Adresse sendet dir TinyPNG dann einen Bestätigungslink. Diesen klickst du, was dich ohne Umschweife auf die Seite mit deinem API-Key führt, den du nun per Copy & Paste ins Backend holst. Jetzt ist das Plugin betriebsbereit.

In der Navigation deines WordPress siehst du von TinyPNG nicht viel. Nur der neu hinzugekommene Menüpunkt „Bulk Optimization” unter dem Hauptmenüpunkt „Medien” könnte dir auffallen. An dieser Stelle komprimierst du alle Bilder deiner Medienbibliothek auf Wunsch in einem Rutsch. Das ist nur bei der ersten Verwendung erforderlich, denn nach der Installation kümmert sich TinyPNG automatisch um alle neu hochgeladenen Bilder.

Das Dashboard von TinyPNG für WordPress.
TinyPNG: Bulk Optimization (Screenshot: Dr. Web)

In der Listenübersicht der Mediathek siehst du jetzt an jedem Bild als letzten Eintrag den Punkt „Compression”. Hier siehst du, welche Varianten eines jeden Bildes komprimiert wurden. Unter „Details” erhältst du die Einzelinformation zu jeder Bildgröße.

So stellst du TinyPNG auf deine Bedürfnisse ein

Generelle Settings findest du unter Einstellungen > Medien > JPEG and Image Optimization. Hier erfährst du, wie viele Bilder du im laufenden Monat bereits komprimiert hast. Zudem wählst du die Bildformate aus, für die du eine Kompression aktivieren möchtest. Nicht all jene, die dein Theme vorsieht, wirst du auch nutzen. Das ist jedenfalls bei mir so.

Die Einstellungen in TinyPNG für WordPress.
TinyPNG: Settings (Screenshot: Dr. Web)

Eine grundsätzliche Größenbegrenzung lässt sich ebenfalls festlegen. Das kann sinnvoll sein, wenn die Bilder, die du hochlädst im Normalfall weit größer sind, als es jemals für WordPress sinnvoll sein könnte, etwa, wenn du die Bilder deiner 20MP-Kamera unbearbeitet hochlädst. In dem Fall wäre die Option Resize and compress the original image mit zusätzlichen Angaben zu Breite und/oder Höhe nützlich. TinyPNG würde so dafür sorgen, dass von deinem 6.000 x 3.000 Pixel-Monster nur eines mit der von dir definierten Breite von z.B. 1.024 Pixeln bliebe.

Weitere Optionen für JPG-Dateien erlauben dir, zu entscheiden, ob beim Komprimieren Daten erhalten bleiben sollen. Dabei handelt es sich um das Erstellungsdatum der Originaldatei, die GPS-Position der Bildaufnahme und das Verbleiben eines etwaigen Copyright-Vermerks.

Mehr gibt es nicht einzustellen.

TinyPNG: Kostenlos ja, aber nur für 500 Kompressionen monatlich

TinyPNG für WordPress ist kostenlos erhältlich und auch das Komprimnieren ist kostenlos, aber nicht unbegrenzt. Mit dem API-Key kannst du monatlich 500 Kompressionen kostenlos durchführen. Das klingt erst einmal nach viel, relativiert sich jedoch schnell, wenn man bedenkt, dass jede in deinem Theme festgelegte Bildgröße eine Kompression nach sich zieht.

Würde ich in meinem Twenty-Sixteen-getriebenen Blog alle Bildgrößen komprimieren lassen – es sind sieben an der Zahl – so käme ich nur auf 71 Bilder, die ich kostenlos komprimieren lassen könnte. Ich habe deshalb schon mal die Größen, die ich eh nicht benutze von der Kompression ausgeschlossen und komme so immerhin auf 125 Bilder monatlich. Das reicht auf jeden Fall.

Was die Preise für zusätzliche Kompressionen betrifft, ist TinyPNG nicht unbedingt sehr offensiv. Die Information ist nicht so leicht zu finden, was unverständlich ist, denn die Preise sind durchaus nicht unfair:

Die Preisübersicht von TinyPNG für WordPress.
TinyPNG für WordPress: Preise pro Bild. (Screenshot: Dr. Web)

Spiel einfach ein bisschen mit dem Slider herum (wenn du die Seite gefunden hast;). 13,50 Euro für monatlich 2.000 Bilder klingen jedenfalls erstmal nicht schlecht. Die meisten Blogger werden vermutlich ohnehin mit dem kostenlosen Paket klarkommen.

TinyPNG für WordPress ist ein großartiges Argument, erneut über den standardmäßigen Einsatz von PNG auf deinem Blog nachzudenken.

CompressPNG: Leistungsfähiger als TinyPNG

CompressPNG aus dem Hause der tschechischen Agentur Mediafox Marketing, beheimatet im schönen Prag, bietet im Grunde die zu TinyPNG identische Dienstleistung an. Dennoch gibt es einige entscheidende Unterschiede.

  • CompressPNG kann ebenso wie TinyPNG in einem Rutsch mit bis zu 20 Bildern ausgestattet werden.
  • CompressPNG macht keine Angaben zur maximalen Dateigröße. In meinen Tests konnte ich Bilder bis zu einer maximalen Größe von 5 MB hochladen. Erst darüber kam es zu Fehlermeldungen.
  • Zusätzlich zu CompressPNG erreichst du über zwei Tabs die optisch identischen Dienste Compress JPG und CompressPDF, die genauso funktionieren, nur eben mit JPG respektive PDF größenreduzierend umspringen.
  • CompressPNG wendet automatisch die Farbreduzierung an, wenn das Ausgangsbild diese Vorgehensweise anbietet. Du musst hier also nicht manuell die Farben reduzieren, um zu kleineren Gewichten zu gelangen. Das macht das Tool automatisch.

TinyPNG ist schnell und entspricht dem Workflow eines Redakteurs in optimaler Weise. Screenshots machen, in einem Rutsch zu TinyPNG hochladen, kurz warten, alles wieder herunterladen, fertig. In seiner jüngsten Version kann CompressPNG hier mithalten.

Der Dienst spricht inzwischen sogar die deutsche Sprache. Die Vorgehensweise ist so einfach wie beim niederländischen Wettbewerber. Du wählst einfach bis zu 20 PNGs von deiner Festplatte und schienst sie per Drag-and-Drop auf CompressPNG. Der Dienst lädt die Dateien direkt hoch und beginnt mit der Kompression. Dabei wählt er die optimalen Einstellungen für das beste Ergebnis selbst.

Das sollte TinyPNG allerdings erst dann zu denken geben, wenn durch diese Optimierung ein geringeres Dateigewicht erreicht würde. Das ist bislang nicht der Fall. Vielmehr erreichte ich bei diesem Testbild ein Optimierungsergebnis von minus 61 Prozent und zwar sowohl mit TinyPNG, wie auch mit CompressPNG.

Die alte Homepage von Dr. Web.de.
Optimierungsergebnis: -61 Prozent (Screenshot: Dr. Web)

Bei TinyPNG ist damit die Aufgabe erledigt. Du lädst die Ergebnisse herunter und gut ist. Bei CompressPNG muss mit diesem Bildschirm noch nicht Schluss sein:

Das Dashboard von CompressPNG.
Hier ist noch nicht Schluss. CompressPNG kann mehr. (Screenshot: Dr. Web)

Probiere einfach mal aus, das angezeigte Thumbnail, unter dem „Herunterladen” anzuklicken. Hast du das nämlich getan, wird ein Bildausschnitt des hochgeladenen Originals unterhalb der Queue angezeigt. Nach kurzer Bedenkzeit erscheint rechts daneben ein Bildausschnitt, der optisch das Ergebnis der Kompression mit den automatisch ermittelten Optimalwerten zeigt.

Nun kannst du dich im Bildausschnitt frei bewegen, etwa bildwichtige Details anzeigen lassen und einer optischen Prüfung unterziehen.

Das alte Dr. Web Logo im Vorher-nachher-Vergleich.
CompressPNG bietet dir Detailverbesserungen an, die TinyPNG nicht im Portfolio hat. (Screenshot: Dr. Web)

Hier kannst du nun durch gezielte manuelle Reduktion der Zahl der Bildfarben das Schrumpfungsergebnis weiter verbessern. Das machst du frei Auge, wobei du immer bedenken solltest, dass ein zu stark komprimiertes Bild beim Betrachter keinen guten Eindruck macht. Deshalb ist es wichtig, einen Kompromiss zu finden, der sich in erster LInie an deinen Besuchenden orientiert.

Hast du tatsächlich Änderungen vorgenommen, darfst du nicht vergessen, den Ok-Button unterhalb des rechts angeordneten Sliders zu klicken, denn erst dann wird die Datei neu komprimiert. Hernach hast du die Möglichkeit, sie über den bereits erwähnten Knopf mit der Aufschrift „Herunterladen” auf deine lokale Platte zu befördern. Solltest du mehrere Dateien in der Queue haben, wird dich vielleicht die Möglichkeit, alle Dateien gesammelt als Zip herunterzuladen, freuen.

Fazit: CompressPNG oder TinyPNG? Es kommt drauf an…

TinyPNG bietet inzwischen ebenso eine Möglichkeit des „Download all”, also des Sammel-Downloads aller komprimierten Dateien. Zudem kannst du aus TinyPNG heraus direkt in deine Dropbox speichern.

Welchen der beiden Cloud-Services soll ich dir nun empfehlen? Sowohl TinyPNG, wie auch CompressPNG sind rasend schnell. Einen Sammel-Download bieten ebenfalls beide und das Ergebnis im Autopiloten ist sehr gut.Bist du Schreiberling kannst du einfach die URL aufrufen, die dir als erste einfällt 😉

Webdesigner indes werden eher Wert auf ein optimales Ergebnis, weniger auf eine möglichst kurze Bearbeitungsdauer legen. Und an dieser Stelle kann CompressPNG punkten. Das fängt schon damit an, dass CompressPNG überhaupt Möglichkeiten zur Ergebnisbeurteilung und -steuerung bietet. Die verschiebbaren Bildausschnitte erlauben es, kritische Bildbereiche in den Fokus zu nehmen, um daran gezielt die maximal mögliche Kompression fein zu tunen. Wenn du also das Maximum aus deinen PNGs rausquetschen möchtest, solltest du CompressPNG vorziehen.

Übrigens: Unter dem Namen Optimizilla findet du eine Variante von CompressPNG, die PNG und JPG gleichermaßen schluckt.

Lokale Lösungen

Wenn du Bilder optimieren willst, die Personen zeigen, brauchst du einen Auftragsverarbeitungsvertrag mit dem Dienstleister, damit du das konform zur DSGVO machen darfst. Die Cloud-Services müssen überdies genau erklären, was sie mit den Daten tun.

Lass es mich kurz machen. Keiner der beiden Dienste kommt danach in Frage. Die Macher von CompressPNG halten es für ausreichend, dass sie die Dateien sowieso nach einer Stunde löschen und die Betreiber von TinyPNG erklärten mir auf ausdrückliche Nachfrage, dass sie schon deshalb kein Problem sähen, weil sie in den Niederlanden säßen und damit automatisch der DSGVO unterfielen. Seltsame Rechtsauffassung: Ich bin rechtskonform, weil ich in einer Region meinen Sitz habe, in der ich rechtskonform sein muss?

Seis drum. Beide bieten keine Auftragsverarbeitungsverträge und sind somit für den Zweck der Bearbeitung von Bildern, die personenbezogene Daten beinhalten, nicht zu verwenden. Du benötigst also zusätzlich eine lokale Lösung.

PNGGauntlet und ImageOptim – nur verlustfreie Kompression

Deshaln habe ich mir unter anderem PNGGauntlet (Windows) und ImageOptim (Mac OS X) angesehen. Beide Softwares integrieren diverse freie Compression-Engines, etwa PNGout, OptiPNG, AdvPNG und andere. Die Kombination verschiedener Verfahren führt stets zu einer erheblichen Bearbeitungsdauer seitens der Software. Schnell mal ein Bild optimieren, ist damit nicht machbar. Und ja, meine Hardware ist stets aktuell.

Schwerer als der Geschwindigkeitsnachteil indes wiegt das Ergebnis. Denn das ist nach allen meinen Tests stets genau das geblieben: schwer. Die Software konnte nicht annähernd die gleichen oder auch nur entfernt ähnliche Ergebnisse erzielen, wie es TinyPNG oder CompressPNG schafften. Das liegt daran, dass die lokalen Lösungen rein auf verlustfreie Kompression setzen. Das Runterrechnen auf 256 Farben, also die gezielte Verlustoptimierung sehen sie nicht vor.

ImageAlpha – gute Ergebnisse, nur für Mac

ImageAlpha ist spezialisiert auf die verlustbehaftete Konvertierung von PNG24 nach PNG8. Laut eigenen Angaben bietet es Einsparungen, die um ein Vielfaches höher sind als bei bekannten PNG-Optimierern wie Smush.it und TinyPNG. Die Konvertierung behält sogar Alpha-Transparenz in allen Browsern bei, auch unter iOS und sogar in IE 6.

ImageAlpha erlaubt das gezielte Reduzieren der Farbanzahl und einige weitere Parameter mehr. Erste Tests ergaben etwas schlechtere Werte als unter Nutzung von TinyPNG oder CompressPNG. Der Abstand war indes nicht riesig. Ansonsten bietet ImageAlpha ein solides Feature-Set, das sich nicht zu verstecken braucht.

Das Testbild mit ImageAlpha komprimiert.
Die UI ist nicht unbedingt hoch-innovativ, aber die Ergebnisse stimmen

Wer also einen Mac sein eigen nennt, sollte sich ImageAlpha auf jeden Fall besorgen. Die Software ist kostenlos verfügbar und vom Bedienkomfort in etwa mit CompressPNG vergleichbar, durch die lokale Bearbeitung allerdings deutlich schneller im Processing. Die Software basiert auf dem Algorithmus hinter PNGquant.

PNGoo – PNGquant für Windows

Was ImageAlpha für den Mac-Anwender, ist PNGoo für die Windows-Fraktion. Das kleine Tool lädst du in einer Zip-Datei herunter. In dieser Zip-Datei findest du die ausführbare Datei PNGoo.exe und ein Unterverzeichnis namens libs. Darin befindet sich PNGquant. Solange du die Exe und das Unterverzeichnis beisammen lässt, kannst du PNGoo einfach per Doppelklick starten. Das funktioniert sogar portabel von einem USB-Stick aus. So hast du deine Kompressionslösung immer dabei. Ich bezweifle allerdings, dass das erforderlich ist.

Das Dashboard von PNGoo für Windows.
PNGoo für Windows (Screenshot: Dr. Web)

Die Bedienung ist sehr einfach. Zieh die zu komprimierenden PNGs einfach in das Programmfenster und sie erscheinen in der Liste. Oben wählst du noch aus, ob du den Output in das Verzeichnis lenken willst, aus dem die Originale stammen. Das hat den Effekt, dass die Originale überschrieben werden, was meine Standardeinstellung ist.

Über die Colour Settings kannst du Einfluss auf die Zahl der Farben nehmen. Ich lasse das stets bei der Standardangabe von 256. Theoretisch kannst du hier aber – ähnlich wie bei CompressPNG – visuell experimentieren, wenn du eines der Files in der Liste angewählt hast.

So, damit bist du mit einer schönen Palette an Möglichkeiten der PNG-Kompression ausgestattet. Linux- und Androidnutzern habe ich den Links zum Beitrag ebenfalls Tools hinterlegt. Um unter Linux den Effekt zu erzielen, der nur mit PNGquant zu erzielen ist, musst du eben dieses als Kommandozeilen-Befehl verwenden. Nichts für mich.

Ich nutze weiterhin TinyPNG im Web, sowie ImageAlpha auf dem Mac und PNGoo unter Windows. Was verwendest du?

ImageOptim

Das Drag-and-Drop-Dashboard von ImageOptim.
Das Drag-and-Drop-Dashboard von ImageOptim.

ImageOptim schlägt jeden einzelnen verlustfreien Optimierer, indem alle gebündelt werden. Es ermittelt die beste Kombination von Komprimierungsparametern und entfernt unnötige Kommentare und Farbprofile.

JPEGmini

Das Drag-and-Drop-Dashboard von JPEG Mini Lite.
Das Drag-and-Drop-Dashboard von JPEG Mini Lite.

JPEGmini ist eine zum Patent angemeldete Technologie zur erneuten Komprimierung von Fotos, die die Größe von Fotos erheblich reduziert, ohne die Wahrnehmungsqualität zu beeinträchtigen. Die Autoren behaupten, die Größe einer Datei um bis zu 80% zu reduzieren und dabei die Qualität beizubehalten, die dem Original optisch entspricht.

Das neue WebP-Bildformat

Performance ist ein Ranking-Faktor. Du musst also ansprechendes Layout und hohe Geschwindigkeit zusammenbringen. Dafür gibt es ein ganzes Bündel an Maßnahmen. Heute wollen wir dein Augenmerk auf die Bildoptimierung lenken.

Wann und warum entstand WebP?

Schon vor über fünf Jahren stellte Google das Bildformat Webp als Alternative zu JPG und PNG vor. An sich waren die Googler auf der Suche nach einem alternativen Videoformat, als sie erkannten, dass sich die Keyframe-Kompression, die in Videos benötigt wird, auch ausgezeichnet für die Bildreduktion eignet. Das entsprechende Videoformat, konsequenterweise Webm genannt, erfanden sie konsequenterweise ebenfalls. Sowohl Webp als Bildformat wie Webm als Videoformat basieren in Teilen ihrer Funktionalität auf dem Videocodec VP8.

Betreiber großer Datacenter sind naturgemäß immer daran interessiert, Bandbreite zu sparen. Die einfachste Methode, dies zu erreichen, ist, kleinere Dateien auszuliefern. In Anbetracht der Dominanz von Bildern im modernen Web, ist es naheliegend, an diesem Punkt anzusetzen. Denn immerhin machen Bilder im Schnitt 64 Prozent des Gesamtdateigewichts einer Website aus.

Endlich wieder Platz in der digitalen Hose mit WebP. (Foto: Pixabay)

Webp sollte nun also die Vorteile von JPG und PNG in einem einzigen Dateiformat vereinen. Der größte Vorteil von PNG ist dabei die Möglichkeit, Transparenz in Form des Alphakanals zu bieten, ein Feature, das JPG nicht leistet. Der größte Vorteil von JPG hingegen ist es, sehr komplexe Bilder, zwar mit Verlusten, aber immerhin sehr effektiv verkleinern zu können. PNG konnte nur ohne Verluste speichern, so dass der Seitenbetreiber stets fachlich qualifiziert wählen muss, welches Format er für welche bildliche Darstellung einsetzen sollte.

Mit nur einem einzigen Bildformat würde diese Wahl leichter. Wissen um die Hintergründe der unterschiedlichen Formate würde entbehrlich. Webp würde es schon richten.

Google verwendete das neue Bildformat konsequent für seinen Chrome-Web-Store und seine mobilen Google+-Apps. Damit konnten insgesamt Bandbreitenersparnisse von über 50 Terabyte Daten pro Tag erreicht werden. Das mag als Beleg der Effizienz des Formats wohl ausreichen.

Je leichter die Seiten, desto schneller die Darstellung. (Foto: Pixabay)

WebP ist nicht neu, aber seiner Zeit voraus

Dennoch konnte sich Webp in der Folgezeit nicht durchsetzen. Das lag an der mangelnden Unterstützung durch die Browserhersteller. Bis zum heutigen Tage unterstützen nur die Chrome-Browser auf Desktop und Mobile, sowie die Opera-Browser das Format.

Vor einigen Jahren war das noch ein größeres Problem als heutzutage. Glaubt man den Statistiken des Dienstes Caniuse zur Verbreitung des Webp-Standards sind heute aufgrund der gestiegenen Marktanteile des Chrome-Browsers weltweit rund 75 Prozent aller Nutzer in der Lage, Webp zu sehen. In Deutschland beträgt der Anteil nach der gleichen Statistik noch relativ magere 48 Prozent.

Damit wird das Format perspektivisch immer interessanter. Das war allerdings zum Zeitpunkt der Erstvorstellung noch nicht so. Insofern arbeitet die Zeit für Webp. Dennoch muss man festhalten, dass Microsoft, Mozilla und Apple Webp derzeit nicht unterstützen. Mozilla und Apple sollen allerdings bereits ernsthafte Tests und Experimente durchführen. Es wäre also gut möglich, dass am Ende nur wieder Microsoft zurückbleibt. Das sind Webentwickler ja seit gut 20 Jahren gewöhnt.

Gründe gegen und Alternativen zu WebP

Das dominante Bildformat unserer Tage ist JPG. Daran ist nichts zu rütteln. Jede Kamera in jedem Smartphone der Welt speichert in diesem Format. JPG ist quasi ein Synonym für digitales Bild. Deshalb kannst du JPG mit einem ganzen Haufen verschiedener Bildbearbeitungsprogramme öffnen und bearbeiten, Webp aber nicht.

Dort laden Nutzer nämlich ganz offenbar von anderen gepostete Bilder herunter, um sie dann wieder hochzuladen und selber weiter zu teilen. Der Nachteil, den Webp in diesem Zusammenhang bietet, kann für den Betreiber einer Website durchaus ein Vorteil sein. Auf diese Weise erhältst du nämlich quasi einen Diebstahlschutz für deine Bilder auf ganz kleiner Flamme.

Gerade die verlustorientierte PNG-Kompression mit einer Pngquant-Variante, wie TinyPNG, kann Webp in vielen Fällen in Sachen Dateigewicht schlagen, wenn auch nicht um Längen. Diese Kompressoren lassen es vielen Seitenbetreibern überflüssig erscheinen, sich auf das Format Webp einzulassen.

Die Bildqualität variiert (angeblich)
Im Grunde ist es bei Bildern ja so, dass man als Seitenbetreiber zwar die kleinstmögliche Dateigröße, dabei aber die bestmögliche Qualität anstrebt. Spielte Bandbreite keine Rolle, würden wir alle nicht optimieren – soviel Ehrlichkeit muss sein. Webp will nicht das perfekte Bildformat, sondern lediglich der beste Kompromiss sein.

Dem Format schlägt einiges an Kritik entgegen, gerade wenn es um die Beurteilung der Bildqualität geht. Die sei umso schlechter, je komplexer das zu komprimierende Bild sei, hört man des Öfteren. Nach meiner eigenen Erfahrung ist das so nicht richtig.

Es stimmt, dass die Bildqualitäten im direkten Vergleich nominell gleicher Kompressionslevel tendenziell bei JPG etwas besser sind. Das liegt indes allein darin begründet, dass man ein JPG mit 80% Qualität nicht einfach mit einem Webp mit 80% Qualität vergleichen kann. Dazu ist die Vorgehensweise beider Verfahren zu unterschiedlich.

Von daher mag es einem erscheinen, als sähe ein JPG mit kleinerer Qualitätsstufe besser aus als ein Webp mit höherer Qualitätsstufe. Entscheidend kann aber doch nur die Dateigröße sein. Und wenn sich dann zeigt, dass ein Webp mit 80 Prozent Qualität immer noch kleiner ist als ein JPG mit 40 Prozent Qualität, dann erübrigt sich diese Diskussion ganz schnell.

Google hat auf seiner Developers-Seite eine Galerie mit Vergleichsbildern zu bieten. Überzeuge dich selbst.

Best Practice: WebP auf Dr. Web

Wenn du ein Webentwickler bist, der eine weitgehend statische Seite für einen KMU-Kunden erstellen soll, dann wirst du möglicherweise eher konventionell an die Sache herangehen. Du wirst dir die Originale der einzusetzenden Bilder geben lassen oder sie selbst erstellen. Dann wirst du zu einem Zeitpunkt X die erforderlichen Auflösungen erstellen und, in den erforderlichen Formaten, optimiert abspeichern. Solange dein Kunde nicht selber Bilder hochladen kann, ist das eine Vorgehensweise, die ich selber jederzeit genauso bevorzugen würde.

Was aber passiert, wenn der Kunde oder andere Projektbeteiligte eine nicht abzuschätzende Menge an Bildern im laufenden Betrieb werden hochladen können? Das ist ein Problem, vor dem jeder Betreiber eines Online-Magazins steht, und das wir hier beim Dr. Web Magazin mit Webp gelöst haben.

Bilder sind das Salz in der Suppe eines Beitrags. Entsprechend soll es auch nicht nur eines sein, sondern die Anzahl der Bilder pro Beitrag muss sich der Textmenge sinnvoll anpassen. Konventionell gedacht, müsste jetzt jeder Autor fundierte Kenntnisse in Bildformat-Auswahl und -Optimierung haben. Spätestens beim Marketing-Experten unter den Schreibern ist diese Anforderung nicht mehr erfüllt.

Was tun? Sicherlich kannst du deine Autoren konsequent schulen und immer wieder dazu anhalten, auf optimierte Bilder zu achten. Allein, der Erfolg wird mindestens durchwachsen sein. Mehrere Dutzend Male habe ich schon eigenhändig ganze Galerien wieder offline genommen und nachoptimiert. Das kann man jedoch nicht ständig tun, denn der Kontrollaufwand wird zu groß.

Schlussendlich suchte ich nach einer Lösung, die uns die beste Lösung automatisiert liefert. Da Dr. Web mit WordPress betrieben wird, konnten wir uns einer sehr einfachen Möglichkeit erfreuen. Diese besteht in der Kombination der beiden Plugins Optimus HQ und Cache Enabler von KeyCDN.

Optimus HQ ist ein Plugin, das sich automatisch um die Bildgrößenoptimierung kümmert, ohne dass der Uploader sich in irgendeiner Weise darum Gedanken gemacht haben muss. Stattdessen werden die Bilder schlicht über den Dialog hochgeladen und bereitgestellt. Die Optimierung nimmt Optimus im Hintergrund selber vor. Du kannst voroptimieren, musst es aber nicht.

Der Clou: In der kostenpflichtigen HQ-Variante, die allerdings bei sehr überschaubaren 29 USD pro Jahr liegt, ist Optimus HQ in der Lage, Webp-Dateien zusätzlich zu den übrigen Formaten zu erzeugen.

Wenn du Optimus nicht nur für deine eigenen Projekte, sondern auch für die deiner Kunden verwenden möchtest, musst du die Version HQ Pro erwerben, die mit jährlich 149 USD zu Buche schlägt und den identischen Funktionsumfang der Version HQ bietet. Die ebenfalls erhältliche kostenlose Version kommt für unser Anliegen nicht in Frage, weil sie die Webp-Konversion nicht beherrscht.

Optimus HQ: Hier musst du den Haken setzen. (Screenshot: Dr. Web)


Wenn wir nun an dieser Stelle angekommen sind, bringen wir noch das Caching-Plugin Cache-Enabler ins Spiel, das vollkommen kostenfrei verwendet werden kann und in Teilen auf Sergej Müllers Cachify basiert. Cache-Enabler lässt sich nämlich so konfigurieren, dass es die erzeugten Webp-Formate mitcacht und entsprechend befähigten Browsern ausliefert.

Cache-Enabler: Hier ist ebenfalls ein Haken zu setzen. (Screenshot: Dr. Web)


Dazu ist keine weitere Parametrisierung erforderlich. Direkt nach der Installation der beiden Plugins und Aktivierung der Webp-Unterstützung sieht der Aufruf der verwendeten Dateien im Chrome so aus:

Chrome-Nutzer bekommen automatisch WebP geliefert. (Screenshot: Dr. Web)


Die Auslieferung anderer Formate an andere Browser erfolgt ebenfalls automatisch. Einfacher kann der Einsatz von Webp nicht sein. Der einzige Haken ist, dass Optimus ausschließlich ohne Verluste komprimiert. Auf diese Weise verschlechtert sich die Bildqualität durch die Behandlung zwar überhaupt nicht, der allerletzte Kick an Optimierung bleibt dir indes verwehrt.

Wenn ich mir jedoch anschauen möchte, was Optimus aus den Dateien macht, dann will ich mich mal besser nicht zu laut beklagen. Dieser Screenshot stammt aus dem Uploadverzeichnis:

Eindeutiger Größenunterschied zugunsten des Formats Webp. (Screenshot: Dr. Web)


Etwa ein Drittel weniger als beim gleichen PNG ist immer drin. Betrachten wir auch noch einen Vergleich mit zugrundeliegendem JPG:

Auch zu JPG ist der Größenunterschied deutlich. (Screenshot: Dr. Web)


Das JPG, dessen Daten du in der obigen Abbildung siehst, ist das Bild der jungen Dame mit der zu weiten Hose weiter oben im Beitrag. Ich hatte das JPG bereits mit JPEGmini auf 150kb voroptimiert. Dennoch ist es Optimus gelungen, weitere 25kb aus der Datei zu pressen. Damit ist die Ausgangslage für Webp durchaus nicht einfach, denn wir vergleichen zwei optimierte Versionen miteinander. Dennoch konnte Optimus in der Webp-Variante weitere 25kb gut machen. Damit ist das Bild im Vergleich zum voroptimierten JPG ein Drittel kleiner.

Solltest du jetzt anmerken, dass 100kb immer noch groß sind, dann hast du Recht. Ich habe hier allerdings im Vorfeld keine Größenänderungen vorgenommen. Was du im Screenshot siehst, sind die Bilder mit ihrer ursprünglichen Auflösung. Optimus HQ hat diese danach noch auf die Verwendung im Theme angepasst. So kommen wir dann auf um die 40kb für die im Beitrag verwendeten Versionen.

Optimus behandelt übrigens auch alle übrigen erzeugten Thumbnails in gleicher Weise. Der Footprint, den die Bilder auf Dr. Web durch diese Behandlung hinterlassen, ist dementsprechend über alles ein rundes Drittel geringer, als er es wäre, wenn wir nur mit manueller Voroptimierung arbeiten würden. Überzeuge dich selbst und besuche Dr. Web mit dem Chrome-Browser.

Das ist ein Riesenschritt auf dem Weg zu höherer Web-Performance.

Links zum Beitrag

(Dieser Beitrag erschien erstmals im März 2013 und wird seitdem aktuell gehalten. Das letzte Update stammt vom 26. Januar 2020.)
Beitragsbild: Pixabay

Teilen macht Freude:

Facebook
LinkedIn
Twitter
XING

12 Antworten

  1. Hallo,
    danke für den sehr ausführlichen Überblick über gängige Tools für die Bildkompression. Aber wieso kannst du nicht 128 Farben einstellen, das geht doch wunderbar mit den plus / minus Symbolen?

  2. Hallo,
    ich habe gerade CompressPNG mit einer 91KB JPEG-Datei getestet und leider festgestellt, dass die PNG-Datei größer als das Original. Gute Ergebnisse habe ich aber mit JPEGmini.com erzielt.
    Grüße
    Mathias

      1. Ist mir schon klar, aber der beschriebene Vorteil bzgl. CompressPNG und weiteren Dateiformaten ist nur so lange ein Vorteil, bis man erkennt, dass es nur mit PNG effizient ist. Das war der eigentliche Hinweis. 🙂

  3. Hallo,
    eine Frage zu Tiny PNG vs. Fireworks: Wenn ich mit Fireworks ein Bild als PNG 8, Farben “Exakt” exportiere, dann bekomme ich genau die gleiche Dateigröße wie wenn Tiny PNG die Kompression erledigt. Und auch die Fireworks PNG 8-Dateien funktionieren im IE 6 inklusive Transparenz. Kommt bei beiden Tools das gleiche Verfahren zum Einsatz?

  4. Guter Artikel. Wer Photoshop hat, kann es sogar selber machen:
    Als Web speichern -> PNG-8 mit 256 Farben, 100% Dithering und Dropdown auf “Adaptiv” (= Farbwahl). Have fun! 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

On Key

Related Posts

Ein aufgeräumtes Home Office

Organisiert ins Social Distancing: Die besten Tools fürs Home Office

Gerade ist das Thema Heimarbeit branchenübergreifend präsent wie nie. Aber auch unabhängig von Kontaktsperren in Zeiten des Coronavirus stellt einen das Home-Office für die Eigenorganisation und für die Kommunikation mit den lieben Kollegen vor ganz andere Herausforderungen als im Büro.

Maria Goeppert-Mayer Nobelpreisträgerin CSS Grid Layouts

Responsive Design mit CSS: Flexbox oder Grid? (Mit Beispielen)

Wie wir Websites gestalten, hat sich in den vergangenen Jahren immer wieder mal mehr, mal weniger radikal geändert. Mit der Einführung von CSS Flexbox hat eine entscheidende Erneuerung stattgefunden. Kurz darauf ist mit CSS Grid ein weiteres Layoutmodell hinzugekommen. Welches ist nun wofür besser geeignet? Muss ich mich für ein Modell entscheiden?

Kostenlose Bewerbungsvorlagen zum Download

Die 37 besten und kostenlosen Bewerbungsvorlagen (2020)

Eine ordentliche Bewerbung mit schick designtem Lebenslauf, der nicht mit Word zusammengestöpselt wurde, ist im Bewerbungsverfahren heutzutage mal mindestens die halbe Miete. Außergewöhnliche Gestaltung lässt eine Person in einem Licht erscheinen, in dem nicht jeder zu glänzen vermag. Im besten Falle macht die Bewerbung so viel her, dass sich potenzielle Arbeit- oder Auftraggeber prinzipiell schon vor dem Vorstellungsgespräch mit dem Herzen für Sie entschieden haben.