Bilder optimieren

[Tradershop82]

Hallo liebe Community. 

Ich habe das Problem das auf meiner Webseite (www.tradershop82.de) die Bilder nicht passen. Wenn ich mein Shop auf dem Handy öffne passt das Obere Bild aber auf dem PC sehe ich nur ein Teil. 

Wie kann ich das einstellen das es gleich aussieht oder gibt es Themen die es automatisch machen!? 

Ich danke euch schonmal 💪

[Kai]

Hi @Tradershop82,

vielen Dank für deinen Post in unserem Forum. Welches Theme verwendest du in deinem Shopify Shop? Wer dein Theme entwickelt hat und unterstützt siehst du so nach.

Die Bildqualität ist für das Erscheinungsbild und somit Überzeugungswert eines jeden Onlineshops enorm wichtig, schließlich soll der Shop organisiert, professionell und einfach zu navigieren sein und schnell laden.

Ich gehe darum kurz die einzelnen verschiedenen Fotoarten an, die ein Shopify Theme beinhalten kann.

Zunächst sollten die Bilder groß genug sein, um das Produkt im Detail zu zeigen, und gleichzeitig klein genug, um schnelle Ladezeiten zu ermöglichen.

Wenn es um Shopify-Bildgrößen geht, beträgt die maximale Größe im Allgemeinen 4472 x 4472 Pixel mit einer Gesamtgröße von 20 MB. Das bedeutet nicht, dass alle Bilder diese Größe haben sollten – es ist nur die obere Grenze dessen, was möglich ist.

Typischerweise wird geraten, dass quadratische Bilder eine Größe von 2048 x 2048 Pixel haben, um den optimalen Punkt zwischen Größe und Geschwindigkeit zu erreichen.

Zu klein sollten sie auch nicht sein, denn Produktbilder, die kleiner als 800 x 800 Pixel sind, können nicht vergrößert werden. Dies ist eine wichtige Überlegung, für die Maximierung der Conversions.

Größe des Shopify-Produktbilds: 2048 x 2048 Pixel

Da Käufer die Produkte nicht physisch inspizieren können, muss diese Erfahrung mit Bildern so weit wie möglich nachgebildet werden, um die Textur, das Material oder andere Details aus der Nähe beurteilen zu können. Sie sind also das Herzstück eines jeden Onlineshops.

Wenn der Großteil des Traffics von mobilen Geräten kommt, sind quadratische Bilder die beste Wahl. Ein Shopify-Theme passt die Größe von Bildern automatisch an, um die beste Benutzererfahrung zu erzielen. Auf Mobilgeräten erzielen quadratische Bilder mit dem Produkt in der Mitte optimale Ergebnisse.

Bildgröße der Shopify-Kategorien: 2048 x 2048 Pixel

Eine Shopify-Kategorie ist eine Gruppe von Produkten auf den Seiten des Shopify Shops. Da die Bilder meist nebeneinander liegen, ist es wichtig sicherzustellen, dass alle Bilder das gleiche Bildseitenverhältnis und die gleichen Bildgrößen haben, denn es ist sehr auffällig, wenn ein Produktbild nicht die gleiche Größe hat.

Shopify-Slideshow-Bildgröße: 1200-2000 Pixel Breite x 400-600 Pixel Höhe

Bei vielen Themen sehen Besucher als Erstes die Startseiten-Slideshow. 

Große, hochauflösende Bilder, die sich von der Seite abheben und Aufmerksamkeit erregen, sind an der Tagesordnung. Themen haben unterschiedliche Anforderungen an die Größe der Diashow. Zum Beispiel hat das beliebte Debut-Design vier Faktoren, die sich darauf auswirken, wie die Bilder angezeigt werden:

• Seitenverhältnis (auch Breite-zu-Höhe-Verhältnis)
• Bildgröße
• Positionseinstellungen des Bildes
• Einstellungen für die Folienhöhe

Da die Diashow von einem Bild zum nächsten „gleitet“, sollten du sicherstellen, dass alle Bilder das gleiche Seitenverhältnis haben. So sehen die Dinge konsistent und professionell aus.

Größe des Shopify-Bannerbilds: 400-600 Pixel Breite x 1200 Pixel Höhe

Shopify-Bannerbilder sind Slideshows sehr ähnlich und enthalten oft überlagerten Text. 

Genau wie bei Diashow-Bildern ist die Verwendung von hochauflösenden Bildern hier wichtig. Es lohnt sich auch, den Hintergrund einfach zu halten, damit der Text gut zur Geltung kommt. 

