Wie Sie die Bilder in Ihrem eCommerce für eine blitzschnelle Webseite optimieren

Wussten Sie, dass einer der von den NutzerInnen meist geschätzten Aspekte eines Online-Shop die Ladegeschwindigkeit ist? Optimieren Sie dazu Ihre Bilder!

Es gibt nichts Nervigeres, als auf eine Webseite zu klicken und festzustellen, dass sie ewig zum Laden braucht. Tatsache ist, wenn mehr als eine Sekunde vergeht, wird der/die KundIn höchstwahrscheinlich zur Konkurrenz wechseln.

Wie können wir unsere Geschwindigkeit einfach verbessern?

Beginnen wir mit der Optimierung der Bilder unseres kompletten E-Commerce.

Fotos sind mit die „schwersten“ Dateien und für den Server am schwierigsten zu handhaben. Deshalb gilt: Je leichter die Bilder… desto besser für Geschwindigkeit, KundInnen und Umsatz. 😉

Seien Sie bereit, denn heute werden wir eine „virtuelle Schere“ an all Ihren Bildern ansetzen, damit Ihr E-Commerce blitzschnell lädt.

3, 2, 1… Los!

Warum es wichtig ist, die Bilder Ihres Online-Shops zu optimieren

In diesem Beitrag haben wir schon darüber gesprochen, wie wichtig es ist, hochwertige Produktfotos zu machen. Und vergessen Sie nicht, dass es oft diese Bilder sind, die eine Person zum Kauf bewegen oder nicht.

Hier gibt es allerdings ein Problem.

Das Hochladen vieler hochwertiger Fotos auf unsere Webseite bedeutet, dass unser Server überlastet ist und dadurch langsamer lädt. Deshalb ist es wichtig, dass wir alle Fotos optimieren, die wir in unseren Online-Shop hochladen.

Aber lassen Sie uns alle Vorteile einzeln betrachten:

• Ladegeschwindigkeit: Die Geschwindigkeit, mit der Ihr E-Commerce lädt, hat einen knallharten Einfluss auf das NutzerInnenerlebnis und damit auf den Umsatz. Amazon behauptet, dass für jede Zehntelsekunde, die es die Geschwindigkeit seiner Website verbessert, der Umsatz um 1% steigt.
• Web-Positionierung: Wenn Sie sich um die SEO Ihres E-Commerce kümmern (und das sollten Sie), sollten Sie die Bilder optimieren, da sie, wie wir vorher gesehen haben, die Ladegeschwindigkeit direkt beeinflussen (eines der Kriterien, die der Google-Algorithmus bewertet).
• Optimierung des Ressourcenverbrauchs: kleinere Bilder belegen weniger Speicherkapazitäten.
• Mehr Konversion: zufriedene BenutzerInnen kaufen mehr, klar, oder? (Erinnern Sie sich an die 1% von Amazon).

Wie Sie sehen, bringt es viele Vorteile, auf Ihre Bilder zu achten. Jetzt müssen wir uns nur noch anschauen, wie es geht.

Wie Sie ein Bild in Photoshop optimieren, bevor Sie es in Ihren Online-Shop hochladen

Der erste Schritt zur Bildoptimierung ist, es auf seine ideale Größe einzustellen. Keine Sorge, das ist ganz einfach.

1. Maße

Als erstes müssen wir die genauen Maße Ihrer Vorlage kennen. In WooCommerce, gehen Sie zu „Einstellungen > Produkte > Anzeigen“.

Dort finden Sie die Standardmaße für Bilder. Wenn das Produktbild 600×600 Pixel groß ist, belegt das Hochladen eines größeren Bildes nur unnötig Platz und verlangsamt die Webseite.

2. Was ist die „Idealgröße“?

Das Ziel ist, ein Gleichgewicht zwischen Bildqualität und -größe zu finden. Ideal sind weniger als 70 KB; aber wenn das nicht möglich ist, reicht es aus, wenn es nicht mehr als 100 KB sind.

3. Das richtige Format

Benutzten Sie für transparente Bilder oder Screenshots das PNG-Format, für alle anderen JPG.

4. Zuschneiden und Größe ändern in Photoshop

