Die Bilder auf deiner Website sind unnötig groß

Redaktion Dr. Web

Unter der Bezeichnung “Redaktion Dr. Web” findest du Beiträge, die von mehreren...

Bilder stellen die überwältigende Mehrheit der Web-Inhalte. Dabei müssen wir allzu häufig erkennen, dass eine Vielzahl an Websites und Apps viel zu selten darauf achten, das optimale Bild, bezogen auf Format, Größe, Qualität und Auflösung zu liefern.

Dabei ist es aus der Sicht eines Entwicklers mehr als logisch, dass wir kein 2.000 kb JPG ausliefern sollten, wenn wir in der Lage sind, dessen Ladeperformance zu verbessern, ohne dabei die optische Qualität beeinträchtigen zu müssen. Wieso sollten wir etwas liefern, das sowieso keiner sieht?

Diese Art von verantwortlichem Umgang mit Bandbreiten ist uns nicht neu. Offenbar gibt es aber immer noch viele unter uns, die diese Verantwortlichkeit nicht ernst genug nehmen. Dabei gibt es längst etablierte Verfahrensweisen, die Performance von Bildern im Web zu optimieren. Lass uns ein paar dieser Punkte betrachten:

  • Optimierte Bildformate
  • Bibliotheken von Drittanbietern
  • APIs von Drittanbietern

Optimiierte Bildformate

Die Verwendung von Bildformaten wie PNG, JPEG und GIF ist etabliert. Diese drei gibt es seit Jahrzehnten. Dabei steht jedes dieser Formate für einen anderen, zu empfehlenden Einsatzbereich. So wirst du niemals für jedes Bild das gleiche Format wählen. Zwischenzeitlich wurden weitere Formate an den Markt gebracht, teilweise standardisiert, um genau die optimierte Ladeperformance zu bringen, um die es uns in diesem Beitrag geht.

Beispiele sind

  • WebP
  • JPEG-XR
  • BPG

Diese optimierten Formate stellen gute Versuche dar, die unnötige Aufblähung von Web-Bildern zu vermeiden. Dabei stellen Bildformate die natürlichste Methode dar, auf Optimierung und Kompression zu setzen, ohne auf Lösungen von Drittanbietern zurückgreifen zu müssen. Dummerweise gibt es keinen einhelligen Konsens in dieser Sache. Immer noch gibt es unzureichenden Support von Browser zu Browser, sowie andere Beschränkungen, Lizenzprobleme und sonstige Faktoren, die es unmöglich machen, konsistente Optimierung aller Web-Bilder sicherzustellen.

Bibliotheken von Drittanbietern

Ebenso bieten sich Bibliotheken von Drittanbietern an, um Bilder ladefreundlich zu komprimieren. Solche Bibliotheken erlauben dir die Optimierung via API, wobei du selbiger das Bild nebst etwaigen Kompressionsparametern übergibst. Raus kommt dann das optimierte Bild. Das leisten beispielsweise

Das Problem daran ist, dass die Implementation dieser Bibliotheken einen nicht unerheblichen Aufwand darstellt. Die Frage ist, ob dir diese Zeit bezahlt wird. Zudem basieren alle Bibliotheken auf Standard-Algorithmen, die nur bis zu einem gewissen Grad effektiv sein können. Die völlige Freiheit darüber, wie flexibel du die Kompressionsanforderungen konfigurieren kannst, geben dir diese Bibliotheken nicht. Such mal nach einer Bibliothek, die ein PNG nimmt und es dir als optimal, aber verlustfrei komprimiertes Bild zurück gibt.

APIs von Drittanbietern

APIs von Drittanbietern gibt es in den Geschmacksrichtungen öffentlich und Premium. Diese Services nehmen deine Bilder zur Optimierung entgegen und geben sie dir über eine HTTP-Antwort zurück. Das ist ein einfacher und bequemer WEg, der von dir keinerlei Fachkenntnisse und Konfigurationen erfordert. Zudem ist eine solche Lösung nicht sprach- oder plattformabhängig. Dadurch erreichst du eine vergleichsweise größere Flexibilität.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Beispiele sind:

