Bilder gestalten Ihre WordPress-Website und machen aus ihr ein ansprechendes Kommunikationsmittel. Ohne die richtige Optimierung verlangsamen sie allerdings Ihre Seite und verschlechtern den SEO-Score. Wir zeigen Ihnen, wie Sie Ihre Seite mit ein paar Tricks selbst optimieren.
Hauptziele einer Bildoptimierung sind (1) die Größe der ladenden Bilder zu verringern und falls möglich, (2) die Anzahl der zu ladenden Bilder zu verringern. Wir zeigen Ihnen den Weg dorthin.
1. Geschwindigkeit der Website testen
1.1 Google PageSpeed Insights Check
Vor der Optimierung der Bilder ist ein Test der Ladegeschwindigkeit notwendig. Dieser zeigt die Performance der Website unter den Maßstäben von Google PageSpeed Insights an.
1.2 Analyse des Ergebnisses von Google PageSpeed Insights
Die Rate der mobilen Version (40/100) und der Desktop-Variante (66/100) ist nicht optimal. Schuld daran sind nicht nur die Bilder, der folgende Test zeigt allerdings, dass sie eine große Rolle spielen. Wir werden diese Werte nach der Reihe von WordPress-Optimierungen noch einmal betrachten und die Ergebnisse bewerten.
2. Zuschneiden, skalieren und Next-Gen Formate für Ihre WordPress Bilder
Nicht überraschend, dass unsere Banner Images am größten und am wenigsten effizient sind. Die Bilder werden heruntergeladen, um mit ihnen arbeiten zu können. Hierfür benutzen wir Photoshop – jedes andere Bildbearbeitungsprogramm eignet sich aber ebenso.
2.1 Die richtige Bildgröße finden
Im Browser (in diesem Fall Google Chrome) wird die Funktion „Element untersuchen“ mit Rechtsklick geöffnet. Ein Klick ganz links auf „Element der Seite auswählen“ (1) ruft den Mauszeiger auf, mit dem wir auf das Banner klicken (2). In der ersten Zeile werden uns die tatsächlichen Maße des Bildes auf der Website angezeigt. Die Maße, hier 1903 x 693, sind bei unseren größten Bannern normalerweise 1920px – mit dieser Nummer lässt sich in der Regel gut arbeiten. Die Größe von 693px behalten wir bei.
Wenn wir den heruntergeladenen Banner im Bildbearbeitungsprogramm öffnen, sehen wir eine Höhe von 1024px. Das Bannerimage ist also viel zu groß und wird beim Anzeigen auf der Website auf die Größe von 693px skaliert. Das Ergebnis: Das Bild wirkt verzerrt oder gestaucht.
2.2 Größe anpassen und verringern
Nun heißt es, die Größe des Bildes an die idealen Maße anzupassen. Dabei ist es wichtig, die Proportionen korrekt zu halten und auf die soeben herausgefundene maximale Größe zu verringern. In unserem Fall 1920 x 693.
Das neu skalierte Bild wird im nächsten Schritt als Next-Gen Bildformat, beispielsweise .webp. gespeichert. Es wird bereits jetzt ein enormer Unterschied der Datengröße sichtbar.
| Dateiname | Originalgröße | Größe nach Bearbeitung |
| Bannerneuheiten | 780KB | 57.6KB |
| Bannergeschenke | 506KB | 49.6KB |
| Bannerlieblinge | 457KB | 50.0KB |
| Total Size | 1.743MB | 0.157MB |
3. Server-side Beschleunigung
Anschließend installieren wir das Autoptimize plugin für WordPress. Es beinhaltet viele hilfreiche Tools, um unsere Seite zusätzlich zu beschleunigen. Das Plugin selbst ist ein echtes Leichtgewicht und hat somit kaum negative Auswirkungen auf die Ladezeit der Seite.
Bei größerem Budget ist es ratsam, ShortPixel’s Image CDN zu installieren – mit diesem Service werden die Bilder extern untergebracht, was ihre Ladezeiten verringert.
Ein weiterer Tipp ist es, die Bilder in den Lazy Loading Modus zu setzen. Dadurch werden sie nur geladen, wenn sie wirklich benötigt werden, was den Gesamtaufwand mindert.
4. Verschiedenes
4.1 SVG in HTML
Sollten Sie SVG Images haben, lohnt es sich diese in den HTML Code zu integrieren. Dadurch werden sie nicht zusätzlich angefragt, sondern werden mit der ursprünglichen Webanfrage ihrer Seite übermittelt. Die zusätzlichen Anfragen zu reduzieren, ist ein wichtiger Faktor für die Verringerung der Ladezeit.
4.2 Sprite Sheets
Wenn Sie mehrere kleine Dateien (d.h. unter 40KB) haben, die nicht relevant für SEO sind (Der Alt-Tag wird nicht benötigt), können Sie diese gemeinsam in Sprite Sheets übertragen. Dadurch wird eine größere Datei erzeugt, die nur eine einfache Webanfrage an den Server benötigt.
Die Dateien lassen sich später trotzdem einzeln auf dem Sprite Sheet auswählen, indem die Größe des Container-Elements und „background-position“ manuell verändert wird.
4.3 Hintergrundfarbe
Oft werden Bilder von einer Hintergrundfarbe umgeben. Ein Beispiel hierfür ist das Node² Banner unserer Webdesign-Seite. Hierbei kann einiges an Dateigröße eingespart werden, indem die Hintergrundfarbe in WordPress angepasst wird.
Hierzu bekommt das Bild in einem Bildbearbeitungssystem einen transparenten Hintergrund. Nur das Motiv wird ausgeschnitten und gespeichert. Anschließend kann der Hintergrund manuell ausgewählt werden.
Das hochgeladene Bild kann nun in seiner Größe an die Seite angepasst werden und so denselben Effekt erzielen, den das vollständige Bild erzeugt hat – mit deutlich weniger Ladezeit.
Die Bilder sind nun optimiert – in Teil 2 widmen wir uns der Optimierung von CSS Dateien und Regeln.
