Fotos/Bilder png oder svg. Fehlermeldung bei svg

[Anja73]

Hallo,

ich plane mit dem Theme "Be yours" meinen Shop zu erstellen. Bin noch am Anfang und arbeite mich langsam durch. Grundsätzlich kann ich schon mal sagen, dass es mir sehr gut gefällt.

Jetzt habe ich gelesen, dass es besser ist die Bilder als svg hochzuladen statt png oder jpg. Ist das richtig? Sollte ich meine Produktfotos und Fotos für die Startseite alle auf svg umwandeln? Ebenso mein Logo?

Ich habe es testweise mit meinem Logo und einem Foto mit Hilfe von Adobe Express gemacht. Also von png auf svg. Hat alles gut geklappt. Wobei ich den Eindruck habe, dass das Foto an Qualität verloren hat (etwas dunkler und etwas unschärfer). Gibt es da bessere Möglichkeiten?

Dann wollte ich dieses svg Foto zu meiner Bibliothek hinzufügen. Leider gibt es eine Fehlermeldung. Seitenverhältnis muss zwischen 100:1 und 1:100 liegen. Wo liegt der Fehler? Vielen Dank.

[Gabe · Accepted solution]

Hey @Anja73 

Erstmals ein herzliches Willkommen auf der Plattform! Jetzt geht's los... 😉 

Und das Be Yours Theme ist eins meiner Favs! Super Theme und gute Wahl! ABER bei der Wahl zwischen SVG- und PNG-Formaten für Bilder in deinem Shopify-Shop gibt es einige wichtige Unterschiede zu beachten.

Das Umwandeln von Fotos (die pixelbasiert sind) in SVG (die vektorbasiert sind) kann tatsächlich zu einem Qualitätsverlust führen, wie du bereits bemerkt hast. Das liegt daran, dass der Vektorisierungsprozess oft Details und Farbnuancen der Originalbilder nicht perfekt erfassen kann. Für Fotos und detaillierte Bilder ist es daher besser, sie in ihrem ursprünglichen pixelbasierten Format (wie PNG) zu belassen.

Die Fehlermeldung, die du beim Hochladen der SVG-Datei erhalten hast, bezieht sich auf das Seitenverhältnis des Bildes. SVGs müssen ein bestimmtes Seitenverhältnis zwischen 1:100 und 100:1 haben. Wenn deine konvertierte Datei außerhalb dieser Grenzen liegt, kann Shopify sie nicht korrekt verarbeiten. Dies ist besonders bei der Umwandlung von Fotos zu SVGs häufig ein Problem, da der Vektorisierungsprozess die Dimensionen unerwartet ändern kann.

• Dann wollte ich dieses svg Foto zu meiner Bibliothek hinzufügen. Leider gibt es eine Fehlermeldung. Seitenverhältnis muss zwischen 100:1 und 1:100 liegen. Wo liegt der Fehler?

Wenn wir das bloß wüssten denn du hast kein Beispiel des Bildest oder einen Link zu einem Beispiel hier verlinkt. Somit wäre es hilfreich zu wissen, was du für Bilder hochlädst. Sind das beispielweise sehr hochkant Bilder, wie Weinflaschen?

Empfehlungen:

• Verwende SVG für Logos, Icons und einfache Grafiken, um von ihrer Skalierbarkeit und geringen Dateigröße zu profitieren.
• Behalte PNG für Fotos und detaillierte Bilder bei, um die beste Bildqualität zu gewährleisten.
• Überprüfe die Abmessungen deiner SVG-Dateien, um sicherzustellen, dass sie innerhalb der akzeptierten Seitenverhältnisse von Shopify liegen.

Um die Qualität deiner Bilder zu verbessern und Probleme mit der Dateigröße oder dem Seitenverhältnis zu vermeiden, könntest du spezielle Grafik-Tools wie Adobe Illustrator für SVGs oder Adobe Photoshop für PNGs verwenden. Diese Programme bieten erweiterte Optionen zur Bildbearbeitung und Optimierung, die besonders nützlich sein können, wenn du Dateien für das Web optimierst.

Ansonsten habe ich eine App die deine Bilder so richtig für dein Shop optimieren kann - die Pixc: Photo Resize App. Hier der Klappentext:

Pixc’s Photo Resize verkleinert, optimiert und aktualisiert Ihre Produktfotos automatisch, sodass alles in Ihrem Online-Shop einheitlich ist. Diese App macht Ihren Shop professioneller und spart Ihnen Zeit und Mühe, damit Sie sich auf das Wachstum Ihres Unternehmens konzentrieren können. Die App ist so konzipiert, dass sie Ihnen ein besseres Erlebnis bietet. Der intuitive Algorithmus analysiert Ihren Shop schnell und ermöglicht eine Verkleinerung mit wenigen Klicks. Legen Sie Ihre bevorzugten Bildeinstellungen fest und lassen Sie sie im Hintergrund arbeiten für ein nahtloses Erlebnis.

• 100% automatisiert: Verkleinern, optimieren und aktualisieren Sie Ihre Produktfotos automatisch.
• Wählen Sie zwischen Zuschneiden oder Hinzufügen von Rahmen, um Ihre Fotos besser zur Geltung zu bringen.
• Verbessern Sie die Ladezeit der Seite mit Bildoptimierung.
• Lassen Sie es im Hintergrund laufen, es ist nicht notwendig, die App jedes Mal zu öffnen.
• Stellen Sie Ihre ursprünglichen Fotos jederzeit wieder her, abhängig von Ihrem Plan.

Hoffe das hilft dir weiter - lass wissen falls nicht! / und ein schönes Wochende noch! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.