Bild­op­ti­mie­rung für die best­mög­li­che Web Per­for­mance – so geht’s!

Sie haben sicher­lich schon ein­mal eine Web­site besucht, bei der Sie das Gefühl hat­ten, dass irgend­et­was mit den ange­zeig­ten Bil­dern nicht stimmt. Oder Sie haben die Sei­te sofort wie­der ver­las­sen, weil sie zu lan­ge zum Laden gebraucht hat.

Nichts schreckt Besu­cher mehr ab als falsch dimen­sio­nier­te Bil­der, schlech­te Qua­li­tät oder lan­ge Lade­zei­ten.

Wie wich­tig die Opti­mie­rung von Bil­dern und Gra­fi­ken in Hin­sicht auf eine flüs­sig flie­ßen­de Web­site ist, wer­den wir in die­sem Arti­kel erläu­tern.

Unter­schied­li­che Datei­for­ma­te

Um Dar­stel­lun­gen feh­ler­frei sowie schnell­la­dend in die Web­ge­stal­tung ein­zu­bin­den, bedarf es des rich­ti­gen For­mats. In der Netz­welt sind die gän­gigs­ten Endun­gen für Bil­der und Gra­fi­ken: JPG, PNG und GIF.

Bild­for­mat: JPG

Das meist­ge­nutz­te For­mat ist wohl das JPG (Joint Pho­to­gra­phic Experts Group), auch JPEG abge­kürzt. Auf unse­rem Smart­phone und in Digi­tal­ka­me­ras wer­den Fotos – sofern man die Ein­stel­lung nicht ändert – auto­ma­tisch in JPG gespei­chert. War­um? Weil die­ses For­mat eine nur sehr gerin­ge Grö­ße hat, was für das Laden des Bil­des ein gro­ßer Vor­teil ist und damit die User Expe­ri­ence (Nut­zungs­er­leb­nis) ver­bes­sert. Bei einem Bild von bei­spiels­wei­se 20 Mega­bytes Aus­gangs­grö­ße kann man nach dem Kom­pri­mie­ren in JPG nur noch eine Datei­grö­ße von etwa 2 Mega­byte erwar­ten. Aller­dings bringt jede Kom­pri­mie­rung auch Qua­li­täts­ver­lus­te mit sich. Der Grund dafür ist, dass Pixel der glei­chen Far­be und Grö­ße erkannt und dann zu ein­zel­nen Tiles/ Kacheln ver­wan­delt wer­den. Unge­ach­tet des­sen, wer­den über 16,7 Mil­lio­nen Far­ben bereit­stellt, was wie­der­um ein Vor­teil gegen­über ande­ren Datei­for­ma­ten ist.

Ver­wen­den Sie ins­be­son­de­re Foto­gra­fien in JPG, wenn Sie Wert auf schnell­la­den­de Sei­ten und gute Farb­prä­senz legen.

Bild­for­mat: PNG

Beim PNG (Por­ta­ble Net­work Gra­phics) han­delt es sich um ein For­mat, wel­ches meist für Gra­fi­ken oder Logos ver­wen­det wird. Durch die ver­wend­ba­re Trans­pa­renz mit 256 Stu­fen der Opa­zi­tät (Maß für die Licht­un­durch­läs­sig­keit), kön­nen Bil­der von ganz undurch­sich­tig bis ganz durch­sich­tig gestal­tet wer­den. Die­ser Umstand ist ein enor­mer Vor­teil bei der Hin­ter­grund­ge­stal­tung.

Beim Kom­pri­mie­ren und mehr­ma­li­gem Abspei­chern geht hier kei­ne Qua­li­tät ver­lo­ren. Dafür ist die Datei­grö­ße viel höher und ver­lang­samt das Laden eines grö­ße­ren Bil­des auf Ihrer Web­site.

Nut­zen Sie das For­mat PNG eher für Ihr Logo, Gra­fi­ken und Navi­ga­ti­ons­ele­men­te mit schar­fen Kan­ten.

Bild­for­mat: GIF

GIFs (Gra­phics Inter­ch­an­ge For­mat) erlau­ben eben­falls eine ver­lust­freie Kom­pres­si­on und spei­chert Bil­der in gerin­ge­ren Grö­ßen ab. Wir ver­bin­den GIFs mit kur­zen Ani­ma­tio­nen, die im Grun­de genom­men wie ein klas­si­sches Dau­men­ki­no funk­tio­nie­ren. Meh­re­re Bil­der wer­den über­ein­an­der­ge­legt — dies erweckt den Ein­druck als wäre es ein klei­ner Film mit End­los­schlei­fe.

Bil­der oder Ani­ma­tio­nen in GIF kön­nen Sie ganz ein­fach durch Online­tools selbst erstel­len.

