We use cookies in order to give you the optimal experience of our website. Some of them are required for the operation of this site (e.g. in order to use the shopping cart). Others allow us to enhance our online offers and to display them efficiently. You can use the settings to determine which cookies you will permit. Further details can be found in our privacy policy.
Settings
  • Required
    These cookies are required for the functionality of this site, e.g. by making it possible to add products to the shopping cart. Furthermore, this type of cookie guarantees that you can log into your account and that you can stay logged in, in order to maintain access to your order details. Required cookies are exclusively used on this Website. No data is transferred to third parties.
  • Comfort
    These cookies allow the custom tailoring of certain features in order to enhance the user experience and simplify the use of our site.For instance, they make it easier to search for and find suitable products. Cookies used to enhance the user experience are exclusively used on this site and no data is passed on to third parties.
  • External Media
    We provide you additional media, e.g. videos or maps. This media is provided by third parties, who are using cookies.Cookies for external media is used by third parties or publishers. We do not have any control about this cookie usage.
  • Statistics
    In order to further improve our Website, we collect anonymous data for statistics and analysis. These cookies enable us to keep track of traffic which helps us improve the site systematically. For these purposes, only anonymous data is passed on to third parties.
  • Marketing
    Marketing cookies help us to inform you about interesting offers on other websites. Marketing cookies are used by third parties or publishers in order to present personalized adds.

Automatische Bildoptimierung

Questions:

  • wie lade ich Bilder hoch

Description:

Das Online-Shop-System TYRIOS erstellt vollautomatisch optimierte Bilder aus dem zur Verfügung gestellten Rohmaterial. Deshalb ist es ratsam, Bilder möglichst in hoher Auflösung in die Medienbibliothek zu laden. Heutige Serverkonfigurationen lassen es dabei in der Regel problemlos zu, Bilder direkt von der Digitalkamera Online zu stellen.

Bild-Bereitstellung

Um ein konsistentes Erscheinen über alle Produkte und Seiten zu gewährleisten, sind Standard-Größen im System hinterlegt. TYRIOS erstellt aus dem Rohmaterial in einem mehrstufigen Prozess Bilder für diese Standardgrößen. Hierbei wird festgelegt:

  • wie hoch ein Bild sein soll
  • wie breit ein Bild sein soll
  • ob und welche Hintergrundfarbe verwendet werden soll, wenn die Höhe oder die Breite von der Vorgabe abweicht.

Ein Bild der Artikeldetailansicht hat so im Standarddesign eine Auflösung von 

  • 800 Pixel Breite
  • 600 Pixel Höhe
  • #FFFFF (weiß) als Hintergrund

TYRIOS erstellt immer Bilder in dieser Größe. Wenn du größere Bilder in der Medienbibliothek hinterlegt hast, werden die Bilder entsprechend verkleinert. Dadurch entstehen keine Qualitätseinbußen, die Ladegeschwindigkeit wird aber deutlich erhöht. Ist das hinterlegte Bild jedoch kleiner, so muss es hochgerechnet werden. Dadurch entstehen unscharfe und verpixelte Bilder. Du solltest deshalb darauf achten, möglichst hochauflösende Bilder zu hinterlegen. Du siehsrt in der Medienverwaltung schlechte Bilder mit einem Ausrufezeichen versehen.

Bild-Optimierung im Editor

Im Editor hast du ebenfalls Zugriff auf die Medienbibliothek. Allerdings ist es dem System nicht automatisch möglich, Bilder in der optimalen Größe bereitzustellen, weil hier die Einsatzmöglichkeiten nicht vorab bekannt sind. Du kannst aber optimal berechnete Bilder selbst festlegen. 

Mit der Auswahl eines Bildes aus der Medienbilbliothek wird automatisch die URL zum Anzeigen des Bildes erzeugt. Diese URL hat folgenden Aufbau:

/media/[ID]-[Dateiname]-[Breite]-[Höhe]-[Version].png

 Du kannst die Höhe und Breite hier durch Veränderung der URL selbst festlegen. Dabei wird das Bild immer im Verhältnis zur tatsächlichen Höhe und Breite berechnet. Das berechnete Bild ist also maximal so wie gewünscht groß. Solltest du zusätzlich eine Hintergrundfarbe festlegen, dann ist das Bild exakt in der gewünschten Größe:

/media/[ID]-[Dateiname]-[Breite]-[Höhe]-[Farbe im HEX-Format]-[Version].png

Beachte insbesondere im Editor, dass du Bilder auf Wunsch responsiv einbinden kannst. Verwende hierzu die CSS-Klasse "img-responsive", damit sich das Bild automatisch an die verfügbare Breite anpasst.

Solution:

Tips und Tricks:

Subscribe to our newsletter

Stay informed at all times. We will gladly inform you about product news and offers.