Optimierung von Bildern und Grafiken

Der Anteil von Bildern an dem über­tra­ge­nen Daten­vol­u­men der Top-1000 Web­sites beträgt gemäß HTTP Archive vom 15.09.2015 durch­schnit­tlich 57 Prozent [Htt15]. Daraus lässt sich ableit­en, dass Bilder einen wesentlichen Anteil zur Reduzierung des Daten­vol­u­mens beitra­gen kön­nen und Maß­nah­men zur Opti­mierung in diesem Bere­ich einen hohen Ein­fluss auf die Ladezeit ver­sprechen.

In diesem Kapi­tel wer­den ver­lust­be­haftete und ver­lust­freie Meth­o­d­en zur Opti­mierung von Bildern vorgestellt. Bei der ver­lust­be­hafteten Bil­dop­ti­mierung erfol­gt eine Reduzierung der Qual­ität oder der Farb­palette ein­er Bild­datei, während bei den ver­lust­freien Meth­o­d­en über­flüs­sige oder dop­pelt vorhan­dene Bild­in­for­ma­tio­nen ent­fer­nt wer­den sowie die opti­male Kom­pres­sion für das jew­eilige Dateifor­mat gewählt wird [Leu15]. Anschließend wer­den neue HTML-Ele­mente zur Ein­bindung von Bildern vorgestellt, die eine Dif­feren­zierung zwis­chen ver­schiede­nen Endgeräten ermöglichen und die An-fra­gen an den Web­serv­er vermindern.Der Ein­fluss durch Bilder und Grafiken im Bezug auf die Per­for­manceop­ti­mierung von Fron­tend-Tem­plates wird geson­dert in dem Kapi­tel 3.6.6 betra­chtet. Dort wer­den CSS-Tech­niken zur Inte­gra­tion und Verbesserungspo­ten­tiale durch Vek­tor­grafiken ange­führt.

Dateiformate und Komprimierung

Zur Spe­icherung von Grafiken und Bildern ste­hen ver­schiedene Dateifor­mate und ver­lust­be­haftete Kom­prim­ierungsmeth­o­d­en zur Auswahl, die vor­wiegend von dem Grad der Kom­plex­ität der darzustel­len­den Inhalte abhängig sind.

Ein­fache Ani­ma­tio­nen und Grafiken mit einem gerin­gen Far­bum­fang lassen sich in dem Dateifor­mat GIF spe­ich­ern, das neben der Darstel­lung von Trans­parenz max­i­mal 256 Far­ben wiedergibt. Für Fotografien und foto­re­al­is­tis­che Bilder mit hohem Far­bum­fang eignet sich das Dateifor­mat JPEG, bei dem die Dateigröße abhängig von der gewählten Qual­ität bei der Kom­prim­ierung ist. Die Qual­ität kann von 0 bis 100 Prozent angegeben und so gewählt wer­den, dass keine optis­chen Ein­bußen durch Arte­fak­te in Erschei­n­ung treten. Mit dem Dateifor­mat PNG wurde ver­sucht, die Vorteile von GIF und JPEG zu vere­inen. Während sich die Kom­prim­ierung PNG8 auf­grund ein­er gerin­gen Farb­palette für Grafiken eignet, kann PNG24 zur Spe­icherung von Bildern mit Trans­paren­z­ef­fek­ten und vie­len Farbin­for­ma­tio­nen genutzt wer­den [CIW15]. Bei der Wahl des Dateifor­mates für Bilder und Grafiken sollte jew­eils geprüft wer­den, welch­es For­mat die ger­ing­ste Dateigröße bei der besten Qual­ität liefert. Zum Teil kann ein Wech­sel der Farbtiefe die Dateigröße reduzieren, ohne die Qual­ität sicht­bar zu ver­schlechtern [CIW15].

