Menü

Bilder optimieren Teil 1: Skalierung von Bildern

Die goldene Regel für Bilder im Web ist: so groß wie nötig und so klein wie möglich.

Wir möchten, dass der Besucher unserer Webseite ein schönes Bild sieht, sodass es ihm Spaß macht auf unserer Webseite unterwegs zu sein. Zudem möchten wir aber auch, dass unsere Webseite schnell geladen werden kann und der Besucher den Inhalt der Seite möglichst schnell angezeigt wird.

Gimp installieren

Gimp ist die Abkürzung für GNU Image Manipulation Program. Gimp ist frei erhältliche Software und kann über die Webseite http://www.gimp.org/downloads/ kostenlos heruntergeladen werden. Lade dir Gimp für dein Betriebssystem herunter und folge der Installationsanleitung.

Bilder skalieren

Die Dateigröße eines Bildes kann verringert werden indem man das Bild auf die Größe skaliert, die für die Webseite nötig ist. Kameras und sogar Handys erstellen heutzutage Bilder mit einer Pixelbreite von mehreren tausend Pixeln, was für das Web fast nie nötig ist. Allein schon aus dem Grund, dass die meisten Bildschirme der Webseitenbesucher höchstens 1920×1080 Pixel groß sind.

Nach der Installation von Gimp kann über „Datei -> Öffnen…“ oder mit dem Shortcut strg+o eine Bilddatei geöffnet werden.

2015-11-09 09_38_31-[Trapez](importiert)-4.0 (RGB-Farben, 1 Ebene) 2720x1360 – GIMP

Man sieht oben in der Mitte, dass unser Bild aktuell eine Auflösung von 2720×1360 Pixeln hat. Der Container auf der Webseite in den wir das Bild einfügen möchten hat nur eine Breite von 960 Pixeln. Wir möchten also von 2720 auf 960 Pixel herunter skalieren.

Dazu öffnen wir über „Bild -> Bild skalieren“ den Bild skalieren Dialog. Wichtig ist, dass das Kettensymbol rechts neben der Bildgröße geschlossen. So wird sichergestellt, dass das Seitenverhältnis von Breite zu Höhe bei der Skalierung beibehalten wird. Wenn das Symbol geöffnet ist, wird nur eine Seite skaliert und damit das Bild verzerrt.

2015-11-09 09_42_38-Neuen Beitrag erstellen ‹ sixhop.net Blog — WordPress

Bevor wir den Skaliervorgang starten setzen wir die X-Auflösung und die Y-Auflösung auf jeweils 72 Pixel. Das ist ausreichend für Bilder im Web und damit sorgen wir dafür, dass die Dateigröße des Bildes sehr klein wird, sodass das Bild sehr schnell heruntergeladen werden kann.

2015-11-09 09_46_01-Neuen Beitrag erstellen ‹ sixhop.net Blog — WordPress

So sehen unsere Einstellungen für die Skalierung dann aus und mit einem Klick auf den Button „Skalieren“ wird das Bild auf die eingegebene Größe skaliert.

2015-11-09 09_49_21-Neuen Beitrag erstellen ‹ sixhop.net Blog — WordPress

Im Ergebnis können wir oben in der Mitte wieder sehen, dass die neue Auflösung des Bildes nun 960×480 Pixel beträgt.

Das Bild kann nun über „Datei -> Exportieren“ als jpg Datei exportiert werden. Es wird ein Dialog gezeigt in dem man Auswählen kann in welcher Qualität das Bild gespeichert werden soll. Normalerweise ist eine Qualitätsstufe von 90 völlig ausreichend.

2015-11-09 10_00_37-Bild exportieren als JPEG

In meinem Fall war das Bild zu Anfang 387 KB groß und das Resultat ist jetzt nur noch 71 KB groß. Also wurden knapp 81% der Dateigröße für dieses Bild eingespart.

Viel Spaß beim ausprobieren und nachmachen. Ich freue mich, wenn Ihr auch mal auf meiner Webseite www.sixhop.net vorbei schaut. Vielleicht entdeckt ihr dort ja demnächst das Bild aus dem Beispiel.

Bilder optimieren Teil 1: Skalierung von Bildern
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

Letzte Artikel von Andreas Nitsche (Alle anzeigen)

    Schreibe einen Kommentar