So optimieren Sie die Bilder Ihres Onlineshops in PrestaShop

Cómo optimizar las imágenes de tu ecommerce en Prestashop
Die Bilder spielen in Ihrem Onlineshop eine zentrale Rolle. Ohne sie gewinnen Sie kein Kundenvertrauen: Kunden möchten das Produkt so sehen, als stünden sie in einem Ladengeschäft, bevor sie sich endgültig zum Kauf entscheiden. Deshalb finden sich in einem E-Commerce-Shop sehr viele Bilder, die – wenn sie nicht in passender Auflösung und Qualität exportiert werden – die Ladezeit verlängern und Besucher dazu bringen können, Ihren Shop wieder zu verlassen. Bei Línea Gráfica zeigen wir Ihnen, wie Sie Ihre Bilder optimieren, damit das nicht passiert. Lesen Sie weiter!

Warum ist es wichtig, Bilder zu optimieren?

Eines ist bereits klar: Eine der wichtigsten Folgen, wenn Ihr Onlineshop nicht mit angemessener Geschwindigkeit lädt, weil Ihre Bilder zu groß oder zu hoch aufgelöst sind, ist, dass Ihre Besucher die Seite verlassen. Wie wir schon mehrfach betont haben: Ihre Nutzer sind nicht bereit zu warten, wenn sie wissen, dass andere Seiten ihnen dieselben Inhalte schneller bieten. Eine langsam ladende Website ist gleichbedeutend mit einer sehr hohen Absprungrate. Hinzu kommt, dass die 3G- und 4G-Netze eines Smartphones nicht annähernd an die Breitbandgeschwindigkeit eines Festnetzanschlusses heranreichen. Da immer mehr Nutzer über Mobilgeräte ins Internet gehen, sollten Sie die Ladezeit der Bilder in Ihrem Shop auf keinen Fall unterschätzen. Doch das ist noch nicht alles. Auch der Internetriese achtet beim SEO-Ranking sehr genau auf die Ladegeschwindigkeit einer Website. Wie Sie sich denken können, hat Google nur begrenzt Zeit, um Ihre Website zu crawlen. Je schneller Ihr Shop lädt, desto mehr Seiten Ihres Onlineshops kann Google also crawlen – und desto größer sind Ihre Chancen, in den Suchergebnissen ganz vorne zu landen. Aber fangen wir von vorne an …

Welche Qualität sollten die Bilder haben?

Wie bereits erwähnt, sind Bilder ein zentrales Element jedes Onlineshops. Deshalb möchten wir Ihnen auch zeigen, welche Parameter Sie berücksichtigen sollten, wenn Sie die Bilder Ihrer Website auswählen und optimieren.

Auflösung

Zunächst einmal: Ein Bild für die Veröffentlichung im Internet zu speichern ist etwas völlig anderes, als es für den Druck zu speichern. Es handelt sich um zwei Arten, ein Bild auf sehr unterschiedlichen Medien darzustellen: auf dem Bildschirm und auf Papier. Am wichtigsten ist daher, in einem Bildbearbeitungsprogramm (etwa Photoshop, Illustrator oder GIMP) zu prüfen, dass die Auflösung 72 ppi (Pixel pro Zoll) beträgt. Je höher dieser Wert, desto höher die Qualität. Für die Darstellung auf einer Website reichen 72 ppi völlig aus, während man für den Druck – zum Beispiel eines Plakats – rund 300 ppi bräuchte.

Format