Um eine Skalierung von Bildern zu ver­mei­den, kön­nen diese vor der Ein­bindung in die Web­seite anhand der vom Lay­out vorge­se­henen Auflö­sun­gen erstellt und gespe­ichert wer­den. Wird ein hochau­flösendes Bild durch die Attribute height und weight mit­tels CSS oder HTML auf die passende Größe herun­ter­skaliert, muss das Bild unnötiger­weise in der vollen Dateigröße über­tra­gen wer­den [CIW15]. Die Angabe der Attribute height und weight sollte bei der Ein­bindung von Bildern erfol­gen und der tat­säch­lichen Auflö­sung des Bildes entsprechen. Nur so kann der Brows­er den erforder­lichen Platz bei dem Ren­der­ing der Web­seite reservieren und ein Ver­schieben ander­er Inhalte nach dem voll­ständi­gen Laden des Bildes wird ver­mieden [Koc12]. Bei dem Spe­ich­ern von Bildern in dem JPEG-For­mat kann die Option Pro­gres­sive aktiviert wer­den. Diese bewirkt, dass beim Laden des Bildes zu Beginn eine Ver­sion mit geringer Auflö­sung angezeigt wird und sich die Auflö­sung des Bildes mit steigen­dem Lade­fortschritt verbessert, bis die Bild­datei voll­ständig geladen wurde.

Entfernung der Metadaten

Bilder und Grafiken enthal­ten oft­mals Bild­in­for­ma­tio­nen in Form von Meta­dat­en, die bei der Darstel­lung ein­er Web­seite keine weit­ere Rel­e­vanz haben und die Dateigröße unnötig erhöhen. Diese Infor­ma­tio­nen lassen sich mit Hil­fe spezieller Pro­gramme wie Ima­geOp­tim am Mac oder Rad­i­cal Image Opti­miza­tion Tool (RIOT) unter Win­dows ver­lust­frei aus den Bild­dateien ent­fer­nen [Gri14]. Gle­ichzeit­ig wird über­prüft, ob die opti­male Kom­pres­sion für das jew­eilige Dateifor­mat beim Spe­ich­ern ver­wen­det wurde. Ist dies nicht der Fall, wird die Datei neu kom­prim­iert und anschließend mit der reduzierten Dateigröße gespe­ichert. Dazu kom­binieren die Pro­gramme unter anderem die Bild­kom­pres­soren TinyPNG, TinyJPG und JPEG­mi­ni, die auch einzeln als Web-Dien­ste zur Ver­fü­gung ste­hen.

Srcset-Attribut

Das Attrib­ut src­set kann mit den HTML-Ele­menten <img> und <pic­ture> genutzt wer­den und ermöglicht es, ver­schiedene Bilder für bes­timmte Bild­schir­mau­flö­sun­gen zu definieren. Ins­beson­dere beim Respon­sive Web­de­sign war die Aus­liefer­ung passender Bilder bish­er ein Prob­lem, diese wur­den entwed­er über JavaScript nachge­laden oder mit Hil­fe des Attrib­ut­es max-width: 100%; im Stylesheet skaliert. Was dazu führte, dass bei mobilen Endgeräten und Desk­top-Rech­n­ern die gle­ichen Bilder mit iden­tis­ch­er Auflö­sung und Dateigröße geladen wer­den.

<img src="small.jpg" srcset="small.jpg 480w, big.jpg 720w" />

Ältere Brows­er, die das src­set-Attrib­ut nicht inter­pretieren kön­nen, laden wie bish­er das im src-Attrib­ut angegebene Bild herunter. Während aktuelle Brows­er, anhand der Angaben im src­set-Attrib­ut, in der Lage sind eigen­ständig ein Bild auszuwählen, das am besten zu der Bild­schir­mau­flö­sung und Pix­eldichte des jew­eili­gen Endgerätes passt. Darüber hin­aus kann bei der Wahl des Bildes durch den Brows­er die Band­bre­ite der genutzten Net­zw­erkverbindung berück­sichtigt wer­den [Zil13].

Um die Bilder in ver­schiede­nen Auflö­sun­gen aus­liefern zu kön­nen ist es erforder­lich, diese in den entsprechen­den Größen zu erstellen. Inner­halb des src­set-Attrib­ut­es erfol­gt hin­ter dem Dateina­men die Def­i­n­i­tion der Bre­ite des Bildes in Pix­eln, wobei die Abkürzung w für width ste­ht. Das zuvor ange­führte Beispiel ges­tat­tet dem Brows­er die Wahl zwis­chen einem Bild mit ein­er Bre­ite von 480 Pix­eln, das sich beispiel­sweise für Smart­phones eignet, und einem Bild mit ein­er Bre­ite von 720 Pix­eln für Tablet-PCs.

