Web, Performance

So beschleunigen Sie Ihre Website durch Bearbeitung Ihrer Bilder - Teil 1

Alexander Wagner

Wussten Sie, dass eine langsame Website Auswirkungen auf Ihr Ranking bei Google hat? Eine der einfachsten Maßnahmen, um dies zu verbessern, ist die Bearbeitung der Bilder. Wie Sie diese entsprechend skalieren, zeigen wir Ihnen im ersten Teil unserer Serie.

Grundbegriffe

Google achtet sehr streng darauf, seinen Nutzern ein bestmögliches Erlebnis zu bieten. Und da eine schnelle Website maßgeblich dazu beitragen kann, reiht Google solche Seiten weiter oben in den Suchergebnissen. Insbesondere Smartphones verfügen unterwegs nicht immer über die optimale Datenverbindung, was die Ladegeschwindigkeit einer Website noch wichtiger macht.

Google selbst bietet ein Tool namens "PageSpeed Insights" an, mit dem die Performance einer Website gemessen werden kann. Dieser Service analysiert und misst verschiedene Aspekte des Auftritts. Dabei ist einer der häufigsten Mängel, über den Google sich gerne beklagt: Die Bilder der Website sind zu groß!

Achtung, der Begriff "groß" ist mehrdeutig in Bezug auf Bilder!

  • Einerseits bezeichnet er, wie breit und hoch ein Bild ist, also z.B. misst es 300 mal 400 Pixel. Um Verwechslungen zu vermeiden nennen wir dies die "Abmessungen" oder "Dimensionen" eines Bildes. Werden die Abmessungen verändert, sprechen wir von einer "Skalierung" des Bildes.
  • Andererseits wird mit Größe auch oft gemeint, wieviel Speicherplatz ein Bild benötigt. Wir sprechen in diesem Fall von der "Dateigröße".

Was wir also bei unseren Bildern tatsächlich reduzieren müssen, ist die Dateigröße. Also die Anzahl an Bytes, die übertragen werden müssen, damit unser Bild beim Besucher der Website ankommt. Um dies zu erreichen gibt es unterschiedliche Möglichkeiten:

  • Wegschneiden irrelevanter Bildteile
  • Verkleinern der Abmessungen ("Skalierung")
  • Technische Komprimierung (ohne Qualitätsverlust)
  • Verringerung der Qualität

Verschiedene Faktoren beeinflussen die Dateigröße eines Bildes

Zuschneiden der Bilder bzw. Verringerung der Abmessungen

Zuallererst sollten Sie von einem Bild die Teile wegschneiden, die nicht benötigt werden (z.B. mit einem Tool wie Paint.NET, Gimp oder Photoshop). Sollte aber das ganze Bild benötigt werden, oder dieser Schritt für eine große Anzahl Bilder zu aufwändig sein, so ist das kein Problem: Oft können hier ohnehin nicht allzu viele Bytes eingespart werden, da der Großteil des Bildes benötigt wird.

Als nächsten Schritt müssen Breite und Höhe des Bildes reduziert werden. Doch auf welche Abmessungen? Um dies herauszufinden, müssen Sie testen, welche Dimensionen das Bild auf Ihrer Website einnehmen kann. Der Browser eines Benutzers skaliert das Bild je nach dessen Position, dem Layout der Website und der Bildschirmgröße des Betrachters unterschiedlich. Doch egal welche Abmessungen das Bild auf der Website letztendlich hat: Der Besucher muss dennoch das gesamte Bild herunterladen!

Ein Bild kann in Wahrheit weit größere Abmessungen haben, als es im Layout der Website scheinbar hat

Damit der Benutzer keine Daten unnötig lädt, muss Ihr Ziel sein, das Ausgangsbild möglichst in denselben Abmessungen zur Verfügung zu stellen, in denen es auf der Website dargestellt werden soll. Doch da die meisten Websites heutzutage responsive sind, kann dieser Schritt durchaus knifflig ausfallen.

Die minimal benötigten Abmessungen herausfinden

Am besten Sie beginnen damit, das Bild in den aktuell noch zu großen Abmessungen auf der Website zu platzieren. Betrachten Sie diese nun in Ihrem Browser, und beobachten Sie Ihr Bild. Verbreitern (und verkleinern) Sie jetzt das Browserfenster solange, bis das Bild selbst nicht mehr breiter wird. Mit dieser Technik simulieren wir sozusagen unterschiedliche Bildschirmgrößen.

Durch Verkleinern und Vergrößern des Browserfensters lassen sich unterschiedliche Bildschirmgrößen simulieren