Um Ihnen den Ablauf möglichst einfach zu erklären, hinterlassen wir Ihnen ein Video, in dem erklärt wird, die man die grundlegenden Anpassungen in Photoshop vornimmt. Zum Beispiel die Änderung der Bildgröße (nicht der Leinwand) und die nützliche Funktion „für Webseite speichern“.

Als Alternative zu Photoshop, können Sie das Online-Tool Pixlr verwenden (es ist eine reduzierte Version von Photoshop). Eine weitere Option ist Gimp, eine freie Software zur Fotobearbeitung.

Und wenn Sie mit Mac arbeiten… ist ihr Werkzeug ImageOptim, eine Standardanwendung von MacOS, wenn Sie sich nicht mit einem Fotobearbeitungsprogramm herumschlagen wollen.

 5. Die Bildgröße direkt in WordPress ändern

Wenn Sie ein zu großes Bild hochgeladen haben, können Sie seine Größe in WordPress ändern.

In „Multimedia > Bibliothek“ klicken Sie auf das Bild und dann bearbeiten. Hier können Sie das Bild auf ein beliebiges Seitenverhältnis skalieren oder zuschneiden (wir empfehlen quadratisch).

Es geht einfach und schnell, hat allerdings einen Nachteil: WordPress erstellt ein neues Bild mit den von Ihnen gewählten Abmessungen. Das bedeutet, dass Sie jetzt das große Bild und die kleinere Kopie davon haben.

Wenn Sie das erste nicht löschen, wird sich die Geschwindigkeit nicht verbessern.

Wie Sie Bilder zusätzlich optimieren, ohne an Qualität einzubüßen

Es gibt viele Seiten, auf denen man die Größe eines Fotos ändern kann, ohne Qualität zu verlieren. Hier einige davon:

1. Webresizer

Es erlaubt Ihnen nicht nur, online die Bildgröße zu ändern, sondern auch einige grundlegende Farb-, Lichtanpassungen, usw. vorzunehmen.

Es rühmt sich damit, die Dateigröße bei gleichbleibenden Maßen um 68% zu reduzieren.

2. TinyPNG

Eines der bekanntesten kostenlosen Programme zur Bildkomprimierung. Es erlaubt, mehrere Bilder gleichzeitig zu optimieren, insgesamt 20 mit bis zu 5 MB pro Bild.

Zur Optimierung reduziert es die Anzahl der Farben, wobei die Änderung für das menschliche Auge nicht wahrnehmbar sind. Wenn Sie mit vielen Bildern gleichzeitig arbeiten müssen, ist dies das richtige Tool für Sie.

3. Compressor.io

Es erlaubt zwar keine Massenoptimierung, dafür aber bis zu 10 MB pro Foto. Eine weitere nützliche Funktion ist, dass Sie die optimierte Datei direkt auf Google Drive speichern können.

Diese Online-Tools sind sehr nützlich und schnell, aber wenn Sie ein kleines bisschen über Bildbearbeitung und Retusche wissen, ist das Resultat einer manuellen Bearbeitung vollständiger.

Plug-ins um Bilder in WordPress zu optimieren und die Ladegeschwindigkeit zu verbessern

Dies sind die Plug-ins, die uns für die Bildoptimierung im E-Commerce am besten gefallen und weitere zur Verbesserung der Ladegeschwindigkeit.

1. WPSmush

Ein 100% kostenloses Plug-in um alle Bilder Ihrer Webseite zu komprimieren und die Größe anzupassen.

Es ist leicht zu bedienen und ermöglicht die Bearbeitung aller WordPress-Bilder, sowie jedes Themes oder Plug-ins.

2. EWWW Image Optimizer

Ein weiteres kostenloses Plug-in. Es ermöglicht Ihnen, alle Bilder gleichzeitig zu optimieren und unterscheidet zwischen Optimierung nach Format: JPG oder PNG.

3. Lazy Load

Die faule Ladung oder lazy load besteht darin, dass Bilder erst geladen werden, wenn sie auf dem Bildschirm erscheinen.

Stellen Sie sich vor, Sie haben eine Webseite oder einen Beitrag mit einem sehr großen Foto am Ende. Mit diesem Plug-in wird es nur geladen, wenn die BenutzerInnen bis zum Ende gelangen (so lädt die Seite am Anfang schneller).

