Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Redaktion Dr. Web 7. August 2017

Die Bilder auf deiner Website sind unnötig groß

Bilder stel­len die über­wäl­ti­gen­de Mehrheit der Web-Inhalte. Dabei müs­sen wir all­zu häu­fig erken­nen, dass eine Vielzahl an Websites und Apps viel zu sel­ten dar­auf ach­ten, das opti­ma­le Bild, bezo­gen auf Format, Größe, Qualität und Auflösung zu lie­fern.

Dabei ist es aus der Sicht eines Entwicklers mehr als logisch, dass wir kein 2.000 kb JPG aus­lie­fern soll­ten, wenn wir in der Lage sind, des­sen Ladeperformance zu ver­bes­sern, ohne dabei die opti­sche Qualität beein­träch­ti­gen zu müs­sen. Wieso soll­ten wir etwas lie­fern, das sowie­so kei­ner sieht?

Diese Art von ver­ant­wort­li­chem Umgang mit Bandbreiten ist uns nicht neu. Offenbar gibt es aber immer noch vie­le unter uns, die die­se Verantwortlichkeit nicht ernst genug neh­men. Dabei gibt es längst eta­blier­te Verfahrensweisen, die Performance von Bildern im Web zu opti­mie­ren. Lass uns ein paar die­ser Punkte betrach­ten:

  • Optimierte Bildformate
  • Bibliotheken von Drittanbietern
  • APIs von Drittanbietern

Optimiierte Bildformate

Die Verwendung von Bildformaten wie PNG, JPEG und GIF ist eta­bliert. Diese drei gibt es seit Jahrzehnten. Dabei steht jedes die­ser Formate für einen ande­ren, zu emp­feh­len­den Einsatzbereich. So wirst du nie­mals für jedes Bild das glei­che Format wäh­len. Zwischenzeitlich wur­den wei­te­re Formate an den Markt gebracht, teil­wei­se stan­dar­di­siert, um genau die opti­mier­te Ladeperformance zu brin­gen, um die es uns in die­sem Beitrag geht.

Beispiele sind

  • WebP
  • JPEG-XR
  • BPG

Diese opti­mier­ten Formate stel­len gute Versuche dar, die unnö­ti­ge Aufblähung von Web-Bildern zu ver­mei­den. Dabei stel­len Bildformate die natür­lichs­te Methode dar, auf Optimierung und Kompression zu set­zen, ohne auf Lösungen von Drittanbietern zurück­grei­fen zu müs­sen. Dummerweise gibt es kei­nen ein­hel­li­gen Konsens in die­ser Sache. Immer noch gibt es unzu­rei­chen­den Support von Browser zu Browser, sowie ande­re Beschränkungen, Lizenzprobleme und sons­ti­ge Faktoren, die es unmög­lich machen, kon­sis­ten­te Optimierung aller Web-Bilder sicher­zu­stel­len.

Bibliotheken von Drittanbietern

Ebenso bie­ten sich Bibliotheken von Drittanbietern an, um Bilder lade­freund­lich zu kom­pri­mie­ren. Solche Bibliotheken erlau­ben dir die Optimierung via API, wobei du sel­bi­ger das Bild nebst etwai­gen Kompressionsparametern über­gibst. Raus kommt dann das opti­mier­te Bild. Das leis­ten bei­spiels­wei­se

Das Problem dar­an ist, dass die Implementation die­ser Bibliotheken einen nicht uner­heb­li­chen Aufwand dar­stellt. Die Frage ist, ob dir die­se Zeit bezahlt wird. Zudem basie­ren alle Bibliotheken auf Standard-Algorithmen, die nur bis zu einem gewis­sen Grad effek­tiv sein kön­nen. Die völ­li­ge Freiheit dar­über, wie fle­xi­bel du die Kompressionsanforderungen kon­fi­gu­rie­ren kannst, geben dir die­se Bibliotheken nicht. Such mal nach einer Bibliothek, die ein PNG nimmt und es dir als opti­mal, aber ver­lust­frei kom­pri­mier­tes Bild zurück gibt.

