Bild komprimiert SEO Bilder optimieren Tutorial 320x240 7020.03.2017 (jh): Seit Jahren ist die Ladezeit (Page Speed) einer Webseite ein Ranking-Faktor. Und mindestens genau so lange wird dieses Thema regelmäßig vernachlässigt. Dabei kann es so einfach sein! Bilder beeinflussen maßgeblich die Geschwindigkeit des Seitenaufbaus und hier liegt auch definitiv das größte Potential der Optimierung. Zwei einfache Arbeitsschritte sind notwendig, um schnelle Ergebnisse zu erzielen: 1. Bilder immer auf die tatsächlich benötigte Größe skalieren und 2. die Bilder vor dem Einbinden komprimieren. Wie das geht und welche Unterschiede es hier gibt, erklärt der folgende Artikel.

1. Bilder immer auf die tatsächliche Größe skalieren

Dieser Unterschied ist vielen Seitenadministratoren gar nicht klar: "Skalieren" ist nicht gleich "Skalieren". Jede Bilddatei hat bestimmte Abmaße, die sich leicht durch einen Rechtsklick > Eigenschaften > Details ermitteln lassen. Bindet man dieses Bild auf einer Seite ein, hat man per HTML nochmals die Möglichkeit, die Darstellung bezüglich Größe, Textabstand, Textfluss etc. anzupassen. Der häufigste Fehler ist hier, dass ein im Original viel zu großes Bild per HTML-Attribut verkleinert wird. Das folgende Beispiel verdeutlicht, was ich meine:

Bild unkomprimiert SEO Bilder optimieren Tutorial Bild unkomprimiert SEO Bilder optimieren Tutorial045 Bild unkomprimiert SEO Bilder optimieren Tutorial

Sieht auf den ersten Blick nicht verkehrt aus, aber was ist hier schiefgelaufen? Es handelt sich um ein und das selbe Bild, das in verschiedenen Größen eingebunden wurde. Dem ersten Bild wurden per HTML Abmaße von 320 x 240px zugewiesen (width="320" height="240"), dem letzten Bild Abmaße von 100 x 75px (width="100" height="75"). Die Datei, die hier drei Mal eingebunden wurde, hat jedoch eine Größe von 1,41MB und hat Abmaße von 3000 x 2250px. Du kannst Dir testweise eines der Bilder runterladen und es mit einem Bildprogramm öffnen. Feinste Details werden sichtbar, die für kleine schmückende Artikelbilder so gar nicht gebraucht werden. Das ist Ressourcenverschwendung pur.

Ich nehme also die drei Bilder aus dem obigen Beispiel und befolge den ersten Schritt, skaliere die drei Bilder exakt auf die Größe, die tatsächlich gebraucht wird:

045 Bild unkomprimiert SEO Bilder optimieren Tutorial 320x240

Bild unkomprimiert SEO Bilder optimieren Tutorial 250x188Bild unkomprimiert SEO Bilder optimieren Tutorial 100x75

Schon besser, obwohl man gar keinen Unterschied zu oben sieht, was ja auch das Ziel ist: Hier sind nun drei verschiedene Versionen des gleichen Bildes eingebunden. In einem Bildbearbeitungsprogramm wurde das Originalbild auf die tatsächliche Größe runterskaliert. Statt 1,41MB konnte die Bildgröße dadurch reduziert werden auf:

  • Bild 1: Abmaße 320 x 250px -> 82,28KB
  • Bild 2: Abmaße: 250 x 188px -> 54,48KB
  • Bild 3: Abmaße: 100 x 75px -> 10,37KB

Der richtige Weg ist also, die Bilder in einem Bildbearbeitungsprogramm auf jene Abmaße zu skalieren, die auch tatsächlich gebraucht werden. Und zwar exakt auf diese Abmaße. Skaliert man ein Bild per HTML runter, obwohl das Original eigentlich größer ist, ist das - wie in diesem Beispiel - Ressourcenverschwendung und beansprucht unnötig Ladezeit; skaliert man ein Bild per HTML rauf, obwohl das Original eigentlich kleiner ist, wird es pixelig und sieht nicht gerade professionell aus.

