Bilder für WordPress optimieren in 2021 – WordPress Optimierung Teil 1

Node² > Blog > WordPress > WordPress Optimierung > Bilder für WordPress optimieren in 2021 – WordPress Optimierung Teil 1

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.

Google PageSpeed Insights Results
40/100 für mobil und 66/100 für die Desktop-Version sind zu niedrig. Das Ziel sind 90 Punkte oder mehr
Google PageSpeed Insights Image List
Die Dateien sind viel zu groß

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.

Chrome dev inspection tools

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.

Photoshop image canvas size
Höhe von 1024px

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.

Photoshop image canvas size
Bildgrößenoptimierung ist ein wichtiger Schritt bei der Reduktion von Dateien, die den Ladevorgang verlangsamen

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.

DateinameOriginalgrößeGröße nach Bearbeitung
Bannerneuheiten780KB57.6KB
Bannergeschenke506KB49.6KB
Bannerlieblinge457KB50.0KB
Total Size1.743MB0.157MB
Die Ergebnisse sprechen für sich. Das Resultat sind Dateigrößen mit weniger als 10% der Originalgröße

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.

Installing Autoptimize plugin
Autoptimize ist ein Must-have Plugin für WordPress-Seiten

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.

Autoptimize Image Tab
Bei Node² benutzen wir ShortPixel’s image CDN zur Bildbeschleunigung. Alle unsere Bilder befinden sich im Lazy Loading Modus

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.

Our loaded SVG images
Das Endergebnis ist eine sehr schnelle Ladezeit und Wiedergabe von SVG Dateien

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.

Sprite sheet example
Sprite Sheet Beispiele

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.

Positioning a sprite sheet sprite
Eigenschaften verändern um das Sprite Sheet korrekt zu positionieren

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.

A sample banner from Node2
Der full-screen Banner verschwendet eine Menge Potenzial unserer Seite

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.

Extracted the contents
Beim Ausschneiden des Hintergrunds reduzieren wir die Dateigröße des Banners
Pasted the extracted contents into the container
Gleiches Aussehen mit deutlich geringerer Dateigröße

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.

Schreibe einen Kommentar