Grundlagenwissen: Zusammenspiel zwischen Shoptemplate und Bildern
Das Grundlagenwissen Shoptemplate und Bilder zur Bearbeitung von Webshopinhalten mit Wirkung für weitere Handelsformen
Produktbilder sind ein wesentlicher Bestandteil der Produktdarstellung und sie entscheiden wesentlich mit, ob ein Interessent sich für Ihr Produkt entscheidet. Es lohnt sich also, die Bilderverwaltung von YES-System genauer anzuschauen.
Es ist zudem wichtig, zu einem sehr frühen Zeitpunkt die zukünftigen Maße der Produktbilder festzulegen. Das Template (das Design des Webshops) verlangt je nach Ausführung nach bestimmten Bildgrößen. Die Vorgaben des Templates entscheidet darüber, wie das Bild dargestellt wird.
Bildgröße und Seitenverhältnis
Eine Bildgröße hat eine Breite und eine Länge, die in Pixeln (Bildpunkten) definiert wird. Daraus ergibt sich ein Seitenverhältnis. Dabei meint ein Seitenverhältnis von 1:1 eine identische Höhe und Breite (zum Beispiel 100 x 100 Pixel (px). Bei 4:3 passt eine identische Menge an Bildpunkten 4x in die Breite und 3x in die Höhe (zum Beispiel 4 x 100px zu 3 x 100px, also 400 x 300px).
Bild 100 x 100 Pixel / Seitenverhältnis 1:1
Bild 400 x 300 Pixel / Seitenverhältnis 4:3
Bildinformation, Bilddarstellung und Ladezeiten
Bilder können durch ein Template in ihrer Größe anders dargestellt werden als sie wirklich sind. So kann ein Bild mit 300px Breite nur mit 100px dargestellt werden. Es werden also mehr Bildinformationen in den Browser geladen als dargestellt werden soll, und diese müssen dann zusätzlich noch vom Webbrowser in die kleinere Darstellung heruntergerechnet (skaliert) werden. Dieses kostet Zeit und sorgt bei mehreren Bildern schnell für lange Seitenladezeiten. Zudem leidet die Bildqualität bei einer zu starken Skalierung.
Verzerrte Bilder
Ist in einem Template Höhe und Breite vorgegeben, berechnet der Browser folglich ohne Rücksicht auf das Seitenverhältnis der ursprünglichen Bilddatei dieses neu. Gibt Ihr Template zum Beispiel 400 x 300px vor und das Bild ist 400 x 400px gross, dann ist das Ergebnis ein in der Höhe gestauchtes Bild (siehe Beispiel unten).
Strenge Templatevorgaben können Bilder mit falschem Seitenverhältnis verzerren
Unscharfe oder pixelige Bilder
Durch eine Vorgabe in einem Template können Bilder zudem auch größer dargestellt werden, als sie eigentlich sind. Weil in diesem Fall nicht genügend Bildinformationen vorhanden sind, wird somit das Bild unscharf oder pixelig.
Unscharfes Bild durch Vergrößern von zu kleinen Bildern. Aus “zu wenig Bildinformation” wird nicht “mehr Bildinformation” durch einfaches Vergrößern.