Bilder im Webshop

Bilder im Webshop

Grundlagenwissen: Zusammenspiel zwischen Shoptemplate und Bildern

In der nachfolgenden Anleitung geht es ausschließlich um Produktbilder und nicht um Image-Bilder oder Werbebanner im Webshop.

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

Optimal ist es, ein Bild genau in der Größe zur Verfügung zu stellen, in der es benötigt wird.

Verzerrte Bilder

Wird durch ein Template die Höhe und die Breite vorgegeben, so wird ohne Rücksicht auf das Seitenverhältnis der eigentlichen Bilddatei das Bild durch den Browser neu berechnet. Gibt das Template zum Beispiel 400 x 300px vor und das Bild ist 400 x 400px, dann ist das Ergebnis ein in der Höhe gestauchtes Bild.


Strenge Templatevorgaben können Bilder mit falschem Seitenverhältnis verzerren

Unscharfe oder pixelige Bilder

Durch eine Vorgabe in einem Template können Bilder auch größer dargestellt werden, als sie eigentlich sind. Weil in diesem Fall nicht genügend Bildinformationen vorhanden sind, wird das Bild unscharf bzw. pixelig.


Unscharfes Bild durch Vergrößern von zu kleinen Bildern. Aus “zu wenig Bildinformation” wird nicht “mehr Bildinformation” durch einfaches Vergrößern.

Teilen

Schreiben Sie einen Kommentar

Your email address will not be published.