12 Tipps zur Bildoptimierung zur Beschleunigung Ihres E-Commerce (SEO + Leistung)

Möchten Sie wissen, warum und wie Sie Bilder für Ihre E-Commerce-Website optimieren können? Das ultimative Ziel der Bildoptimierung ist es, die kleinste Dateigröße zu erstellen, ohne die Bildqualität zu beeinträchtigen. Sie möchten qualitativ hochwertige Bilder zeigen, ohne die Leistung Ihrer Website zu beeinträchtigen.

Studien haben durchweg gezeigt, dass eine schnelle Seitengeschwindigkeit zu einer besseren Position bei Google und einer höheren Conversion-Rate führt. Daher möchten Sie, dass Ihre Bilder optimiert und für die Besucher nicht zu groß sind.

Bilder sind für einen Online-Shop unerlässlich; Die meisten Ihrer Verkäufe hängen von Produktbildern ab. Kunden möchten vor dem Kauf immer die Details der Produkte (z. B. Farben oder Materialien) überprüfen.

Hast Du gewusst? Laut Salsify müssen 73 % der Käufer mindestens drei Bilder sehen, um eine Kaufentscheidung zu treffen.

Wenn Sie sich nun unser Beispiel unten ansehen, welches Produkt würden Sie für Ihre nächste Sommerparty kaufen? Die Antwort ist A, richtig?

Bilder sind ein Muss, um die Conversions zu steigern, aber nicht optimierte Bilder führen dazu, dass Ihre E-Commerce-Website langsamer wird (und potenzielle Kunden von Ihrem Geschäft abtreibt). Um diese Leistungsprobleme zu vermeiden, teilen wir unsere besten Tipps zur Optimierung von Bildern, zur Steigerung der Geschwindigkeit Ihres Online-Shops und zur Verbesserung Ihres Rankings bei Google.

12 SEO- und Leistungstipps zur Optimierung Ihrer E-Commerce-Bilder

Hier sind 12 SEO- und Leistungstipps, die Sie anwenden können, um Ihre E-Commerce-Bilder zu optimieren, Ihren E-Commerce-Shop zu beschleunigen und einen besseren Rang bei Google zu erzielen:

1. Richtige Größe Ihrer Bilder
2. Bilder komprimieren
3. Wählen Sie das richtige Dateiformat
4. Verwenden Sie Browser-Caching
5. Laden Sie Bilder vorab, um sie schneller anzuzeigen und Ihr LCP zu verbessern
6. Verwenden Sie das Fetchpriority-Attribut
7. Schließen Sie Breiten- und Höhengrößenattribute ein, um plötzliche Layoutbewegungen (CLS) zu vermeiden
8. Verwenden Sie ein Image-CDN
9. Lazy Loading aktivieren
10. Responsive Bilder verwenden
11. Optimieren Sie Bilddateinamen und fügen Sie einen SEO-freundlichen Alt-Text hinzu
12. Erstellen Sie eine Bild-Sitemap

Lassen Sie uns in jede der Bildoptimierungstechniken eintauchen, die die SEO und Leistung Ihrer E-Commerce-Website steigern.

1. Richtige Größe Ihrer Bilder

Die beste Größe für E-Commerce-Bilder ist es, die Bilddateigröße unter 70-80 KB zu halten. Die tatsächliche Größe hängt davon ab, welches CMS oder welchen E-Händler Sie verwenden.

• WooCommerce-Bilder: 600 x 600 (Minimum)

• Amazon-Bilder: 1000 x 1000 px (mindestens)
• Shopify-Bilder: 800 x 800 px (Minimum, um die Zoom-Funktionalität zu nutzen)

2. Bilder komprimieren

Das Komprimieren von Bildern bedeutet, die Bildgröße zu reduzieren, ohne an Qualität zu verlieren. Es gibt zwei Arten der Komprimierung: verlustbehaftet und verlustfrei.

• Verlustfrei – eine kleine Verringerung der Dateigröße ohne Qualitätsänderung.
• Verlustbehaftet – eine deutlichere Verringerung der Dateigröße, die jedoch die Qualität beeinträchtigen kann. Es gibt mehrere Stufen der „verlustbehafteten“ Komprimierung: Einige sind für das menschliche Auge nicht einmal sichtbar, andere sind aggressiver und beeinträchtigen die Qualität.

3. Wählen Sie das richtige Dateiformat

Google PageSpeed ​​Insights empfiehlt die Verwendung eines Formats der nächsten Generation wie WebP, um Ihre Bilder zu optimieren. Indem Sie Ihre Bilder auf Ihrer E-Commerce-Website an WebP liefern, sparen Sie Bilddateigröße, wie in der folgenden Abbildung gezeigt:

4. Verwenden Sie Browser-Caching

