Shopify Bildgrößen: Wichtiges Limit

Verwenden Sie 2048 x 2048 Pixel als Shopify-Master und halten Sie jede gelieferte Datei unter 500 KB. Shopify erlaubt Bilder bis zu 20 MB und 4472 Pixel quadratisch, aber diese Zahlen beschreiben, was die Plattform toleriert, und nicht, was ein schneller Shop benötigt.

Die 20-MB-Angabe ist die Zahl, die die meisten Anleitungen zitieren, und es ist die falsche, um sich daran zu orientieren. Was Shopify erlaubt und was Shopify belohnt, sind unterschiedliche Dinge. Eine Produktseite mit 8 Bildern zu je 3 MB ist eine 24-MB-Seite, und mobile Käufer verlassen sie, bevor sie fertig geladen ist.

Shopify Bildgrößen nach Platzierung

Produktbilder sollten quadratisch mit 2048 Pixeln sein, während Banner, Kollektionskacheln und Logos jeweils eigene Abmessungen benötigen. Die Verwendung einer Größe überall führt zu gestreckten Bannern und beschnittenen Kollektionsbildern.

Themes schneiden Bilder unterschiedlich zu, und ein Banner, das in einer Desktop-Vorschau korrekt aussieht, wird auf einem Telefon häufig in der Mitte abgeschnitten. Halten Sie den wichtigen Teil eines Banners in den zentralen 60 Prozent, damit kein Theme ihn wegschneiden kann.

Warum 500 KB die entscheidende Zahl ist

Das Seitengewicht entscheidet, wie schnell ein Shop lädt, und Bilder machen den größten Teil dieses Gewichts auf einer typischen Produktseite aus. Eine Seite unter 2 MB lädt bequem über mobile Daten, während eine 24-MB-Seite dies nicht tut.

Käufer auf Mobiltelefonen machen den Großteil des Traffics für die meisten Shops aus, und mobile Verbindungen variieren weitaus stärker als Bürobroadband. Jede Sekunde Ladezeit kostet Konversionen, was das Bildgewicht eher zu einer Umsatzfrage als zu einer technischen macht. Die Reduzierung von 8 Produktbildern von 3 MB auf 300 KB entfernt 21 MB von der Seite und ändert nichts, was ein Käufer sehen kann.

Komprimiert Shopify Bilder für Sie?

Shopify liefert angepasste Varianten über sein Content Delivery Network (CDN) und konvertiert automatisch in WebP für unterstützende Browser. Die Plattform leistet eine gute Arbeit und verarbeitet alles, was Sie hochladen.

Dieser letzte Punkt ist die Einschränkung. Shopify generiert kleinere Varianten aus Ihrem Original, sodass ein schlecht komprimierter 5-MB-Upload größere Varianten erzeugt als ein gut vorbereiteter 400-KB-Upload. Das Komprimieren vor dem Hochladen reduziert auch Ihren eigenen Speicherverbrauch und beschleunigt Massenimporte erheblich, da ein Import von 500 Produkten 200 MB statt 2,5 GB bewegt.

So bereiten Sie Bilder für Shopify vor

Um eine schnelle Produktseite zu erstellen, befolgen Sie diese 6 Schritte.

1. Exportieren Sie einen quadratischen Master mit 2048 x 2048 Pixeln aus Ihrem Bildbearbeitungsprogramm.
2. Passen Sie die Größe von Bannern oder Lifestyle-Bildern an ihre tatsächliche Anzeigebreite an, verdoppelt für hochauflösende Bildschirme.
3. Konvertieren Sie Fotos in WebP, oder behalten Sie JPG bei, wenn Ihr Workflow davon abhängt, da Shopify ohnehin konvertiert.
4. Komprimieren Sie auf eine Zielgröße, verwenden Sie 300 KB für Produktfotos und 400 KB für Banner.
5. Benennen Sie Dateien nach Produktcode und Ansicht, damit ein CSV-Massenimport Bilder den richtigen Produkten zuordnet.
6. Laden Sie hoch und überprüfen Sie die Produktseite auf einem Telefon anstatt nur in einer Desktop-Vorschau.

WebP auf Shopify

Shopify liefert WebP seit Jahren nativ aus und konvertiert hochgeladene JPG- und PNG-Dateien automatisch für Browser, die es unterstützen. Das direkte Hochladen von WebP wird akzeptiert und gibt Ihnen die Kontrolle über die Komprimierung, anstatt sie der Plattform zu überlassen.

WebP erreicht die gleiche visuelle Qualität wie JPG bei 25 bis 35 Prozent kleineren Dateigrößen, was auf einer Seite mit 8 Fotos von Vorteil ist. Der einzige Fall, der vermieden werden sollte, ist das Hochladen von WebP, wenn die Datei später von einem Lieferanten heruntergeladen oder an eine Druckerei gesendet wird, da diese Ziele immer noch JPG erwarten.

Eine langsame Produktseite beheben

Beginnen Sie mit dem größten Bild auf der Seite, da die größte einzelne Datei normalerweise den größten Teil der Verzögerung verursacht. In einem Shopify-Shop ist das normalerweise das Homepage-Banner oder das erste Produktfoto.

