WooCommerce optimieren Teil #3: Binde deine Bilder in der passenden Größe ein

Bilder richtig einbinden

Wenn du ein Bild in WordPress hochlädst, rechnet WordPress es in verschiedenen Größen vom Thumbnail bis zur vollen Größe um. So steht für jede Einsatzstelle die passende Größe zur Verfügung.

Ob diese unterschiedlichen Größen optimal genutzt werden, hängt von dir und deinem Theme ab.

Doch was heißt hier optimal?

Zum einen muss die Qualität des Bildes stimmen. Niemand möchte verpixelte Fotos sehen. Zum anderen sollte die Dateigröße möglichst klein sein. Insbesondere Smartphone Nutzer wissen es zu schätzen, wenn sie trotz lahmer Handynetze nicht ewig auf den Download warten müssen.

Das heißt: In der Regel sollten Desktop- und Smartphone-Nutzer unterschiedliche Bilder ausgespielt bekommen. Zum Beispiel sollten formatfüllende Bilder an einen Smartphone-Nutzer in reduzierter Auflösung ausgeliefert werden.

Wähle die passende Bildgröße

Wenn du ein Bild in eine Seite oder einen Beitrag einfügst, kannst du selber die Größe auswählen, die eingebunden werden soll. Binde dann nicht einfach das Originalbild in der Originalgröße ein, sondern überlege immer, in welcher maximalen Pixelbreite es dargestellt wird und wähle die entsprechende Bildgröße aus.

Ist dein Content-Bereich 900 Pixel breit und geht dein Bild nur über diese Breite, dann solltest du es auch nur mit einer Breite von 900 Pixeln einbinden und nicht in HD.

Responsive Bilder

Im Wordpress-Editor kannst du leider nicht verschiedene Größen für verschiedene Bildschirmauflösungen festlegen. Es sei denn, du nutzt einen Pagebuilder, bei dem du das entsprechende Inhaltselement zweimal einpflegst, und zwar in einer Version für mobil und einer Version für Desktop.

Alternativ brauchst du intelligente Inhaltsmodule, bei denen du einfach nur das Bild angibst und das Modul genierten ein Bildelement, in dem mit srcset und size Attributen festlegt ist, wann der Browser welche Größe laden soll.

Insbesondere bei den WooCommerce Produktdetailseiten oder Kategorieübersichten ist eine entsprechende Optimierung der Templates wichtig, weil dort sehr viele verschiedene Bilder dargestellt werden. Und wenn hier bei jedem Bild die große Version geladen wird, obwohl das Thumbnail reichen würde, dann muss der Nutzer ein Vielfaches der Datenmenge laden.

Es lohnt sich also, sich die Zeit zu nehmen, und die Templates zu optimieren. Das ist ein einmaliger Aufwand, der sich dauerhaft auszahlt.

Ob dein Template responsive Bilder nutzt, kannst du herausfinden, indem du mit der rechten Maustaste auf ein Bild klickst und dann auf untersuchen klickst. Im Codeexplorer deines Browsers siehst du dann den Quellcode für diese Bild. Wenn du dort das Attribut srcset findest, ist alles gut. Wenn nicht, solltest du entweder das Template in einem Child-Theme anpassen (lassen) oder dir ein besseres Theme suchen.

Wähle das passende Format

Für die meisten Bilder ist JPEG das richtige Format. JPEG bietet eine sehr gute Komprimierung und eignet sich besonders gut für Fotos mit vielen Farben und Details. Allerdings kann die Komprimierung zu einem Qualitätsverlust führen, der auf einfarbigen Flächen und an Kanten in Form von Artefakten sichtbar wird.

Für Logos und Icons ist meist ein PNG die bessere Wahl, weil ein PNG weniger Rauschen und Artefakte produziert, d.h. dein Logo erscheint klarer und sauberer. Verwende niemals PNP für ein Foto oder eine aufwendige Grafik, denn die Datei wird immer deutlich größer sein, als bei JPG.

Für Bilder mit Transparenz hast du nur die Wahl zwischen PNG, GIF und SVG.

Wenn Du Fotos mit Transparenz verwenden möchtest, dann ist GIF die richtige Wahl. Zwar stehen hier nur maximal 256 Farben zur Verfügung, je nach Bild fällt das aber nicht unbedingt auf. Allerdings führen beim GIF Transparenzverläufe oft zu Problemen. Da ist PNG robuster (allerdings auch deutlich größer).

Darüber hinaus können mit einem GIF kurze Animationen bzw. Bildfolgen abgespielt werden.

In den letzten Jahren erfreut sich SVG (Scalable Vector Graphics) immer größerer Beliebtheit. Dabei handelt es sich um ein Grafikformat für zweidimensionalen Vektorgrafiken und Animationen, das heißt die Grafiken können in beliebiger Größe verlustfrei dargestellt werden. Diese hohe Darstellungsqualität gepaart mit der relativ geringen Dateigröße machen SVG so interessant.

Ähnlich wie PNG eignet sich SVG eher für Logos, Icons, Diagramme und Illustrationen, aber nicht für Fotos.

Leider unterstützt WordPress SVG nicht von Hause aus. Wenn du SVG-Dateien nutzen möchtest, kannst du das Plugin SGV-Support installieren. Anschließend kannst du SVG-Dateien in der Medienbibliothek hochladen und im Editor wie jedes andere Bild einfach einbinden.

Für Produktbilder ist in der Regel JPG das beste Format. Auch wenn du deine Produktbilder nach dem Fotograferen freischneidest, solltest du sie nicht als transparentes PNG hochladen. Füge besser direkt einen weißen Hintergrund ein und speichere sie als JPG ab. Der Unterschied in der Dateigröße ist immens.

Fazit

Bei der Einpflege deiner Inhalte kannst du die Ladezeit deiner statischen Seiten, Blogbeiträge und Produktseiten deutlich beeinflussen, indem du das passende Bildformat verwendest und die optimale Auflösung wählst.

Ein sauber programmiertes Theme hilft dir durch die responsive Einbindung deiner Bilder in deinen WooCommerce Shop.

Im folgenden Teil der WooCommerce optimieren Serie zeige ich dir, wie du die Dateigröße deiner Bilder noch weiter verringern kannst.

Inhaltsverzeichnis

1. So findest Du ein schnelles Theme
2. Wähle Deine Plugins sorgfältig aus
3. Binde deine Bilder in der passenden Größe ein
4. Verringere die Dateigröße deiner Bilder
5. Nutze Caching, aber kenne die Grenzen
6. Wann ist ein CDN sinnvoll?
7. Hosting - Wie viel Leistung brauchst du?