APIs von Drittanbietern

APIs von Drittanbietern gibt es in den Geschmacksrichtungen öffent­lich und Premium. Diese Services neh­men dei­ne Bilder zur Optimierung ent­ge­gen und geben sie dir über eine HTTP-Antwort zurück. Das ist ein ein­fa­cher und beque­mer WEg, der von dir kei­ner­lei Fachkenntnisse und Konfigurationen erfor­dert. Zudem ist eine sol­che Lösung nicht sprach- oder platt­form­ab­hän­gig. Dadurch erreichst du eine ver­gleichs­wei­se grö­ße­re Flexibilität.

Beispiele sind:

Du siehst es schon an den Beispielen. Eine All-in-One-Lösung gibt es dabei nicht. Du brauchst stets meh­re­re Lösungen für das glei­che Problem.

Wenn du ein CDN einsetzt, wird es noch schwieriger

Alle bis­her genann­ten Tools und Services sind gän­gi­ger­wei­se im Einsatz und erfreu­en sich einer ent­spre­chen­den Popularität. Dabei ist aber kei­ne davon eine wirk­lich leicht ver­ständ­li­che, intel­li­gen­te Lösung für die Kompression und Optimierung von Web-Bildern. Kommt jetzt noch die Verwendung eines CDN ins Spiel, wird das Thema noch kom­ple­xer. Allein die opti­mier­te Übergabe an das CDN kann dir den Spaß an der sache ver­der­ben.

Besser wäre es doch, wenn es ein ein­zel­nes Tool gäbe, mit dem wir fol­gen­de Aufgaben kon­sis­tent erle­di­gen könn­ten:

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

Cloudinary stellt genau die­se Lösung bereit. Es han­delt sich um eine umfas­sen­de Lösung für das Bildmanagement auf Websites. Cloudinary küm­mert sich um alle Belange rund um Web-Bilder, sei es die Speicherung und Auslieferung, aber auch die Kompression und Optimierung.

Cloudinary kom­pri­miert Bilder auf die intel­li­gen­te Art. Der Dienst erlaubt dir, eige­ne Vorgaben genau­so zu rea­li­sie­ren, wie dich auf die auto­ma­ti­sche Format- und Qualitätsoptimierung zu ver­las­sen.

Der inter­es­san­tes­te Aspekt an Cloudinary ist, dass die Interaktion mit dem Dienst voll­kom­men URL-basiert ist. Willst du einen Konfigurationsparameter ändern, änderst du ein­fach die URL. Wenn du die Änderungen nicht per URL vor­neh­men möch­test, kannst du genau­so gut die bereit­ge­stell­ten SDKs ver­wen­den.

So funktioniert die Bildqualitäts-Optimierung

Das fol­gen­de Bild einer Frau wird über Cloudinary aus­ge­lie­fert. (Wenn du dich für den Upload-Mechanismus inter­es­sierst, lies die­sen Beitrag):

Mittels die­ser URL wird das Bild ein­ge­bun­den:

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

Dieses Bild wiegt unge­fähr 569kb. Das ist schon nicht schlecht, geht aber noch bes­ser. Lass uns mal schau­en, wie weit wir das Bild redu­zie­ren kön­nen, ohne dass es auf die visu­el­le Qualität geht:

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

Die Eigenschaft q akzep­tiert eine Reihe von Werten. Einer davon ist die Qualität in Prozent, die als Wert von 1 bis 100 ange­ge­ben wird. Das haben wir im obi­gen Beispiel ange­wen­det. So konn­ten wir das Bild auf 123kb kom­pri­mie­ren. Wir haben also sat­te 446kb redu­ziert. Spätestens jetzt dürf­te dir klar sein, was wir mit dem Statement “Die Bilder auf dei­ner Website sind unnö­tig groß” im Titel die­ses Beitrags mein­ten.

Jetzt lass uns mal aufs Ganze gehen und schau­en, wie weit wir es mit die­sem Bild trei­ben kön­nen:

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

