Bil­der opti­mie­ren Teil 1: Ska­lie­rung von Bil­dern

Die gol­de­ne Regel für Bil­der im Web ist: so groß wie nötig und so klein wie mög­lich.

Wir möch­ten, dass der Besucher unse­rer Web­seite ein schö­nes Bild sieht, sodass es ihm Spaß macht auf unse­rer Web­seite unter­wegs zu sein. Zudem möch­ten wir aber auch, dass unse­re Web­seite schnell gela­den wer­den kann und der Besucher den Inhalt der Sei­te mög­lichst schnell ange­zeigt wird.

Gimp instal­lie­ren

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 Instal­la­ti­ons­an­lei­tung.

Bil­der ska­lie­ren

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. Kame­ras und sogar Han­dys erstel­len heut­zu­ta­ge Bil­der mit einer Pixel­brei­te von meh­re­ren tau­send Pixeln, was für das Web fast nie nötig ist. Allein schon aus dem Grund, dass die meis­ten Bild­schir­me der Web­sei­ten­be­su­cher höchs­tens 1920x1080 Pixel groß sind.

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 wer­den.

Originalbild in Gimp

Man sieht oben in der Mit­te, dass unser Bild aktu­ell eine Auf­lö­sung von 2720x1360 Pixeln hat. Der Con­tai­ner 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 2720 auf 960 Pixel her­un­ter ska­lie­ren.

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 ver­zerrt.

Bild skalieren

Bevor wir den Ska­lier­vor­gang star­ten set­zen wir die X-Auf­lö­sung und die Y-Auf­lö­sung auf jeweils 72 Pixel. Das ist aus­rei­chend für Bil­der im Web und damit sor­gen wir 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.

Auflösung reduzieren

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 ska­liert.

Skaliertes Bild

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.

Das Bild kann nun über „Datei -> Expor­tie­ren“ als jpg Datei expor­tiert wer­den. Es wird ein Dia­log gezeigt in dem man Aus­wäh­len kann in wel­cher Qua­li­tät das Bild gespei­chert wer­den soll. Nor­ma­ler­wei­se ist eine Qua­li­täts­stu­fe von 90 völ­lig aus­rei­chend.

Bild exportieren als JPEG

In mei­nem Fall war das Bild zu Anfang 387 KB groß und das Resul­tat ist jetzt nur noch 71 KB groß. Also wur­den knapp 81% der Datei­grö­ße für die­ses Bild ein­ge­spart.

Viel Spaß beim aus­pro­bie­ren und nach­ma­chen. Ich freue mich, wenn Ihr auch mal auf mei­ner Web­seite www.sixhop.net vor­bei schaut. Viel­leicht ent­deckt ihr dort ja dem­nächst das Bild aus dem Bei­spiel.

Bil­der opti­mie­ren Teil 1: Ska­lie­rung von Bil­dern
5 (100%) 2 Bewertung[en]

Andreas Nitsche

Andreas Nitsche

Andreas Nitsche ist Gründer und Inhaber von sixhop.net, dem starken Partner für Hosting und Pflege von Webplattformen. Der leidenschaftliche Webservice-Spezialist und sein Team stehen für zuverlässigen Service in den Bereichen Webhosting, Webentwicklung, Weboptimierung sowie Datensicherheit.
Andreas Nitsche

Letz­te Arti­kel von Andreas Nitsche (Alle anzei­gen)

    Schreibe einen Kommentar