So optimieren Sie Ihre Bilder für das mobile Web

Berücksichtigen Sie bei der Auswahl von Dateitypen und -abmessungen für Ihre Bilder die Qualität, die Seitenladezeiten, die Zoomfunktion und die Anforderungen des Marktplatzes, insbesondere wenn Sie auf mehreren Plattformen verkaufen. Werfen wir einen Blick auf die Optimierung von Bildern für das Web und wie Sie Ihren Dateityp auswählen, während Sie für eine verbesserte Benutzererfahrung mobile Geräte im Auge behalten.

Auswahl der richtigen Bildabmessungen

Es ist wichtig, ein Gleichgewicht zwischen Bildern zu finden, die groß genug sind, damit Benutzer hineinzoomen können, und solchen, die eine optimale Größe haben, damit sie nicht zu viel Platz beanspruchen und die Ladezeiten Ihrer Seite verlangsamen. Auf Shopify können Sie Bilder mit bis zu 4472 x 4472 Pixeln und einer Dateigröße von bis zu 20 MB hochladen. Der Website-Builder empfiehlt jedoch normalerweise die Verwendung von 2048 x 2048 Pixeln für quadratische Produktfotos. Dies sind hochauflösende Bilder, die Ihrem Geschäft ein professionelles und abgerundetes Aussehen mit großartigen Zoomfunktionen verleihen. Denken Sie daran, dass Ihre Bilder größer als 800 x 800 Pixel sein müssen, damit die Zoomfunktion funktioniert.

In ähnlicher Weise haben Amazon und Etsy eine Bildanforderung von 1000 x 1000 Pixel, um das Zoomen zu ermöglichen.

Um ein einheitliches Erscheinungsbild entlang Ihrer Produktlinie und auf Ihren Kollektionsseiten zu erhalten, sollten Sie das Seitenverhältnis von Breite und Höhe aller Ihrer Feature-Bilder gleich halten, z. B. quadratisch. Ihr Feature-Bild ist das erste Bild eines Produkts, das in Ihrem Geschäft erscheint – auf Ihrer Startseite, Warenkorbseite, Checkout-Seite und einer Vielzahl von Sammlungsseiten. Behalten Sie auch alle Ihre Thumbnails in der gleichen Größe und Form bei, um einen ausgefeilten Laden-Look zu vermitteln. Denken Sie daran, dass viele Ihrer Kunden auch auf Mobilgeräten surfen und quadratische Bilder für kleinere Bildschirme einfacher neu positioniert werden können.

Auswahl des richtigen Bildformats

Werfen wir einen Blick auf die in der Produktfotografie am häufigsten verwendeten Dateiformate und was sie jeweils zu bieten haben. Sie sind hier danach aufgelistet, wie häufig sie in der Produktfotografie verwendet werden.

JPG

JPG ist das am weitesten verbreitete Dateiformat für digitale Bilder. Es wird weitgehend unterstützt und bietet eine kleine Dateigröße mit einer guten Farbpalette. Die Komprimierung ermöglicht es Ihnen, ein Gleichgewicht zwischen Dateigröße und Bildqualität zu finden. Shopify empfiehlt insbesondere JPG, da es relativ kleine Bilder in guter Qualität liefern kann, was für Produktfotos gut funktioniert.

PNG

PNG wurde erstellt, um das GIF-Format zu verbessern, indem die Beschränkung auf 256 Farben aufgehoben wurde. Es ist weithin akzeptiert, verlustfrei (reduziert die Dateigröße, ohne die Qualität zu beeinträchtigen) und unterstützt Transparenz (z. B. für transparente Hintergründe). Die Nachteile sind, dass PNG-Dateien aufgrund der verlustfreien Komprimierung groß sein können und das Format nicht so universell kompatibel ist wie JPG.

GIF

GIF bietet eine kleine Dateigröße durch Komprimieren und Reduzieren von Bildern auf 256 Farben. Obwohl es weitgehend durch PNG ersetzt wurde, wird es immer noch für Animationen verwendet, da es das einzige Format ist, das es sowohl unterstützt als auch von Browsern allgemein erkannt wird.

TIFF

TIFF ist ein verlustfreies Komprimierungsformat, das von einer Reihe von Bearbeitungs- und Webanwendungen weitgehend unterstützt wird. Es bietet eine hohe Auflösung und mehrere Bilder und Seiten können bequem in einer einzigen Datei gespeichert werden. Die Dateigröße ist jedoch tendenziell groß.