Werden die Seiten des Bannerbilds auf Mobilgeräten abgeschnitten, ist möglich, dies zu beheben, indem man Code hinzufügt, um die Ausrichtung, das Seitenverhältnis und den Bildrand zu ändern. Eine Breite von 1200–2000 und Höhe von 400–600 Pixel passt meist gut.

Bildgröße des Shopify-Logos: 450 Pixel Höhe x 250 Pixel Breite

Die offizielle Größenempfehlung für das Shopify-Logo beträgt nicht mehr als 450 x 250 Pixel Breite. Das bedeutet natürlich nicht, dass die Bildgröße genau diese Abmessungen haben muss. 

Hast du noch kein Logo? Dann kannst du Hatchful – den kostenlosen Logo-Builder von Shopify benutzen, um noch heute ein einfaches Logo für dein Geschäft zu erstellen.

Bildoptimierung

Nachdem du die besten Bildgrößen für deinen Shopify-Shop festgelegt hast, müssest du als Nächstes überlegen, welche Art von Bildformaten du verwenden möchtest.

Hier sind einige der gängigsten Bildformate samt Vor- und Nachteile, die zu beachten sind:

1. JPG/JPEG

JPG ist wahrscheinlich der am häufigsten verwendete Bilddateityp für Shopify-Shops. Es hat eine hervorragende Farbpalette und eine kleine Dateigröße, die sich für ein schnelles Laden eignet. Die Komprimierungsfähigkeiten von JPG bieten ein exzellentes Gleichgewicht zwischen Qualität und Größe. Aus diesem Grund empfiehlt Shopify den Händlern tatsächlich, JPG für Bilder auf der Produktseite zu verwenden.

2.PNG

Ein weiteres sehr verbreitetes Bildformat, das in Shopify-Shops verwendet wird, ist PNG. PNG eignet sich perfekt für E-Commerce-Websites, da du damit die Bilddateigröße reduzieren kannst, ohne die Gesamtbildqualität zu beeinträchtigen. Außerdem unterstützt PNG auch Transparenz, wodurch du mehr Kontrolle über das Design deines Shops hast. Ein Problem mit PNG ist die verlustfreie Komprimierung – das bedeutet, dass die Bilddatei oft sehr groß werden kann.

3. GIF

GIFs sind ein allgemein bekanntes Bildformat, das für kurze Animationen oder Produkterklärungen nützlich ist (sehr beliebt in Shopify Dropshipping Stores). Das GIF-Bildformat beschränkt Bilder auf nur etwa 250 Farben, sodass sie nicht die lebendigsten sind. Sie können jedoch hervorragend funktionieren, wenn sie in Verbindung mit anderen Bildformaten verwendet werden.

4. TIFF

TIFF ist ein nützliches Bildformat, das von mehreren Webbearbeitungs-Apps unterstützt wird. Das bedeutet, dass es für Designer und Händler einfach ist, die Bilder zu bearbeiten und sie für Marketingkampagnen anzupassen. TIFF bietet eine hohe Auflösung und ermöglicht es, mehrere Bilder in einer Datei zu speichern. Wie bei PNG ist die Dateigröße jedoch dank verlustfreier Komprimierung tendenziell größer.

Wenn du dir nicht sicher bist, welche Bildgröße du verwenden sollst, ist es immer ratsam, dich für ein JPG/Jpeg zu entscheiden. Denn wie bereits erwähnt, schafft JPG das Gleichgewicht zwischen Dateigröße und Bildqualität besser als jedes andere Bildformat.

Kostenlose Shopify-Bildgrößen-Apps und -Tools

Nachfolgend findest du einige Ressourcen, die bei der Optimierung der Bildgrößen helfen:

• Shopify Image Resizing Tool – ein raffiniertes Tool, das genau das tut, was auf dem Tipp steht – änderst du die Größe der Bilder schnell und einfach für eine bessere Leistung.
• Google Page Speed ​​Insights – Ein hilfreiches Tool von Google, mit dem du langsam ladende Bilder auf der Website aussortieren kannst, um schnellere Ladezeiten zu erzielen.
• Unsplash – eine Sammlung hochwertiger lizenzfreier Bilder, die du in deinem Shopify Shop und in Marketingkampagnen verwenden kannst.
• Burst – eine ähnliche Sammlung professioneller Bilder von Shopify zur Verwendung in deinem Shopify Shop und Marketingbemühungen.
• Canva – Ein praktisches Bildbearbeitungstool ohne die steile Lernkurve von Photoshop.

Die Optimierung der Shopify-Bilder kann eine Herausforderung sein, die sich jedoch lohnt, wenn es gelingt, dem Kunden das Produkt im Detail und der Handhabung zu präsentieren, als hätte er/sie es real vor Auge.