Optimale Darstellung von Bildern, auch für Speedoptimierung Ihrer Canvayo Seite.

Bitte beachten Sie: Die dargestellt Größe der Bilder ist immer abhängig von dem Gerät auf dem die Website aufgerufen wird. Leider gibt es keine allgemein gültige Formel, da die Menge der Endgeräte heute von theoretisch von den kleinen Bildschirm einer Smartwatch, verschiedene Smartphones bis zu einem großen Widescreen-Monitor oder 4K-Fernseher die unterschiedlichsten Formate und Auflösungen umfasst. 
Diese Tipps soll eine Hilfestellung dafür sein, die bestmögliche Darstellung auf verschiedenen Endgeräten zu gewährleisten ohne Abstriche bei der Performance der Seite zu haben. 

Bildgrößen

  • Aufmacher: mindestens 1920px breit, (Unsere Empfehlung 2.000px). Die Höhe ist von verschiedenen Faktoren abhängig:
    1. Der gewählte Größe des Aufmachers: Schmal 480px, Mittel 700px, Groß 1080px. 
    2. Von der Höhe Ihres Logos (nicht bei transparentem Header). Bei einem nicht transparenten Header können Sie hier die Höhe des Logos (Headers) von der Bildgröße abziehen.
    3. Ob Sie die Utility-Bar verwenden
    4. Oder wenn Sie eine spezielle Aufmacher-Variante zum Beispiel mit Kacheln verwenden. 
  • CTA-Background: 1920px breit, Höhe abhängig vom Text des Banners
  • CTA-Image: 600px breit, Höhe abhängig vom Text des Banners. Mindesthöhe: 325px 
  • Image-Text-Block: min. 600 x 360 px (Höhe abhängig vom Inhalt aber maximal 720px hoch)
  • Referenz-Slider: 416 x 240 px
  • Content-Teaser: 390x270px
  • Gallery-Block: Keine direkte Vorgabe, aber Bild sollte nicht größer als 1920px breit oder 1080px hoch sein.
  • Mitarbeiter: 752×716 pixels
  • Produkte: 1104×720 pixels
  • Divider-Image-Block: 1920px Breit, Höhe nach Inhalt
  • Kontakt: 440×440 px
  • Kundenstimmen: 160×160 px
  • Teaser (Beitragsbilder) (Ausnahme Blog-Bilder, Events): (366×270) 720×531 (Retina)
  • Event-Hero: 1230 x 650 px
  • Event-Teaser: 1230 x 907 px
  • Blog-Hero: 1230 px Breite (Höhe Variabel ) Unsere Empfehlung mindestens 630px

Datei-Größe

Ebenfalls wichtig ist die Bildkomprimierung. Folgende Dateigrößen empfehlen wir Ihnen nicht zu überschreiten:

  • Normale Bilder <100kb
  • Heroes, CTA-Banner etc. zwischen 200 kb und 250 kb

Datei-Format

Bilder sollten im JPG oder PNG Format gespeichert werden. JPG ist jedoch in den meisten Fällen zu bevorzugen, das die Bildkomprimierung bei diesem Format die Dateigröße wesentlich verkleinert im Gegensatz zu PNGs. PNGs sollten immer nur dann zum Einsatz kommen, wenn ein Bild eine transparente Fläche hat.

Farb-Profil

Für die Darstellung von Bildern im Web, sollte nach Möglichkeit immer das sRGB-Format verwendet werden. Dieser Farbraum ist für die Darstellung auf Bildschirmen optimiert und wird hier die beste Farbdarstellung für Ihrer Bilder bieten.

 

Eine einfache Anleitung, wie Sie Bilder in der Mediathek zuschneiden können finden Sie hier.