BMP

BMP wird häufig im Windows-Ökosystem verwendet. Es unterstützt Datenkomprimierung, Alphakanäle (die in Photoshop verwendet werden, um zusätzliche Informationen zu speichern, mit denen Sie Teile des Bildes manipulieren können, z. B. transparente Hintergründe hinzufügen) und nahezu universelle Kompatibilität. Unkomprimiert bietet es perfekte Bilder, aber die Dateigrößen können auch sehr groß sein.

Insgesamt ist JPG sicherlich am bequemsten, wenn es darum geht, kleinere Größe mit anständiger Qualität zu kombinieren. PNG bietet zwar eine verlustfreie Komprimierung höherer Qualität, jedoch auf Kosten einer größeren Dateigröße. GIF ist nützlich, wenn Sie 360-Grad-Aufnahmen anbieten und leichte Dateien wünschen. BMP und TIFF bieten im Vergleich dazu eine hervorragende Qualität, aber Lebensgrößen sind normalerweise ziemlich schwer und unpraktisch.

Größe von Bildern für Mobilgeräte

Shopify passt die Größe Ihrer Bilder automatisch an kleinere Bildschirme an, aber bestimmte Bilder müssen manchmal manuell bearbeitet werden. Denken Sie daran, dass Desktop- und mobile Bildschirme nicht nur unterschiedliche Größen, sondern auch entgegengesetzte Ausrichtungen haben. Und während Shopify versucht, dies durch sanftes Zuschneiden zu berücksichtigen, ist es am besten, wenn Ihre Bilder quadratisch sind und Ihr Produkt vertikal und horizontal zentriert ist.

Außerdem können Bilder mit zu großen Auflösungen, beispielsweise Shopifys maximal 4000 x 4000 Pixel, verschwommen erscheinen, wenn sie für Mobilgeräte in der Größe geändert werden. Wenn Sie also Ihr Image auf eine handlichere Größe und Form reduzieren, die die Mobilität berücksichtigt, kann Ihr Geschäft auf allen Geräten besser aussehen. Beachten Sie, dass große Dateien auch die Ladezeit Ihrer Website verlangsamen. Und im E-Commerce und insbesondere im mobilen Bereich zählt jede Sekunde, daher sollte die Optimierung Ihrer Bilder Priorität haben.

Während die verlustfreie Komprimierung Ihnen also die höchste Bildqualität liefern kann, erstellt sie oft große Dateien, deren Hochladen ewig dauert (insbesondere in großen Mengen) und die Ladezeiten Ihrer Seite verlangsamen kann, was dazu führt, dass Besucher Ihren Shop verlassen. Dies gilt insbesondere für Mobilgeräte, wo die Internetgeschwindigkeit langsamer sein kann und das Warten auf das endgültige Erscheinen eines Bildes die Käufer frustriert.

Während die reaktionsschnellen Designs und Algorithmen von Shopify gut darin sind, die Größe Ihrer Bilder zu ändern und auf allen Geräten anzuzeigen, kann es ein noch reibungsloseres Einkaufserlebnis bedeuten, ihnen mit durchdachten Dateigrößen zur Hand zu gehen.

Über den Autor

Holly Cardew ist die Gründerin von Pixc, einer Plattform, die E-Commerce-Shops dabei unterstützt, ihre Produktfotos zu bearbeiten und zu optimieren, um den Umsatz zu steigern. Pixc verwandelt durchschnittliche Produktbilder in schöne, indem es den Hintergrund innerhalb von 24 Stunden bearbeitet und entfernt. Holly begann als Teenager, verkaufte bei eBay und gründete ihren eigenen Online-Marktplatz. Holly hat einen Hintergrund in E-Commerce, Online-Marketing, Grafikdesign und dem Aufbau verteilter Teams. Sie hat auch Erfahrung im Aufbau und Betrieb von Shopify-Shops und im Aufbau großer Social-Media-Follower. Im Jahr 2016 wurde Holly in die Retail and eCommerce Forbes 30 under 30-Liste aufgenommen. Holly teilt ihre Zeit zwischen San Francisco, Brisbane und Sydney auf. Wenn Holly nicht arbeitet, liebt sie es zu reisen, neue Orte zu erkunden, schönes Design, Typografie und neue Geschäftsideen zu entwickeln.