Du siehst es schon an den Beispielen. Eine All-in-One-Lösung gibt es dabei nicht. Du brauchst stets mehrere Lösungen für das gleiche Problem.

Wenn du ein CDN einsetzt, wird es noch schwieriger

Alle bisher genannten Tools und Services sind gängigerweise im Einsatz und erfreuen sich einer entsprechenden Popularität. Dabei ist aber keine davon eine wirklich leicht verständliche, intelligente Lösung für die Kompression und Optimierung von Web-Bildern. Kommt jetzt noch die Verwendung eines CDN ins Spiel, wird das Thema noch komplexer. Allein die optimierte Übergabe an das CDN kann dir den Spaß an der sache verderben.

Besser wäre es doch, wenn es ein einzelnes Tool gäbe, mit dem wir folgende Aufgaben konsistent erledigen könnten:

  1. Upload, Speicherung und Auslieferung von Bildern per CDN
  2. Bildmanipulation (Auflösung, Farbanpassungen und mehr)
  3. Verlustfreie Bildkompression

Cloudinary stellt genau diese Lösung bereit. Es handelt sich um eine umfassende Lösung für das Bildmanagement auf Websites. Cloudinary kümmert sich um alle Belange rund um Web-Bilder, sei es die Speicherung und Auslieferung, aber auch die Kompression und Optimierung.

Cloudinary komprimiert Bilder auf die intelligente Art. Der Dienst erlaubt dir, eigene Vorgaben genauso zu realisieren, wie dich auf die automatische Format- und Qualitätsoptimierung zu verlassen.

Der interessanteste Aspekt an Cloudinary ist, dass die Interaktion mit dem Dienst vollkommen URL-basiert ist. Willst du einen Konfigurationsparameter ändern, änderst du einfach die URL. Wenn du die Änderungen nicht per URL vornehmen möchtest, kannst du genauso gut die bereitgestellten SDKs verwenden.

So funktioniert die Bildqualitäts-Optimierung

Das folgende Bild einer Frau wird über Cloudinary ausgeliefert. (Wenn du dich für den Upload-Mechanismus interessierst, lies diesen Beitrag):

Mittels dieser URL wird das Bild eingebunden:

http://res.cloudinary.com/demo/image/upload/woman.jpg

Dieses Bild wiegt ungefähr 569kb. Das ist schon nicht schlecht, geht aber noch besser. Lass uns mal schauen, wie weit wir das Bild reduzieren können, ohne dass es auf die visuelle Qualität geht:

http://res.cloudinary.com/demo/image/upload/q_90/woman.jpg

Die Eigenschaft q akzeptiert eine Reihe von Werten. Einer davon ist die Qualität in Prozent, die als Wert von 1 bis 100 angegeben wird. Das haben wir im obigen Beispiel angewendet. So konnten wir das Bild auf 123kb komprimieren. Wir haben also satte 446kb reduziert. Spätestens jetzt dürfte dir klar sein, was wir mit dem Statement “Die Bilder auf deiner Website sind unnötig groß” im Titel dieses Beitrags meinten.

Jetzt lass uns mal aufs Ganze gehen und schauen, wie weit wir es mit diesem Bild treiben können:

http://res.cloudinary.com/demo/image/upload/q_40/woman.jpg

Jetzt liegt die Qualität bei 40 Prozent und die GRöße reduzierte sich auf 38kb. Dabei ist die visuelle Qualität allerdings ebenfalls teilweise beeinträchtigt. Dennoch hast du sicherlich einen guten Eindruck davon bekommen, wieviel bandbreite du mit nicht optimierten Bildern verschwendest.

Lass uns mal zehn Prozent ausprobieren.

http://res.cloudinary.com/demo/image/upload/q_10/woman.jpg