<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" />

Ergänzend kann durch die Angabe von 1x oder 2x im src­set fest­gelegt wer­den, ob es sich um ein Bild in dop­pel­ter Auflö­sung für Reti­na-Dis­plays han­delt oder nicht [Zil13]. Reti­na-Dis­plays haben gegenüber nor­malen Mon­i­toren eine höhere Pix­eldichte und prof­i­tieren daher von höher aufgelösten Bildern [Dav13]. Diese soll­ten jedoch, auf­grund der höheren Dateigröße, nur an Endgeräte aus­geliefert wer­den, die diese unter­stützen.

Abbil­dung 3.4: Ergeb­nis des Abrufs der Grafiken über ein mobiles Endgeräte mit hoher Pix­eldichte

Anhand des Ver­suchs in Abbil­dung 3.4 wird gezeigt, dass bei der Emu­la­tion des Abrufs eines iPhone 4 in den Entwick­ler-Tools von Google Chrome die Grafik logo@2x.png geladen wurde. Gle­ichzeit­ig erfol­gte die Über­tra­gung der Bilder in dem Inhalts­bere­ich der Web­seite in der Größe small. Somit kon­nte das Daten­vol­u­men um 72,5 Prozent, von 138 Kilo­byte auf 38 Kilo­byte, gegenüber dem Abruf eines Desk­top-Rech­n­ers, ver­ringert wer­den.

Picture-Element

Eine weit­ere Möglichkeit zur Ein­bindung von Bildern beste­ht über das neu einge­führte <picture>-Element, das ähn­lich aufge­baut ist wie die bere­its in HTML5 vorhan­de­nen Con­tain­er-Ele­mente <audio> und <video>. Die kor­rek­te Darstel­lung der Bilder kann auf älteren Browsern durch die Inte­gra­tion des JavaScripts Pic­ture­fill [Dav13] und die ergänzende Angabe des <img>-Elements gewährleis­tet wer­den [Zil13].

<picture alt=“text“>
  <source src=“small.jpg“ />
  <source src=“big.jpg“ media=“min-width: 720px“ />
  <img src=“small.jpg“ alt=“text />
</picture>

Über die Angabe des media-Attrib­ut­es in dem <source>-Element lässt sich Ein­fluss auf die Gestal­tung und das Lay­out ein­er Web­seite, ana­log zu den Media Queries in den Stylesheets, nehmen. Das oben gezeigte Beispiel teilt dem Brows­er mit, dass das Bild big.jpg erst ab ein­er Dis­play­bre­ite von min­destens 720 Pix­eln geladen wer­den soll. Durch die Steuerung der Aus­liefer­ung von Bildern lassen sich die genan­nten Prob­leme beim Respon­sive Web­de­sign beheben. Bilder kön­nen so in ein­er passenden Auflö­sung und mit gerin­ger­er Dateigröße aus­geliefert wer­den [Zil13].

Das <picture>-Element hat gegenüber dem <img>-Element den Nachteil, dass zur Def­i­n­i­tion der einzel­nen Bilder mehr Quell­code benötigt wird und die Dateigröße des HTML-Doku­mentes ansteigt. In einem Ver­such hat Tom Bark­er nachgewiesen, dass durch die Kom­bi­na­tion von <img> und src­set der Quell­code für die Ein­bindung der Bilder um rund 60 Prozent reduziert wer­den kann, im Gegen­satz zu der Ver­wen­dung von <pic­ture> und <source>. Tom Bark­er gibt jedoch auch zu bedenken, dass das <picture>-Element umfassendere Möglichkeit­en gegenüber dem <img>-Element bietet und eine höhere Abhängigkeit zwis­chen der Anzahl einge­bun­den­er Bilder und dem daraus resul­tieren­den Einspar­po­ten­tial beste­ht [Bar14].