Die ani­mier­ten Sequen­zen sind aller­dings nicht jeder­manns Sache. Zudem kön­nen sie zu epi­lep­ti­schen Anfäl­len füh­ren.

Ein gro­ßer Nach­teil von Ani­ma­tio­nen in GIF ist das klei­ne Farb­spek­trum von ledig­lich 256 Far­ben, was wie­der­um den Vor­teil der gerin­gen Datei­grö­ße nach sich zieht. Die Ein­bu­ße der weni­gen Far­ben lässt Bil­der und Ani­ma­tio­nen unna­tür­lich und qua­li­ta­tiv eher min­der­wer­tig aus­se­hen.

Bin­den Sie GIFs ein, wenn Sie ein­fa­che, wenig farb­rei­che Bil­der ani­mie­ren möch­ten, zum Bei­spiel für simp­le Gra­fi­ken und weni­ger für Foto­gra­fien.

Das wohl wich­tigs­te Kri­te­ri­um bei einem Web­­si­te-Besuch ist die Per­for­mance (Leis­tungs­fä­hig­keit). Nur wenn Ihre Web­site schnell genug lädt und Sie ihm dadurch die Usa­bi­li­ty bie­ten, blei­ben Besu­cher und kom­men wie­der.

Um die Lade­ge­schwin­dig­keit (Page Speed) zu opti­mie­ren bedarf es eini­ger Fak­to­ren. Ein zen­tra­ler Indi­ka­tor für die Über­prü­fung der Per­for­mance sind Ihre Bil­der, Gra­fi­ken und Ani­ma­tio­nen.

Wie im ers­ten Teil die­ses Arti­kels geschrie­ben, geht es haupt­säch­lich um Datei­grö­ßen und die damit ver­bun­de­nen Lade­zei­ten – abge­se­hen vom benö­tig­ten Spei­cher­platz.

Das Goog­le Ran­king kann sich durch den Page­rank ver­schlech­tern, wenn Ihre Web­site zu lan­ge Lade­zei­ten hat.

[the_ad id=“10868”]

Zusätz­li­che Kom­pri­mie­rung

Wenn Sie sich nun für das For­mat Ihrer Bil­der und Gra­fi­ken ent­schie­den haben, kön­nen Sie zusätz­li­che Lade­zei­ten ein­spa­ren. Wie? Indem Sie ein Bild, das bereits in JPG abge­spei­chert ist kom­pri­mie­ren und so sei­ne Datei­grö­ße ver­än­dern. Es geht also nicht um das blo­ße Abspei­chern in ein bestimm­tes For­mat oder Umwan­deln in ein ande­res, son­dern dar­um, bestehen­de Bil­der zu kom­pri­mie­ren und die Endung bei­zu­be­hal­ten.
Hier soll­ten Sie die gol­de­ne Mit­te fin­den zwi­schen Grö­ßen­mi­ni­mie­rung und den­noch guter Qua­li­tät. Expe­ri­men­tie­ren Sie, schau­en Sie sich Ihre Ergeb­nis­se an und ent­schei­den, wel­ches opti­mier­te Bild immer noch eine gute Dar­stel­lung bie­tet.
In einem Bild­be­ar­bei­tungs­pro­gramm wie zum Bei­spiel Ado­be Pho­to­shop haben Sie die Mög­lich­keit, Ihre Bil­der nicht nur zu ver­än­dern, son­dern direkt zu kom­pri­mie­ren.
Es steht Ihnen noch eine drit­te Mög­lich­keit für die Optimierung/ Redu­zie­rung der Gra­fi­ken und Bil­der zur Ver­fü­gung. Laden Sie Ihren bild­li­chen Con­tent im vor­an­ge­gan­ge­nen gewähl­ten For­mat und anschlie­ßen­der Opti­mie­rung auf Ihre Word­Press Sei­te hoch. Im Anschluss haben Sie die Mög­lich­keit, die­se noch ein­mal zu kom­pri­mie­ren. Dazu bie­tet Word­Press eine Viel­zahl von Plug-Ins, wie den Ima­gi­fy Image Opti­mi­zer, mit dem Sie schnel­le Lade­zei­ten und wenig Spei­cher­platz auf den Web­hos­ter erzie­len kön­nen.

Das in die­sem Bei­trag ver­wen­de­te Bei­trags­bild ist der Foto­da­ten­bank von Pexels.com ent­nom­men. Damit fällt das genutz­te Bild unter die Crea­ti­ve Com­mons Zero (CC0) Lizenz und kann somit frei genutzt wer­den. Die Quel­len der ande­ren in die­sem Bei­trag ver­wen­de­ten Bil­der sind ent­spre­chend als Bild­un­ter­schift am jewei­li­gen Bild auf­ge­führt oder sind eigens von mir erstell­te Screen­shots.