Beim Speichern eines Bildes werden Ihnen sicher mehrere Formate angeboten, und vielleicht haben Sie sich schon gefragt: Was ist größer, PNG oder JPG? Es lohnt sich daher zu wissen, wofür die einzelnen Formate gedacht sind, denn das hilft Ihnen beim Optimieren der Bilder. Zu jedem Format ließe sich viel sagen, aber keine Sorge: Wir geben Ihnen die wichtigsten Infos an die Hand, damit Sie wissen, wann Sie welches verwenden:
  • JPG: Das Standardformat für Fotos, da es sie am besten komprimiert, ohne Farbtöne und Originalfarben zu verlieren. Ideal also für detailreiche Bilder. Außerdem können Sie die Qualität zwischen 0 und 100 einstellen. Speichern Sie zum Beispiel mit Qualität 80, sehen Sie bei der Schärfe kaum einen Unterschied, bei der Dateigröße dagegen schon: Das Bild ist rund 30 % kleiner.
  • PNG: Erhält Transparenzen und ist damit das beste Format für Markenbilder wie Logos oder Grafiken mit flächigen Farben. Sein großer Vorteil: Bei der Komprimierung geht kaum Qualität verloren. Aber gibt es einen Unterschied zwischen PNG-8 und PNG-24? Ja: PNG-8 speichert maximal 256 Farben, PNG-24 dagegen bis zu 16 Millionen. Wir empfehlen, PNG-8 nur für Bilder zu verwenden, die keine Transparenzen benötigen und nur wenige Farben haben.
  • GIF: Greifen Sie nur dann zu diesem Format, wenn Ihre Bilder eine Animation enthalten. Bedenken Sie, dass die Komprimierung keine gute Qualität liefert, da Animationen aus mehreren Einzelbildern bestehen, also mehr als ein Bild speichern.
  • WEBP: Dieses Format, das Google vor einigen Jahren entwickelt hat, liefert hochwertige Bilder bei geringerer Dateigröße als andere Formate wie PNG oder JPG. Da es die Bildgröße stark optimiert, ohne die Qualität zu opfern, eignet es sich hervorragend für Websites.

Abmessungen

Oft speichert man ein Bild in der Standardgröße oder sogar besonders groß, weil man glaubt, dass es so auf der eigenen Website besser aussieht. Sie haben aber sicher schon bemerkt, dass Qualität und Schärfe Ihrer Bilder vor allem von der Auflösung und dem Format abhängen, in dem Sie sie exportieren. Verzichten Sie also darauf, Bilder in großem Format zu speichern: Die Dateien werden dadurch deutlich größer – und das völlig unnötig, wenn das Bild auf Ihrer Seite ohnehin viel kleiner angezeigt wird. Wir empfehlen Ihnen daher, alle Bilder in der tatsächlichen Größe zu exportieren, in der sie auf Ihrer Website erscheinen, also mit den Abmessungen, die Sie in Ihrem PrestaShop verwenden. Nimmt ein Bild beispielsweise 50 px x 70px ein, passen Sie es genau auf diese Größe an. So verringern Sie die Dateigröße Ihrer Fotos erheblich, ohne dass sie an Qualität verlieren oder verpixelt wirken. Wozu ein größeres Bild, wenn Ihre Nutzer es ohnehin kleiner sehen?

Welche Größe für Produktfotos?

Unter Design > Bildeinstellungen können Sie in Ihrem PrestaShop nach Produkten filtern und die Größen aller Produktbilder Ihres Shops einsehen. Produktbilder in PrestaShop anpassen Ist das größte Produktbildformat in Ihrem Shop beispielsweise 1000 px X 1000 px, sollten Sie die Bilder dieses Typs in genau dieser Größe verwenden. Nutzen Sie in diesem Fall ein kleineres Bild, wird es verpixelt dargestellt. Sie müssen also jedes Bild an das jeweils festgelegte Format bzw. die festgelegte Größe anpassen. Was die Dateigröße dieser Bilder betrifft, empfehlen wir maximal 100 KB pro Bild; sonst verlängert sich die Ladezeit Ihres Onlineshops.

Tools zur Bildoptimierung