• Größe vor dem Komprimieren ändern. Ein 4000-Pixel-Banner in einem 1920-Pixel-Slot verschwendet 75 Prozent seiner Daten.
• Reduzieren Sie die Anzahl der Bilder oberhalb des Falzes. Eine Galerie mit 12 Bildern, die gleichzeitig geladen wird, verzögert alles andere.
• Überprüfen Sie, ob Lazy Loading aktiviert ist für Bilder unterhalb des Falzes, was die meisten modernen Themes standardmäßig handhaben.
• Ersetzen Sie animierte GIF-Dateien durch Videos, da ein kurzes GIF häufig mehr wiegt als der gesamte Rest der Seite.
• Überprüfen Sie die Apps. Bewertungs-Widgets, Popups und Vertrauensabzeichen laden oft ihre eigenen Bilder und Skripte.

Alt-Text und Bilddateinamen

Schreiben Sie Alt-Text, der das Produkt für Käufer mit Screenreadern beschreibt, und benennen Sie Dateien nach dem Produkt statt nach der Kamera. Eine Datei namens IMG_4821.jpg sagt Suchmaschinen und Käufern nichts.

Verwenden Sie ein Muster wie marineblaues-leinenhemd-vorderseite.jpg, das bei einem Massenimport lesbar bleibt, in einem Ordner vorhersehbar sortiert und das Bild in den Suchergebnissen beschreibt. Der Alt-Text sollte beschreiben, was das Foto zeigt, einschließlich Farbe, Material und Ansicht, ohne den Produkttitel Wort für Wort zu wiederholen. Beide Felder dauern Sekunden pro Produkt und verbessern das Erscheinungsbild eines Shops in der Bildersuche.

Änderungen vor der Einführung testen

Verarbeiten Sie zuerst 5 Produkte, veröffentlichen Sie diese und überprüfen Sie die Seiten auf einem echten Telefon, bevor Sie den gesamten Katalog ausführen. Ein Einstellungsfehler, der auf 500 Produkte angewendet wird, kostet weitaus mehr Zeit, ihn rückgängig zu machen, als ihn zu verhindern.

Überprüfen Sie 3 Dinge bei den Testprodukten. Bestätigen Sie, dass die Bilder bei voller Vergrößerung scharf aussehen, da Käufer bei Kleidung und Schmuck stark zoomen. Bestätigen Sie, dass das Kollektionsraster konsistente Zuschnitte zeigt. Bestätigen Sie, dass die Seite schnell über mobile Daten lädt und nicht über Bürobroadband. Erst dann wenden Sie dieselben Einstellungen auf alles andere an.

Bild-Apps versus Vorbereitung vor dem Hochladen

Komprimierungs-Apps verlangen monatliche Gebühren, um ein Problem zu lösen, das Sie einmal vor dem Hochladen lösen können. Die Apps sind nützlich, wenn ein Shop ständig neue Bilder von vielen Personen erhält und niemand kontrolliert, was hochgeladen wird.

Ein Shop mit einem stabilen Katalog und einer Person, die die Bilder verwaltet, benötigt keine wiederkehrenden Gebühren. Das einmalige Komprimieren der Bibliothek und das Komprimieren neuer Fotos bei deren Ankunft erzielt das gleiche Ergebnis. Überdenken Sie dies, wenn der Katalog über das hinauswächst, was Sie manuell verarbeiten können, oder wenn mehrere Mitarbeiter Bilder hochladen, ohne eine Spezifikation zu befolgen.

Häufige Shopify Bildfehler

Das direkte Hochladen von der Kamera ist der teuerste Fehler, da ein 24-Megapixel-Foto die 10-fache Datenmenge enthält, die ein Shop anzeigen kann. Die Plattform akzeptiert die Datei, und die Seite bezahlt dafür.

Zwei weitere Fehler treten regelmäßig auf. Das Mischen von Bildformen in einer Kollektion führt zu einem ungleichmäßigen Raster, da Themes auf quadratisch zuschneiden und ein Hochformatfoto oben und unten verliert. Die Verwendung von PNG für Produktfotos bläht die Dateigrößen um das 3- bis 5-fache auf, ohne sichtbaren Nutzen, da PNG jedes Pixel exakt speichert und ein Foto keine flachen Bereiche zum Ausnutzen hat.

Einen konsistenten Katalog pflegen

Verarbeiten Sie den gesamten Katalog in einem Durchgang, damit jedes Produktfoto die gleichen Abmessungen, Komprimierung und Rahmung aufweist. Käufer, die Produkte vergleichen, bemerken Inkonsistenzen, auch wenn sie diese nicht benennen können.

Konsistenz hilft auch dem Kollektionsraster, wo Bilder mit passender Form und Helligkeit als gestaltete Seite und nicht als zusammengestellte Seite wahrgenommen werden. Legen Sie die Abmessungen und das Größen-Ziel einmal fest und wenden Sie diese dann auf jede Datei an, anstatt jedes Produkt einzeln anzupassen.

Einen Katalog in einem Durchgang verarbeiten

Laden Sie bis zu 500 Bilder gleichzeitig hoch oder ziehen Sie ein ZIP-Archiv direkt von Ihrem Fotografen, und jede Datei wird in der Größe angepasst und nach den gleichen Spezifikationen komprimiert zurückgegeben. Ein Katalog, der in Desktop-Software einen Nachmittag dauerte, ist in wenigen Minuten fertig.

Alles läuft in Ihrem Browser auf Ihrem eigenen Prozessor, sodass unveröffentlichte Produkte, saisonale Kampagnenaufnahmen und Lieferantenfotos niemals einen Server erreichen. Für einen Shop, der einen Start unter Embargo vorbereitet, ist das lokale Halten der Dateien der Unterschied zwischen einer kontrollierten Ankündigung und einem Leak, und es kostet nichts extra.