Eine der effektivsten Optimierungsmethoden ist das Zwischenspeichern von Bildern. Mit einem WordPress-Plugin wie WP Rocket können Sie die Bilddateien im Browser-Cache eines Benutzers oder auf einem Proxy-Server speichern, um in Zukunft schneller und einfacher darauf zugreifen zu können.

5. Laden Sie Bilder vor, um sie schneller anzuzeigen und Ihr LCP zu verbessern

Durch das Vorladen des größten Bildes "above the fold" wird der Largest Contentful Paint (LCP), ein Core Web Vital, verbessert. Wie? Durch das Vorladen des LCP-Bildes kann Ihr Hero-Bild oder Website-Banner viel früher beim Laden der Seite angezeigt werden, was zu einer positiven Benutzererfahrung führt.

Wie der Name schon sagt, können Sie beim Vorladen das Laden eines Elements der Seite priorisieren. Auch hier kann WP Rocket Ihnen helfen, Bilder, Schriftarten und Links vorab zu laden:

Wenn Sie möchten, können Sie dieses Preload-Tag auch manuell auf Ihre Bilder anwenden:

 <link rel="preload" as="image" href="https://mysite.com/images/myimagename.webp" />

6. Verwenden Sie das Fetchpriority-Attribut

Ein weiterer Tipp, um Bilder zu optimieren und ein besseres LCP zu erhalten, besteht darin, dem Browser mit dem Attribut fetchpriority mitzuteilen, welches Bild er zuerst abrufen soll.

Ihr LCP-Bild sollte fetchpriority=“high“ haben, um das Herunterladen zu priorisieren, während die Fußzeilenbilder fetchpriority=“low“ haben würden, da sie nicht sofort benötigt werden. Google hat seine eigene Kampfsuchmaschine recherchiert und festgestellt, dass 99 % der Inhalte "above the fold" dank Prioritätshinweisen in weniger als 2 Sekunden angezeigt wurden:

7. Schließen Sie Breiten- und Höhengrößenattribute ein, um plötzliche Layoutbewegungen (CLS) zu vermeiden

Wenn PageSpeed ​​Insights erkennt, dass sich einige Inhalte plötzlich bewegen, wirkt sich dies auf die Benutzererfahrung und die Gesamtgeschwindigkeit einer Website aus. Cumulative Layout Shift (CLS) ist ein weiteres Core Web Vitals, das misst, ob plötzliche Layoutverschiebungen während der Ladezeit auftreten. Wenn Sie den Bildraum reservieren, indem Sie Ihren Bildern die Höhen- und Breitenattribute hinzufügen, erhalten Sie von Google Page Insights eine gute CLS-Note.

Bildbreite und -höhe sind nicht angegeben: Plötzliche Layoutverschiebung nach dem Laden des Bildes = Bad CLS	Breite und Höhe sind vorgegeben: Keine Layoutverschiebung = Guter CLS

8. Verwenden Sie ein Image-CDN

Bild-CDNs (Content Delivery Networks) gehören zu den besten auf dem Markt erhältlichen Tools zur Bildoptimierung. Laut web.dev kann dies sogar zu 40–80 % Einsparungen bei der Größe einer Bilddatei führen. ​​Alle von einem CDN geladenen Bilder werden über die Bild-URL bereitgestellt, die nicht nur angibt, welches Bild geladen werden soll, sondern auch Parameter wie Größe, Format und Qualität. Dies ist praktisch, um Variationen eines Bildes für verschiedene Szenarien zu erstellen:

Die Einrichtung eines CDN von Grund auf kann sich überwältigend anfühlen. Wenn Sie eine automatische Installation bevorzugen, können Sie RocketCDN ausprobieren.

9. Lazy Loading aktivieren

Lazy Loading ist eine weitere Strategie, um Bilder eines Online-Shops zu optimieren. Es zielt darauf ab, Ressourcen als nicht blockierend zu identifizieren und diese nur bei Bedarf zu laden. Kurz gesagt, es lädt Bilder nur, wenn Ihr Besucher zu diesem Inhalt gescrollt hat.

Wenn Sie das Lazy-Load-Skript nicht manuell anwenden möchten, können Sie ein Plugin wie WP Rocket verwenden, um Ihnen zu helfen.

10. Responsive Bilder verwenden

Die Optimierung Ihrer Bilder für Mobilgeräte ist eine weitere Möglichkeit, die Benutzererfahrung und die Ladegeschwindigkeit Ihres Shops zu verbessern. Responsive Bilder sind eine Reihe von Techniken, die verwendet werden, um das richtige Bild entsprechend dem vom Benutzer verwendeten Gerät zu laden: Desktop, Tablet oder Handy. Sie wird basierend auf der Geräteauflösung, Ausrichtung, Bildschirmgröße, Seitenlayout und der Netzwerkverbindung berechnet.