Wir zeigen Ihnen einige Best Practices und Tools, mit denen Ihr Onlineshop deutlich schneller lädt. Ist Ihr Shop bereits live, prüfen Sie zuerst die Ladegeschwindigkeit. Dafür empfehlen wir eine Analyse mit PageSpeed. Das ist ganz einfach: URL eingeben, auf „Analysieren“ klicken – und schon sehen Sie die Ergebnisse, aufgeteilt in Diagnose und Empfehlungen. Wenn Sie rechts auf die Pfeile klicken, sehen Sie außerdem, wie sich diese Fehler beheben lassen. Tools zur Bildoptimierung für PrestaShop Webbilder mit PageSpeed optimieren Jetzt müssen Sie nur noch die Dateigröße dieser Bilder verringern und sie ersetzen. Speichern Sie sie also auf Ihrem Computer. Sobald Sie alle gespeichert haben, verwenden Sie ein Tool zur Bildkomprimierung. Wir stellen Ihnen Compresspng und Compressjpg vor, Sie können aber jedes andere Tool nutzen – die Funktionsweise ist sehr ähnlich und ziemlich intuitiv. Laden Sie Ihre Bilder je nach Format zunächst bei Compresspng oder Compressjpg hoch, indem Sie auf Upload Files klicken. Je nach Anzahl der Bilder dauert die Komprimierung etwas länger oder kürzer. Anschließend laden Sie sie über Download ZIP herunter. Fertig sind Ihre komprimierten Bilder! Jetzt müssen Sie sie nur noch erneut auf Ihre Website hochladen. Bilder für PrestaShop komprimieren Und wenn Sie neue Bilder auf Ihre Website hochladen möchten, exportieren Sie sie einfach im passenden Format und mit einer Auflösung von 72 ppi aus einem Bildbearbeitungsprogramm. In Photoshop und GIMP speichern Sie sie über Für Web speichern. Daraufhin öffnet sich ein Fenster, in dem Sie das Format wählen können – entscheiden Sie sich anhand der obigen Erklärungen für das passende. Die Auflösung können Sie außerdem unter Bild > Bildgröße prüfen und ändern. Webbilder für PrestaShop optimieren Zusammengefasst: Tipps zur Bildoptimierung für das Web

PrestaShop-Modul zur Bildoptimierung

Wie zu Beginn des Beitrags erwähnt, profitiert von einer schnelleren Ladezeit nicht nur der Nutzer, der entspannt durch unseren PrestaShop-Shop stöbert. Google, stets auf der Suche nach hochwertigen Websites, bewertet die Ladezeit eines Onlineshops so positiv, dass ein Shop mit akzeptabler Ladegeschwindigkeit in den vorderen Positionen erscheint. Was bedeutet das? Wenn Sie einen großartigen Onlineshop haben, Ihre Konkurrenz aber auch – und deren Shop schneller lädt –, platziert Google ihn in den Suchergebnissen vor Ihrem. Sie wissen ja: Komfort, Transparenz und Sicherheit bilden die Grundlage jedes Onlineshops. Natürlich wissen Sie das – und wir verstehen auch, welche Herausforderungen das mit sich bringt. Deshalb, und um Ihnen alle Möglichkeiten zur Verbesserung der Ladegeschwindigkeit vorzustellen, empfehlen wir Ihnen die bequemste und effektivste. Das PrestaShop-Modul zur Bildoptimierung von Línea Gráfica ist genau die Unterstützung, die Sie brauchen, um Ihren PrestaShop-Shop in ein echtes Leichtgewicht zu verwandeln. Das Modul reduziert die Dateigröße der Bilder auf Ihrer Website ohne Qualitätsverlust – mit einem intuitiven, sehr einfach zu bedienenden System:
  • Wählen Sie den gewünschten Komprimierungsgrad für JPG und JPEG in Prozent.
  • Legen Sie den Komprimierungswert für PNG-Dateien fest.
  • Wählen Sie die Bilder Ihres Shops aus, die nicht komprimiert werden sollen – zum Beispiel ein Logo.

Zum Bildkomprimierungs-Modul!

Wenn Sie einen schnellen Schub suchen, um Geschwindigkeit und Ranking Ihrer Website zu verbessern, sind Sie hier genau richtig. Ergebnisse in Rekordzeit prüfen und ein besseres Einkaufserlebnis bieten – so einfach war das noch nie! Und falls Sie nach all dem noch nicht wissen, wie Sie die Ladegeschwindigkeit in PrestaShop verbessern, keine Sorge: Wir haben den ultimativen Schritt-für-Schritt-Leitfaden für Sie vorbereitet!

Und Sie? Nutzen Sie weitere Tools, um Ihre Bilder zu optimieren? Bei Línea Gráfica sind wir Experten für digitales Marketing und PrestaShop Platinum Partner. Wenn Sie also Unterstützung beim Google-Ranking Ihres Shops brauchen, nehmen Sie einfach Kontakt mit uns auf.

Álvaro Criado
Aktualisiert am