Jetzt liegt die Qualität bei 40 Prozent und die GRöße redu­zier­te sich auf 38kb. Dabei ist die visu­el­le Qualität aller­dings eben­falls teil­wei­se beein­träch­tigt. Dennoch hast du sicher­lich einen guten Eindruck davon bekom­men, wie­viel band­brei­te du mit nicht opti­mier­ten Bildern ver­schwen­dest.

Lass uns mal zehn Prozent aus­pro­bie­ren.

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

Jetzt ist das Bild wirk­lich nicht mehr ansehn­lich. Damit kön­nen wir zwar nicht sicher sein, dass 40 Prozent der opti­ma­le Wert sind. Genauso gut könn­te es 30 oder 20 sein. Cloudinary macht es uns ein­fach. Denn der Dienst bie­tet und einen Wert namens auto an, der stets die opti­ma­le visu­el­le Qualität bei größ­mög­li­cher Kompression lie­fert:

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

Die Verwendung des Wertes auto lie­fert uns schluss­end­lich ein Bild, das 45kb wiegt. Ist das nicht wesent­lich ein­fa­cher als einen strik­ten Wert zu ver­wen­den und die bes­te Qualität erra­ten zu müs­sen?

Auto-Formate

Neben der auto­ma­ti­schen Qualitätsermittlung kannst du auch die Auto-Format-Erstellung ver­wen­den. Hier ent­schei­det Cloudinary, wel­ches opti­ma­le Bildformat es lie­fern wird, in Abhängigkeit vom Browser, den dein Besucher ver­wen­det:

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

Browser, etwa Chrome, unter­stüt­zen teils spe­zi­fi­sche Formate wie WebP, um die Performance zu ver­bes­sern. Cloudinary wan­delt Bilder auto­ma­tisch in WebP um, wenn es die Sinnhaftigkeit die­ses Unterfangens erkennt.

Fazit

Die Bilder auf dei­ner Website sind unnö­tig groß, oder jeden­falls nicht wirk­lich durch­op­ti­miert. Du kannst ver­schie­de­ne Bildformate oder die vor­ge­stell­ten Tools ver­wen­den, um mög­lichst nahe an eine opti­ma­le Performance zu kom­men. Letzten Endes wirst du aber immer mit einem Kompromiss leben müs­sen.

Cloudinary hin­ge­gen bie­tet eine umfang­rei­che Bildverwaltungslösung, die die Bilder nicht nur per URL aus­lie­fert, son­dern auf dem glei­chen Wege auch trans­for­miert. Dabei steht Cloudinary nicht nur für Kompression, son­dern auch für die Optimierung ansons­ten.

Mach dir selbst ein Bild und regis­trie­re einen kos­ten­frei­en Cloudinary-Account. Schau, wie ein­fach es ist, dei­ne Bilder mit die­sem URL-basier­ten Dienst zu opti­mie­ren.

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.

3 Kommentare

  1. Bilder und deren Größe sind wich­tig für opti­ma­le SEO und Pagespeed Werte bei Google. Klar kann jeder selbst sei­ne Bilder kom­pri­mie­ren, aber es soll wohl auch eini­ge geben, die sind nicht so firm in Bildbearbeitung. Und da fin­de ich die­sen Dienst pri­ma, zumal kos­ten­los in der free Version. Sponsored Post hin oder her… ist für den uner­fah­re­nen Webmaster eine sehr gute Sache. Und wenn ich mir die Bilder auf den Webseiten so anschaue… dann gibt es extrem viel Optimierungsbedarf!

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

    Lieber mal sel­ber über sei­ne Bildoptimierung nach­den­ken, als die Daten in die Obhut nicht­eu­ro­päi­scher Dienste zu geben.

    • Was sagt das denn genau? Wir sind von Cloudinary auch abseits der Tatsache, dass sie die­sen Post gespons­ort haben, über­zeugt. Deren Service ist mei­ner Meinung nach weg­wei­send. Was den ande­ren Hinweis betrifft. Klar, du kannst auch dar­über nach­den­ken, sel­ber Gurken anzu­bau­en, als dich auf hol­län­di­sche Großbauern zu ver­las­sen.

Schreibe einen Kommentar

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