Die Attribute „srcset“ und „ sizes “ können Ihnen dabei helfen, Ihre Bilder reaktionsfähig zu machen und eine bessere Leistung und ein großartiges Benutzererlebnis zu erzielen. Es funktioniert so:

• srcset = beschreibt die tatsächliche Breite der Quelldateien
• size = teilt dem Browser mit, wie breit das Bild auf dem Bildschirm dargestellt werden soll.

Dev.to hat einen ausgezeichneten ausführlichen Artikel darüber geschrieben, wie Sie beide für Ihre responsiven Bilder verwenden können. Wir empfehlen Ihnen, die vollständige Anleitung zu lesen.

11. Optimieren Sie Bilddateinamen und fügen Sie einen SEO-freundlichen Alt-Text hinzu

Die Bildoptimierung hört nicht bei der Qualität der Datei selbst auf. Es wird auch auf den Namen erweitert, der der Datei und dem Alt-Text gegeben wurde. Wählen Sie immer einen relevanten und spezifischen Namen für Ihr Bild mit einem eindeutigen Alt-Text. Es hilft Ihren Bildern, bei Google zu ranken, indem es beschreibt, worum es auf dem Bild geht.

12. Erstellen Sie eine Bild-Sitemap

Das Hinzufügen von Bildern zu einer Sitemap hilft Google, Bilder zu entdecken, die sonst möglicherweise nicht gefunden werden (z. B. mit JavaScript geladene Bilder). Es gibt Ihrem Online-Shop einen kleinen SEO-Schub. Hier sind die erforderlichen Sitemap-Tags, die von Google benötigt werden, um Ihre Bilder zu finden:

Nachdem Sie nun unsere besten Optimierungstipps kennen, um Ihren Online-Shop zu beschleunigen, gibt es einige Tools, die Ihnen bei der Implementierung helfen können. Sie können beispielsweise das Imagify-Plugin verwenden, um die meisten Optimierungspunkte mit wenigen Klicks anzugehen. Lassen Sie uns jeden von ihnen durchgehen.

Optimieren von E-Commerce-Bildern mit Imagify

Das Imagify-Plug-in kann Ihnen dabei helfen, die meisten Optimierungstipps, die wir im vorherigen Abschnitt gegeben haben, in Angriff zu nehmen, um Ihren Online-Shop zu beschleunigen. Sobald Sie das kostenlose Plugin auf WordPress installiert haben, werden Sie mehrere Funktionen freischalten, die Ihnen helfen, Ihre Website zu beschleunigen und die Sichtbarkeit bei Google zu erhöhen. Lassen Sie uns in die besten Funktionen von Imagify eintauchen!

Dank Imagify können Sie Bilder auf folgende Weise optimieren:

• Komprimieren und optimieren Sie Ihre Bilder mit drei Komprimierungsstufen: normal, aggressiv und ultra. Die Qualität Ihres Bildes bleibt nahezu unverändert, aber Ihre Dateigröße wird viel kleiner.

• Mehrere Bilder gleichzeitig komprimieren und skalieren:

• Optimierung aus der WordPress-Bibliothek – Sie können die Optimierung auch für ausgewählte Bilder durchführen, genau wie in unserem Beispiel unten. Imagify hat 94 % meiner Dateigröße eingespart!

• Konvertieren Sie Ihre Bilder mit einem Klick in WebP:

• Größe Ihrer größten Bilder automatisch ändern:

Und last but not least optimiert Imagify Ihre Bilder, um Google-Empfehlungen zu PageSpeed ​​Insights wie „Bilder in Next-Gen-Formaten bereitstellen“ (dank der WebP-Konvertierungsfunktion), „Bilder effizient codieren“ und „Bilder in der richtigen Größe“ zu berücksichtigen.

PSI-Probleme ohne Imagify	Prüfung mit Imagify bestanden

Schließlich ist die Preisgestaltung von Imagify einfach: Sie erhalten jeden Monat 200 MB kostenlose Daten, und wenn Sie unbegrenzte Ressourcen benötigen, sind es nur 9,99 USD!

Einpacken

Bilder haben einen großen Einfluss auf die Wahrnehmung und den Verkauf Ihres Produkts. Wenn Sie sie mit einem Plugin wie Imagify optimieren, wird die Leistung Ihres Online-Shops gesteigert und Ihr Ranking bei der Suchmaschinenoptimierung (SEO) verbessert. Die Ergebnisse sind erhebliche Lasteinsparungen, eine verbesserte Benutzererfahrung und eine bessere Position bei Google. Probieren Sie Imagify kostenlos aus und teilen Sie uns mit, wie die Bildkomprimierung Ihres Online-Shops läuft!