Wie opti­mie­re ich Bil­der für mei­ne Webseite?

Erst Bil­der lassen eine Web­seite leben­dig wir­ken. Manch­mal trans­por­tie­ren sie Stim­mun­gen, manch­mal Infor­ma­tio­nen und teil­wei­se regen sie zum Schmun­zeln an. Es macht ein­fach mehr Spaß, auf einer Web­seite zu sur­fen, die Bil­der ent­hält. Aber: jedes wei­te­re Bild muss gela­den wer­den – und ver­lang­samt damit die Geschwin­dig­keit der Web­seite. Die gol­de­ne Regel für Bil­der im Web ist also: so groß wie nötig und so klein wie mög­lich. In die­sem Arti­kel geben wir Ihnen eini­ge Tipps, mit denen Ihre Web­seite trotz der Ein­bin­dung von Bil­dern nicht viel lang­sa­mer wird.

4.8/5 – (34 votes) 

Bild­be­ar­bei­tung mit kos­ten­lo­ser Software

Gimp

Gimp ist die Abkür­zung für GNU Image Mani­pu­la­ti­on Pro­gram. Gimp ist frei erhält­li­che Soft­ware und kann über die Web­seite http://www.gimp.org/downloads/ kos­ten­los her­un­ter­ge­la­den wer­den. Lade dir Gimp für dein Betriebs­sys­tem her­un­ter und fol­ge der Installationsanleitung.

Paint.NET

Paint.NET ist eben­falls ein kos­ten­lo­ses Bild­be­ar­bei­tungs­pro­gramm, her­aus­ge­ge­ben von der Washing­ton Sta­te Uni­ver­si­ty. Wir emp­feh­len den down­load über chip: https://www.chip.de/downloads/Paint.NET_13015268.html.

Bei­de Pro­gram­me kön­nen alles, was Sie zur Optimierung von Bil­dern für Ihre Web­seite brauchen. Das Lay­out und der Work­flow sind aber sehr unter­schied­lich. Wenn Sie bis­her noch nicht mit Bild­be­ar­bei­tungs­pro­gram­men gear­bei­tet haben, tes­ten Sie doch ein­fach mal, wel­ches Ihnen bes­ser gefällt. Wir wer­den im fol­gen­den Tuto­ri­al jedoch auf den Work­flow in Gimp eingehen.

Bil­der skalieren

Die Datei­grö­ße eines Bil­des kann ver­rin­gert wer­den, indem man das Bild auf die Grö­ße ska­liert, die für die Web­seite nötig ist.

Ein nor­mal gro­ßer Full-HD Bild­schirm, wie er bei den meis­ten Men­schen auf dem Schreib­tisch steht, hat eine Auf­lö­sung von 1920 x1080 Pixeln. Damit ist die maxi­mal sinn­vol­le Grö­ße für die Voll­bild-Dar­stel­lung auf einer Web­seite 1920x1080 Pixel. Oft ist der Bereich der Web­seite, in dem das gewünsch­te Bild ange­zeigt wer­den soll noch deut­lich kleiner.

Die Fotos, die Sie mit han­dels­üb­li­chen Kame­ras oder moder­nen Han­dys machen, haben Pixel­brei­ten von meh­re­ren tau­send Pixeln. Auch Stock­fo­tos, also Fotos aus Bild­da­ten­ban­ken, wer­den oft in sehr hoher Auf­lö­sung bereitgestellt.

Bild öff­nen

Nach der Instal­la­ti­on von Gimp kann über „Datei -> Öff­nen…“ oder mit dem Short­cut strg+o eine Bild­da­tei geöff­net werden.

 

Man sieht oben in der Mit­te, dass unser Bild aktu­ell eine Auf­lö­sung von 2720x1360 Pixeln hat. Der Bereich auf der Web­seite, in den wir das Bild ein­fü­gen möch­ten, hat nur eine Brei­te von 960 Pixeln. Wir möch­ten also von einer Brei­te von 2720 auf 960 Pixel her­un­ter skalieren.

Dazu öff­nen wir über „Bild -> Bild ska­lie­ren“ den Bild ska­lie­ren Dia­log. Wich­tig ist, dass das Ket­ten­sym­bol rechts neben der Bild­grö­ße geschlos­sen. So wird sicher­ge­stellt, dass das Sei­ten­ver­hält­nis von Brei­te zu Höhe bei der Ska­lie­rung bei­be­hal­ten wird. Wenn das Sym­bol geöff­net ist, wird nur eine Sei­te ska­liert und damit das Bild verzerrt.

Bild­auf­lö­sung einstellen

Bevor wir den Ska­lier­vor­gang star­ten set­zen wir die X‑Auflösung und die Y‑Auflösung auf jeweils 72 Pixel/inch (ppi). Das ist völ­lig aus­rei­chend für Bil­der im Web.  Die Ver­rin­ge­rung der Auf­lö­sung in ppi sorgt zusätz­lich dafür, dass die Datei­grö­ße des Bil­des sehr klein wird, sodass das Bild sehr schnell her­un­ter­ge­la­den wer­den kann.

So sehen unse­re Ein­stel­lun­gen für die Ska­lie­rung dann aus und mit einem Klick auf den But­ton „Ska­lie­ren“ wird das Bild auf die ein­ge­ge­be­ne Grö­ße skaliert.

Im Ergeb­nis kön­nen wir oben in der Mit­te wie­der sehen, dass die neue Auf­lö­sung des Bil­des nun 960x480 Pixel beträgt.

Export als .jpg Datei

Das Bild kann nun über „Datei -> Expor­tie­ren“ in ver­schie­de­nen Datei­for­ma­ten expor­tiert wer­den. Dabei emp­feh­len wir, das Bild als .jpg-Datei zu spei­chern. Unse­rer Erfah­rung nach ist eine Qua­li­täts­stu­fe von 90 völ­lig ausreichend.

 

In unse­rem Bei­spiel war das Bild vor der Optimierung 387 KB und nach der Optimierung nur noch 71 KB groß. Also wur­den knapp 81% der Datei­grö­ße für die­ses Bild eingespart.

Bild­ben­nen­ung

Zum Schluss noch ein klei­ner Tipp für den Datei­na­men ihrer Bil­der: Google scheint Bil­der, deren Datei­na­men nur aus Klein­buch­sta­ben (ohne Umlau­te!), Zah­len und dem Minus-Sym­bol (-) bestehen bes­ser zu ran­ken als andere.

 

Schreibe einen Kommentar