Jetzt ist das Bild wirklich nicht mehr ansehnlich. Damit können wir zwar nicht sicher sein, dass 40 Prozent der optimale Wert sind. Genauso gut könnte es 30 oder 20 sein. Cloudinary macht es uns einfach. Denn der Dienst bietet und einen Wert namens auto an, der stets die optimale visuelle Qualität bei größmöglicher Kompression liefert:

http://res.cloudinary.com/demo/image/upload/q_auto/woman.jpg

Die Verwendung des Wertes auto liefert uns schlussendlich ein Bild, das 45kb wiegt. Ist das nicht wesentlich einfacher als einen strikten Wert zu verwenden und die beste Qualität erraten zu müssen?

Auto-Formate

Neben der automatischen Qualitätsermittlung kannst du auch die Auto-Format-Erstellung verwenden. Hier entscheidet Cloudinary, welches optimale Bildformat es liefern wird, in Abhängigkeit vom Browser, den dein Besucher verwendet:

http://res.cloudinary.com/demo/image/upload/f_auto/woman

Browser, etwa Chrome, unterstützen teils spezifische Formate wie WebP, um die Performance zu verbessern. Cloudinary wandelt Bilder automatisch in WebP um, wenn es die Sinnhaftigkeit dieses Unterfangens erkennt.

Fazit

Die Bilder auf deiner Website sind unnötig groß, oder jedenfalls nicht wirklich durchoptimiert. Du kannst verschiedene Bildformate oder die vorgestellten Tools verwenden, um möglichst nahe an eine optimale Performance zu kommen. Letzten Endes wirst du aber immer mit einem Kompromiss leben müssen.

Cloudinary hingegen bietet eine umfangreiche Bildverwaltungslösung, die die Bilder nicht nur per URL ausliefert, sondern auf dem gleichen Wege auch transformiert. Dabei steht Cloudinary nicht nur für Kompression, sondern auch für die Optimierung ansonsten.

Mach dir selbst ein Bild und registriere einen kostenfreien Cloudinary-Account. Schau, wie einfach es ist, deine Bilder mit diesem URL-basierten Dienst zu optimieren.

Dieser Beitrag ist ein Sponsored Post aus dem Hause Cloudinary.

Redaktion Dr. Web

Unter der Bezeichnung “Redaktion Dr. Web” findest du Beiträge, die von mehreren Autorinnen und Autoren kollaborativ erstellt wurden. Auch Beiträge von Gastautoren sind hier zu finden. Beachte dann bitte die zusätzlichen Informationen zum Autor oder zur Autorin im Beitrag selbst.

Hinterlasse einen Kommentar

3 Kommentare auf "Die Bilder auf deiner Website sind unnötig groß"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Holger Korsten
Gast

Bilder und deren Größe sind wichtig für optimale SEO und Pagespeed Werte bei Google. Klar kann jeder selbst seine Bilder komprimieren, aber es soll wohl auch einige geben, die sind nicht so firm in Bildbearbeitung. Und da finde ich diesen Dienst prima, zumal kostenlos in der free Version. Sponsored Post hin oder her… ist für den unerfahrenen Webmaster eine sehr gute Sache. Und wenn ich mir die Bilder auf den Webseiten so anschaue… dann gibt es extrem viel Optimierungsbedarf!

Dr. Peb
Gast

Sagt schon alles: Dieser Beitrag ist ein Sponsored Post aus dem Hause Cloudinary.

Lieber mal selber über seine Bildoptimierung nachdenken, als die Daten in die Obhut nichteuropäischer Dienste zu geben.

Dieter Petereit
Dr. Web

Was sagt das denn genau? Wir sind von Cloudinary auch abseits der Tatsache, dass sie diesen Post gesponsort haben, überzeugt. Deren Service ist meiner Meinung nach wegweisend. Was den anderen Hinweis betrifft. Klar, du kannst auch darüber nachdenken, selber Gurken anzubauen, als dich auf holländische Großbauern zu verlassen.