Grundlagenwissen: Zusammenspiel zwischen Shoptemplate und Bildern

Das Grundlagenwissen Shoptemplate und Bilder zur Bearbeitung von Webshopinhalten mit Wirkung für weitere Handelsformen

In der nachfolgenden Anleitung geht es ausschließlich um Produktbilder und nicht um Image-Bilder oder Werbebanner im Webshop. Mit diesem Artikel zum ‘Grundlagenwissen Shoptemplate und Bilder’ finden Sie heraus, wie Sie einfach selbst kleine Anpassungen vornehmen.

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).

Grundlagenwissen: Bild_100x100 (YES-System)
Bild 100 x 100 Pixel / Seitenverhältnis 1:1
Grundlagenwissen: Bild_400x300 (YES-System)
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.

Optimal ist es, ein Bild genau in der Größe zur Verfügung zu haben, in der Sie es benötigen.

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).

Grundlagenwissen: nokia-6150_3 verzerrte Darstellung (YES-System)
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.

Grundlagenwissen: nokia-6150_4 unscharfe Darstellung (YES-System)
Unscharfes Bild durch Vergrößern von zu kleinen Bildern. Aus “zu wenig Bildinformation” wird nicht “mehr Bildinformation” durch einfaches Vergrößern.