Bilder komprimieren: So machst du deine Bilder federleicht
Eine wichtige Maßnahme, die auch von professionellen Webdesignern häufig vergessen wird: Bilder komprimieren! So erzielen professionelle Webdesign Agenturen mit sehr einfachen Mitteln deutlich bessere Ladezeiten. Heute wollen wir dein Augenmerk auf die Bildoptimierung lenken.
Welche Formate eignen sich für welche Bilder am besten?
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:
Format | Geeignet für | Optimierungsoptionen |
JPEG | Fotos und Grafiken, die viele Farben oder Farbverläufe (Gradients) enhalten | Rauschen reduzieren, Qualität reduzieren, „Als Progressiv exportieren“ |
GIF | Bewegtbilder | Dithering reduzieren, Anzahl der Farben reduzieren, horizontale Muster vergrößern, vertikales Rauschen verringern |
PNG-8 | Grafiken mit wenigen Farben | Dithering reduzieren, Anzahl der Farben reduzieren, horizontale und vertikale Muster vergrößern |
PNG-24 | Bilder mit transparentem Hintergrund | Rauschen reduzieren, Anzahl der Farben reduzieren |
Alleskönner: WebP | Fotos und Bilder mit transparentem Hintergrund | Qualität reduzieren, Anzahl der Farben reduzieren |
Im Folgenden will ich nun die Optionen und Tools entsprechend erörtern.
TinyPNG: Schnell und unkompliziert
TinyPNG komprimiert Bilder, 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.
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.
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.
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.
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:
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.
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:
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.
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.
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.
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
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
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
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.
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.
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.
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.
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:
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:
Etwa ein Drittel weniger als beim gleichen PNG ist immer drin. Betrachten wir auch noch einen Vergleich mit zugrundeliegendem JPG:
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. Die Bilder ins WebP-Format kannst du auch mit der kostenlosen Photoshop Alternative Photopea exportieren.
Bilder mit Photoshop für den Export ins Web optimal aufbereiten
Jedes Foto und jede Grafik, die Sie aus Photoshop für die anschließende Verwendung im Internet exportieren, sollte den Dialog Für Web und Geräte speichern passieren. Damit werden Ihre Bilder nicht nur in bestimmten Formaten gespeichert, dieser Dialog bietet Ihnen auch Kontrolle über Qualität, Tansparenz und Farben. Das wird zunehmend wichtiger, da mehr und mehr Menschen mit mobilen Geräten im Internet surfen. Kleine Dateigrößen sind für ein gutes Anwendererlebnis dieser Benutzergruppe entscheidend.
Beginnen wir mit der Oberfläche des Dialogs Für Web und Geräte speichern. Sie rufen ihn über das Menü Datei oder durch Drücken der Tasten Strg / Befehl + Alt / Auswahl + Shift + S auf. Das Erste, was Ihnen vermutlich ins Auge fällt, ist das große Vorschaufenster für die optimierte Version. Es gibt vier Ansichten, zwischen denen Sie über die Registerkarten oben links wechseln können:
- Original
- Optimiert
- 2-fach
- 4-fach
Die Ansicht Original zeigt die Datei genau so wie außerhalb des Dialogs. Optimiert zeigt die Datei, wie sie nach dem Anwenden der aktuellen Optimierungseinstellungen aussehen würde. 2fach und 4fach fügen in den Dialog zwei beziehungsweise vier Vorschaufenster ein, damit Sie die Auswirkung der verschiedenen Einstellungen mit direkt vergleichen können. In der Ansicht 4fach können Sie drei verschiedene Versionen und das Original gleichzeitig anzeigen. Mit einem Klick ins Vorschaufenster aktivieren Sie die jeweiligen Einstellungen. Diese können Sie unabhängig von den anderen Vorschaufenstern ändern, was beim Testen verschiedener Komprimierungsarten sehr nützlich sein kann.
In der 4fach-Ansicht können Sie drei verschiedene Optimierungsversionen mit dem Originalbild vergleichen.
Unter den Vorschaubildern wird eine kurze Zusammenfassung angezeigt: der gewählte Dateityp, die Dateigröße und die geschätzte Ladezeit. Bedenken Sie, dass Sie diesen Dialog zwar aufgerufen haben, um eine möglichst kleine Dateigröße einzustellen. Das sollte jedoch nicht zu Lasten der Bildqualität gehen. Schenken Sie dieser Zusammenfassung also Ihre Aufmerksamkeit. Wenn Sie wollen, können Sie die geschätzten Ladezeiten verändern, um die Geschwindigkeit des Downloads besser abschätzen zu können, indem Sie die in der folgenden Abbildung rot markierte Schaltfläche Downloadgeschwindigkeit auswählen anklicken.
Rechts von den Vorschaubildern sind die Dateieinstellungen. Hier nehmen Sie alle Änderungen vor. Die Optionen unterscheiden sich je nach dem gewählten Dateiformat erheblich voneinander. Sie haben die Auswahl zwischen fünf verschiedenen Formaten: GIF, JPEG, PNG-8, PNG-24 und WBMP.
Dateiformat-spezifische Optionen
GIF
Das Graphic Interchange Format (GIF) eignet sich sehr gut zum Speichern von Logos, Text und anderen grafischen Bildern. Das Format nutzt eine verlustfreie Komprimierung, das heißt die höchste Qualität bleibt bei diesem Prozess erhalten. Allerdings erlaubt das GIF-Format nur 256 Farben. Das heißt nicht, dass Sie lediglich aus einem festgelegten Set aus 256 Farben auswählen können. Es ist eher so, dass eine Datei im GIF-Format lediglich bis zu 256 Farbtöne speichern kann, in der jedes Pixel farbig ist. Daher ist das Format für Fotos eher ungeeignet, aber perfekt für Bilder mit großen einheitlichen Flächen mit Volltonfarbe.
Das GIF-Format komprimiert Bilder, indem es große Bereiche ähnlicher Farbtöne untersucht. Damit eignet sich das Format sehr gut für Logos.
Farbreduktion
Wenn Sie aus der Auswahlliste Optimierungsformat das Format GIF wählen, sehen Sie diverse Optionen, um zu steuern, wie das GIF komprimiert wird. Die erste Option ist der Farbreduktionsalgorithmus. Da das GIF-Format lediglich 256 Farben speichern kann, schickt Photoshop das Bild durch einen Algorithmus, um zu entscheiden, welche Pixel erhalten bleiben und welche nicht. Dafür gibt es wiederum verschiedene Optionen.
Die Optionen der Auswahlliste Farbreduktionsalgorithmus
Manche Optionen, wie Schwarzweiß oder Graustufen, sind selbsterklärend. Manche sind im Prinzip nutzlos – zum Beispiel Mac OS und Windows, die versuchen, die für das jeweilige Betriebssystem typische Farbskala zu simulieren. Schließlich gibt es die Option Benutzerdefiniert, die es Ihnen erlaubt, die komplette Farbpalette selbst einzustellen. Dies kann ziemlich mühsam sein, daher sind Sie besser mit einer der folgenden Methoden bedient:
- Perzeptiv: bevorzugt Farben, an deren Wahrnehmung das menschliche Auge am meisten angepasst ist. Der Algorithmus ist jedoch weniger genau in der Wiedergabe exakter Farbwerte.
- Selektiv: bestimmt, welche Farbtöne am meisten und in größter Konzentration verwendet wurden. Diese Option gewährleistet, dass die ermittelteten Werte erhalten bleiben. Für die meisten Bilder ist „Selektiv“ die beste Option.
- Adaptiv: Funktioniert ähnlich wie „Selektiv“; allerdings bevorzugt dieser Algorithmus Farbtöne, die im gesamten Dokument verwendet werden – anstatt nebeneinander liegender Farbtöne.
- Restriktiv: Limitiert die Farbpalette auf die inzwischen überkommene Palette der so genannten 216 websicheren Farben. Anhand dieser Palette wurde in den frühen Tagen des Internets Farben festgelegt, die von der Mehrheit der verfügbaren Monitore gerendert werden konnten. Heute dürfte es schwierig sein, jemanden zu finden, der einen Monitor mit einer solch begrenzten Farbpalette verwendet – sprich, die Option „Restriktiv“ ist quasi nutzlos.
Farben
Ein GIF kann 256 Farben in seiner Farbtabelle speichern. Es kann jedoch manuell auf einen geringeren Wert eingestellt werden. Die Anzahl der Farben zu senken, kann dazu beitragen, die Dateigröße zu reduzieren. In einigen Fällen ist dies sogar ohne Qualitätsverlust möglich.
Dithering
Farbverläufe mit einer solch reduzierten Farbpalette zu reproduzieren, kann mitunter eine echte Herausforderung sein. Selbst ein einfacher Verlauf kann hunderte von Schattierungen enthalten, so dass die Farbtabelle schnell an ihre Grenzen stößt. Einfach ein paar der Farben rauszuschmeißen, kann zu unerwünschten Effekten führen. Um das zu verhindern, bietet Ihnen Photoshop den Dithering-Algorithmus, der Pixel mit verschiedenen Farben strategisch über den Farbverlauf verteilt. Dieses Verfahren ähnelt dem Pointilismus in der Malerei, denn es vertraut darauf, dass Ihr Auge die Farben zu einem nahtlosen Verlauf mixt.
Weil GIF-Dateien nur 256 Farben speichern können, müssen weitere Farben durch Dithering kompensiert werden.
Fürs Dithering gibt es vier Optionen:
- Ohne Dither entfernt Dithering komplett, was zu Farbstreifen führen kann.
- Diffusion wendet ein diffuses Muster an, mit dem Pixel anhand ihrer Konzentration ausgeschlossen werden.
- Muster schließt Pixel etwas gleichmäßiger aus, um ein Halbton-Muster zu simulieren – was eher stilistisch als realistisch wirkt.
- Die Option Rauschen arbeitet ähnlich wie Diffusion, aber die Platzierung der Pixel ist zufälliger, was zu gitterartigen Verläufen führt. Dank Photoshop können Sie dieses Ditherung noch etwas verfeinern, in dem Sie die Stärke vorgeben.
Transparenz und Hintergrund-Matte
Das GIF-Format erlaubt 1-Bit-Transparenz – sprich, ein Pixel kann entweder völlig transparent oder vollkommen opak sein. Dies kann zu hässlichen, scharfen Kanten und merkwürdig gefärbten Farbverläufen führen. Sie können den Transparenz-Dither-Algorithmus verändern, um die Farbverläufe etwas fließender erscheinen zu lassen – allerdings sehen sie anschließend häufig etwas gitterhaft aus.
Am besten erzielen Sie eine gleichmäßige Transparenz bei einem GIF, indem Sie die Hintergrund-Matte an die Hintergrundfarbe des Zielbereich beziehungsweise des Containers anpassen, in den die Grafik später eingebunden wird. Über das Ausklappmenü Hintergrund können Sie eine Matte-Farbe auswählen, mit der transparente Pixel ausgefüllt oder überblendet werden.
Über das rot umrandete Auswahlmenü Hintergrund können Sie eine Matte-Farbe wählen.
Beispiel: Wenn ein Pixel eine Deckkraft von 30 Prozent hat, füllt Photoshop die übrigen 70 Prozent mit der Matte-Farbe, so dass eine überblendete Farbe mit 100 Prozent Deckkraft entsteht. Diese Technik funktioniert ganz hervorragend, wenn das Bild an seiner späteren Position über einer Volltonfarbe liegt. Wenn es über einer Struktur oder einem Verlauf platziert wird, entstehen Säume, wie die folgende Abbildung zeigt.
Es sind folgende Kombinationen zu sehen:
- Ohne Hintergrund-Matte auf Volltonfarbe
- Hintergrund-Matte auf Volltonfarbe
- Ohne Hintergrund-Matte auf Farbverlauf
- Hintergrund-Matte auf Farbverlauf
Interlaced
Web-Ausrichtung
Lossy
(Dieser Beitrag erschien erstmals im März 2013 und wird seitdem aktuell gehalten. Das letzte Update stammt vom 26. Januar 2020.)
Beitragsbild: Pixabay
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?
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
Hast Recht. Ich hätte den Slider für die Grobpositionierung und Plus oder Minus für die eine Farbe weniger nehmen sollen.
Deswegen kommt in der Überschrift zu diesem Artikel auch 3 x der Begriff PNG vor 😉
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. 🙂
Da ist was dran. Vielleicht sollte man noch erwähnen, dass man Bilder, die richtigerweise als JPG vorliegen, niemals nach PNG konvertieren sollte.
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?
Don’t forget to checkout kraken.io and resizeimage.net
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! 🙂
TinyPNG hat auch ein WordPress-Plugin, das ich nicht mehr missen möchte (https://de.wordpress.org/plugins/tiny-compress-images/).
Das Plugin ist für die ersten 500 Bilder kostenlos. Wobei jede Bildgröße einzeln gezählt hat.
Mit den Standardwerten beideutet das, dass man 500 / 4 = 125 (Vorschau, Medium, Groß, Orginal) Bilder pro Monat hochladen und komprimieren lassen kann.
Hallo und vielen Dank für den Artikel. Ich nutze folgende Webseite für die Kompression: https://www.websiteplanet.com/de/webtools/imagecompressor/
Auf die Seite wurde ich vor einiger Zeit aufmerksam und ich finde sie brauchbar.
Ich finde https://squoosh.app/ immer noch MEGA, wenn es Bildkompression geht.
Hallo, ich denke die beste Bildreduktionsseite
Sie sollten dies auch hinzufügen
Hallo, ich denke die beste Bildreduktionsseite
https://www.bestimagecompressor.com/de
Sie sollten dies auch hinzufügen
Sehr hilfreicher Artikel. Wir nutzen die gleichen Tools bei der Erstellung neuer Webseiten.
LG
Guter Artikel aber mit Photoshop ist das auch in Handumderehen machbar.🙂
LG Anna Lena