Shop-Logo
Die unterschiedlichen Shop-Logos in der Theme-Konfiguration haben verschiedene Zwecke und Anforderungen. Daher benötigen die entsprechenden Grafiken teils unterschiedliche Größen um optimal dargestellt zu werden.
Hinweis: Grundlagen zur Konfiguration des Shop-Logos findest in der ThemeWare® Einführung: Logo konfigurieren
Logo @Desktop (≥1200px)
Ist der Viewport größer als 1200px wird das Desktop Logo angezeigt.
Logo @Tablet (≥768px)
Zwischen 1200px und 767px wird das Tablet Logo angezeigt.
Logo @Phone (<768px)
Ist der Viewport kleiner als 767px wird das Phone Logo angezeigt.
Logo (Sticky top navigation)
Kleines Logo für die ThemeWare® Sticky-Top-Navigation.
Logo (Shopping Experiences Header)
Alternatives Logo für die Verwendung im ThemeWare® Erlebniswelt-Header.
App & share icon
Das App- & Share-Icon wird beispielsweise als Vorschau angezeigt, wenn die Seite in sozialen Netzwerken geteilt wird.
Favicon
Das Favicon wird im Browser vor der URL angezeigt.
Tipp: Orientiert dich einfach an unseren PSD-Dateien in unserem Bildvorlagen-Downloadpaket welches du über die ThemeWare® Utilities erhältst.
Dateiformat
Der Shopware 6 Medienmanager unterstützt derzeit folgende Dateiformate:
Bildformate: jpg, jpeg, png, webp, gif, svg, bmp, tiff, tif, eps
Videoformate: webm, mkv, flv, ogv, ogg, mov, mp4, avi, wmv
Audioformate: aac, mp3, wav, flac, oga, wma
Textformate: txt, doc
Sonstiges: pdf
Grundsätzlich sind auch die Bildformate gif und bmp bildschirmtauglich, für dein Shop-Logo empfehlen wir dir aber die folgenden Bildformate jpg, jpeg, png oder WebP.
Pixel-Grafiken
Der Standard sind jpg bzw. jpeg Dateien. Wenn dein Logo Transparenzen nutzen soll, verwende das png Format. Diese drei genannten Bildformate sind Pixel-Grafiken, häufig auch Rastergrafiken genannt.
Bei Pixelgrafiken ist es – aus visueller Sicht – grundsätzlich sinnvoller dass die Grafik eher verkleinert als vergrößert dargestellt wird. Nutze daher lieber eine etwas größere Grafik als tatsächlich benötigt. Achte aber darauf, dass die Grafik nicht viel zu groß ist!
Zusätzlich kann es helfen, Pixelgrafiken mit einen kostenlosen Tool wie TinyPNG bezüglich Dateigröße zu optimieren.
Vektor-Grafiken (*.svg)
Wie du vielleicht gemerkt hast, fehlt noch eins unserer empfohlenen Bildformate. Beim svg Format handelt es sich nicht um eine Pixelgrafik sondern um eine Vektorgrafik.
Vektorgrafiken werden aus Linien, Kreisen, Polygonen oder Kurven zusammengesetzt. Bei diesen Grafiken werden also nicht jeder einzelne Pixel eines Kreises gespeichert sondern vereinfacht gesagt die Lage des Kreismittelpunktes und der Kreisdurchmesser.
Dies hat verschiedene Vorteile: Zum einen ist die Bildgröße von Vektorgrafiken oftmals kleiner als die von Pixelgrafiken und zum anderen lassen sich diese ohne Qualitätsverlust beliebig skalieren.
Die Vorteile bezüglich verlustfreier Skalierung sind besonders im responsive Web-Designs relevant. Mit Vektorgrafiken kann man dafür sorgen, dass sein Logo auf allen Endgeräten mit den verschiedensten Größen und Auflösungen stets sauber und scharf dargestellt wird.
Tipp: Eine Agentur oder eine Grafiker bzw. Designer kann dir sicherlich aus deiner Pixelgrafik eine passende SVG-Vektorgrafik aus deinem Logo erstellen.
Hinweis: Bei Problemen mit SVG-Grafiken nutze am besten modernere Bildformate wie beispielsweise WebP.
Dateigröße und PageSpeed
Das M-Logo mit 300x300 Pixeln hat eine Dateigröße von ca. 16 KB als png Pixelgrafik. TinyPNG schafft ohne einen sichtbaren Qualitätsverlust, die selbe Grafik auf 7 KB zu komprimieren. Das sind eine satte Ersparnis von knapp 60%.
Die Vektorgrafik des M-Logos hat eine Dateigröße von 1 KB und ist hier eindeutig im Vorteil.
Bitte beachte, dass eine Vektorgrafik nicht unbedingt kleiner ausfallen muss als eine Pixelgrafik. Es gibt durchaus Grafiken (abhängig von der Komplexität und Kleinteiligkeit) wo eine Pixelgrafik einen Vorteil gegenüber der Vektorgrafik hat.
Das Beispiel zeigt aber sehr gut, wieviel Optimierungsraum Pixelgrafiken bieten können.
Es ist völlig in Ordnung Pixelgrafiken zu verwenden, nutze aber auf jeden Fall alle Optimierungs-Möglichkeiten aus.
Die optimale Bildgröße
Die Frage nach der optimalen Bildgröße lässt sich nicht pauschal beantworten.
ThemeWare® ist extrem anpassbar und dazu gehört auch eine Konfiguration für die Größe deines Logos. Zudem nutzen die Header ein fluides Design, dass heißt, wieviel Platz das Logo letztendlich einnehmen kann, hängt auch von Faktoren wie dem eigentlichen Header-Layout oder der Länge der Haupt-Navigation ab.
Ein weiterer wichtiger Faktor ist natürlich auch die konfigurierte Logo-Größe selber.
All diese Faktoren haben einen direkten Einfluss auf die Logo-Größe und daher lässt sich einfach keine "perfekte Bildgröße" vorhersagen.
Orientierst du dich an unseren Demoshops und arbeitest mit der Grundkonfiguration deines ThemeWare® Themes. Nutze einfach unsere PSD-Dateien aus unserem Bildvorlagen-Downloadpaket.
Andernfalls musst du die perfekte Bildgröße selber ermitteln.
Tipp: Wenn du moderne Formate wie Vektor-Grafiken (*.svg) oder WebP von deinem Logo nutzt, kannst du die selbe Grafik einfach für alle Viewports nutzen – sofern das Logo inhaltlich stets identisch sein soll.
Unsere Empfehlung: WebP
Wir empfehlen das WebP-Dateiformat. WebP ist ein Grafikformat für mit einer verlustfreien Bildkompression für statische oder animierte Bilder.
Die verbesserte Komprimierung von WebP bedeutet, dass weniger Speicher benötigt wird und Seiten mit Bildern im WebP-Format schneller laden. Die Komprimierung ist übrigens besser als bei JPEG.
Das WebP-Format ist zudem das einzige Format, das die transparenten Hintergründe von PNG und die Animationsmöglichkeiten von GIF unterstützt.
Weiterführende Informationen
Einführung: Wie du Logos in deinen Shop einbinden kannst, erfährst du im Artikel Logo einbinden
Einführung: Wie du Logos in deinem Shop konfigurieren kannst, erfährst du im Artikel Logo konfigurieren
Tipps: Tipps zur Logo-Gestaltung
Last updated