Achtung, hier gibt es zwei Hürden:

  • Je nach Layout kann es vorkommen, dass ein Bild unendlich weiter wächst mit dem Browserfenster. In diesem Fall muss bei einer angemessenen Breite gestoppt werden, z.B. wenn das Bild eine Breite von 1200 Pixeln hat.
  • Bei responsive Websites kommt es auch immer wieder vor, dass ein Bild auf kleineren Bildschirmen tatsächlich breiter ist als auf größeren Bildschirmen. Verkleinern Sie das Browserfenster also unbedingt auch, statt es nur zu vergrößern.

Hat das Bild die maximal gewünschte Größe angenommen, müssen wir herausfinden, welche genauen Abmessungen es nun hat. In Chrome geht dies am einfachsten mit der Erweiterung "Image Size Info", die Sie hier installieren können: https://chrome.google.com/webstore/detail/image-size-info/oihdhfbfoagfkpcncinlbhfdgpegcigf

Danach können Sie ganz einfach per Rechtsklick auf das Bild die Option "View Image Info" auswählen. In der Box die nun erscheint, merken Sie sich den ersten Wert der Zeile "Displayed": Das ist die Breite, in die das Bild durch den Browser skaliert wurde.

Die Erweiterung "Image Size Info" zeigt beides: Die originalen Abmessungen des Bildes, und diejenigen in die es durch den Browser skaliert wurde

Sollten Sie Firefox verwenden, können Sie auch ohne Erweiterung per Rechtsklick die Option "Grafik-Info anzeigen" wählen. Im folgenden Dialog notieren Sie die Breite, die bei "Skaliert zu" steht.

Die Bilder skalieren

Nun müssen Sie das Bild in die Breite skalieren, die Sie notiert haben. Nutzen Sie dafür Ihr bevorzugtes Tool zur Bildbearbeitung (z.B. Paint.NET, Gimp oder Photoshop). Haben Sie mehrere Bilder zu skalieren, bietet sich unter Windows z.B. dieses Tool an: http://www.bricelam.net/ImageResizer/

Nach dessen Installation können Sie im Dateiexplorer alle zu verkleinernden Bilder markieren, und nach Rechtsklick darauf die Option "Bilder neu skalieren" auswählen. Im Menü das nun erscheint wählen Sie die Option "Andere: Skalieren zu 300 Pixel" (wobei Sie die 300 durch Ihre notierte Breite ersetzen). Die angegebene Höhe ist hierbei nicht relevant.

Mit dem "Image Resizer" lässt sich eine große Anzahl Bilder auf einmal skalieren

Fortgeschrittene Techniken

Es gäbe noch weitere, anspruchsvollere Techniken, die dabei helfen, die Bilder einer Website automatisch in den passenden Abmessungen auszuliefern. Mittels dieser werden die Bilder gleich in mehreren unterschiedlichen Größen bereitgestellt, von denen der Browser dann nur die jeweils Passendste anzeigt. Hier gibt es verschiedene Ansätze:

  • Die HTML5 Attribute "srcset" und "sizes" weisen den Browser an, aus einer gegebenen Liste automatisch das Bild auszuwählen, das in seinen Abmessungen am besten in den vorhandenen Platz passt. Die Unterstützung für diese Attribute durch die Browser ist mittlerweile recht gut wie hier ersichtlich ist: https://caniuse.com/#feat=srcset
  • Bei der "adaptive images" genannten Technik muss Programmcode eingefügt werden, der dann die Auswahl des passenden Bildes automatisch vornimmt.
  • Diverse Drittanbieter bieten kostenpflichtige Cloud-Services an, die die Bilder automatisch skalieren und ausliefern.

Da man aber für all diese Techniken in den Quellcode der Website eingreifen muss und dies den Rahmen sprengen würde, werden wir in diesem Artikel nicht näher auf sie eingehen.

Fazit und Ausblick

Es ist für eine Website sehr wichtig, die enthaltenen Bilder nicht in zu großen Abmessungen auszuliefern. Dies spürt nicht nur der Besucher durch lange Ladezeiten, sondern auch der Betreiber durch schlechteres Ranking bei Google.

Die Bilder zuzuschneiden und korrekt zu skalieren ist eine der einfachsten Maßnahmen, um die Ladegeschwindigkeit zu reduzieren. Vor allem auf bildlastigen Websites kann dies einen starken Unterschied ausmachen.

Im nächsten Teil unserer Artikelserie widmen wir uns der Komprimierung der Bilder, mittels der die Dateigröße noch weiter reduziert werden kann. Außerdem geben wir noch weitere Tipps zur Aufbereitung von Bildern für Websites, und zeigen Fallstricke, die Ihre Bemühungen untergraben können.

foxcraft unterstützt Sie gerne bei diesen oder anderen Maßnahmen zur Beschleunigung Ihrer Website.

Unverbindliches Gespräch vereinbaren