So sollte das sein. Aber geht da nicht noch mehr? Klar!

2. Die Bilder vor dem Einbinden komprimieren

Der nächste Schritt ist die Kompression. Mittlerweile bringen auch viele kostenlose Grafikprogramme Kompressionstools mit. So zum Beispiel GIMP. Man kann JPGs (und natürlich auch andere gängige Bildformate) beim Exportieren komprimieren, via Datei > Exportieren als... > [Bildname.jpg eingeben] Exportieren > Qualität [Kompressionsstufe eingeben] > Speichern. Ein Wert von 100 bedeutet keine Kompression, je niedriger der Wert ist, desto höher ist die Kompressionsrate. Ein Wert von 70 hat sich als ganz passabel herausgestellt. Hier empfiehlt sich, einfach mal rumprobieren und schauen, mit welcher Qualität man noch leben kann. Dies ist auch immer abhängig von der Art des Bildes und was man darstellen möchte. Die folgenden drei bereits skalierten Bilder habe ich nochmals mit GIMP mit einer Qualität von 70 exportiert. Hier ist das Ergebnis:

Bild komprimiert SEO Bilder optimieren Tutorial 320x240 70

 Bild komprimiert SEO Bilder optimieren Tutorial 250x188 70Bild komprimiert SEO Bilder optimieren Tutorial 100x75 70

Das ist das vorläufige Endergebnis bezüglich Komprimierung und Optimierung des ursprünglichen Ausgangsbildes mit einer Größe von 1,41MB:

  • Bild 1: Abmaße 320 x 250px, Kompressionsstufe 70 -> 10,35KB
  • Bild 2: Abmaße: 250 x 188px, Kompressionsstufe 70 -> 7,52KB
  • Bild 3: Abmaße: 100 x 75px, Kompressionsstufe 70 -> 2,15KB

Die Qualitätsunterschiede sind für den normalen Leser kaum bis gar nicht sichtbar. Die Unterschiede in der Ladezeit sind angesichts einer Reduktion der Dateigröße von über 99% enorm. Kleiner Schritt, große Wirkung :)

Praxisbeispiel: Kleine Vorschau - aber großes Bild

Oft sollen Bilder (z.B. in einer Bildgalerie) klickbar sein und sich vergrößern. Hier empfiehlt es sich, zwei Bilder einzufügen: ein kleines Vorschaubild, das nach den obigen Methoden in der Webansicht optimiert und komprimiert wurde und ein großes Bild, das sich bei Klick öffnet. Der Vorteil ist, dass das große Bild auch nur dann geladen wird, wenn es gebraucht wird - nämlich beim Klick auf das Bild. Das kann dann so aussehen:

Bild komprimiert SEO Bilder optimieren Tutorial 320x240 70

Fazit

Mit sehr wenig Aufwand und leichten Extra-Arbeitsschritten lassen sich locker über 90% an Ladezeit allein für Bilder rausholen. Die Besucher werden es einem danken und Google wird es einem sicherlich nicht übel nehmen, wenn man einen wichtigen der insgesamt über 200 Rankingfaktoren berücksichtigt.

Aktuelles im Blog

Haben Sie Fragen?

Rufen Sie mich an:

+49 176 56982110

Oder nutzen Sie das Kontaktformular

The Lead-Machine!

Lead- und Sale-Generierung.

Marketing Lead und Sale GenerierungSie bieten Produkte oder Dienstleistungen im End-Consumer-Bereich und brauchen Kunden? Henz Media hat Sie!

Angebot anfordern

Unverbindlich & kostenlos

Icon Angebot anfordern 70x70Vereinbaren Sie jetzt ein Beratungsgespräch und erhalten Sie ein völlig unverbindliches Angebot. Zum Formular

Ihre Webseite

Eindruck hinterlassen

Icon Webseite erstellen 70x70Der erste Einduck zählt. Dies gilt insbesondere für die Außendarstellung im Web. Henz Media erstellt günstige und professionelle Webseiten.

Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Weitere Informationen Ok