4. Imsanity

Der wesentliche Unterschied dieses Plug-ins zu den vorherigen ist, dass es auf Massenoptimierung spezialisiert ist.

5. Caching Plug-ins

Zwei der bekanntesten gratis Plug-ins sind:

• W3 Total Cache.
• WP Super Cache.

Kostenpflichtig, aber vielleicht das empfehlenswerteste ist WP Rocket.

Plug-ins zur Bildoptimierung in PrestaShop

Einer der Vorteile von PrestaShop ist, dass Sie den Cache-Speicher direkt aktivieren können. Unter „Erweiterte Einstellungen > Leistung“ haben Sie Zugriff auf die Smarty-Konfiguration zum Komprimieren, Kompilieren und Zwischenspeichern, ohne dass zusätzliche Module erforderlich sind.

Zudem gewinnen Sie mit diesen Plug-ins zusätzliche Geschwindigkeit:

1. Resmush

Erlaubt JPG-, PNG- und GIF-Dateien bis zu 5 MB und mit ein paar Klicks haben Sie alle Bilder Ihres Shops optimiert.

Wenn Ihnen dieses Tool gefällt, Sie aber mit WordPress arbeiten, gibt es auch ein Plug-in für dieses CMS.

2. PrestaSpeed

Wenn Sie in ein vollständigeres Tool investieren wollen, bekommen Sie für weniger als 50 € PrestaSpeed.

Neben der Bildoptimierung, beschleunigt es die Ladegeschwindigkeit, indem es Informationen in der Datenbank bereinigt, die nicht mehr nützlich sind. Zum Beispiel alte Bestellungen oder verlassene Warenkörbe.

Außerdem können Sie mit diesem Modul (nach der Optimierung) auf das vorherige Bild zugreifen oder einen unendlichen Bildlauf einbauen, um nur das Notwendige anzuzeigen.

Wie man Bilder in WordPress für SEO optimiert

Wenn wir von Bildoptimierung sprechen, können wir den Fokus auch auf SEO legen. Sie können nämlich die Fotos so verändern, dass sie Ihnen auch für die Web-Positionierung einen Vorteil verschaffen.

1. Benennen Sie Ihre Fotos, indem Sie sie beschreiben: eine Datei mit dem Namen IMG_1234 gibt Google keinen Hinweis auf den Inhalt des Bildes.
2. Verwenden Sie das Alt-Attribut: Es befindet sich in den Bildoptionen und erscheint als „alternativer Text“. Verwenden Sie nicht immer das gleiche Keyword, denken Sie daran, dass diese Texte Menschen helfen, die Bildschirmleseprogramme verwenden.

Mit nur diesen 2 Maßnahmen, erreichen Ihre Produktblätter (oder -kategorie) eine höhere Position in den Suchergebnissen.

Möchten Sie wissen, ob die Bilder Ihres E-Commerce ausreichend optimiert sind?

Um alle Zweifel auszuräumen, nutzen wir ein gratis Tool, dass von Google selbst angeboten wird, PageSpeed.

Sie müssen nur die URL eingeben und bekommen einen Hinweis zur Geschwindigkeit Ihrer Webseite.

Aber das ist noch nicht alles. Wenn Sie etwas genauer hinschauen, gibt es einen Abschnitt „Mögliche Optimierungen“. Fall Sie dort „Bilder optimieren“ angezeigt bekommen, haben Sie noch Arbeit vor sich. 😉

Ein weiteres sehr nützliches Tool ist der Speed Test von Pingdom.

Wenn Sie die Tipps in diesem Artikel angewendet haben, messen Sie die Ladegeschwindigkeit und vergleichen Sie sie mit der vor den Optimierungen.

Optimieren Sie jetzt die Bilder Ihres Online-Shops!

In diesem Artikel haben Sie alles, was Sie brauchen, um mit der Verkleinerung und Optimierung Ihrer Bilder zu beginnen, damit Ihr Online-Shop in kürzester Zeit lädt.

Also müssen Sie sich nur noch an die Arbeit machen.

Haben Sie keine Lust?

Die Erinnerung daran, dass Amazon für jede eingesparte Zehntelsekunde 1% mehr Umsatz macht, motiviert Sie sicherlich, damit anzufangen.

An die Bilder!