Die Funktionen {picture} und {value type="image"} (auch media) erzeugen implizit ein PICTURE HTML Element. Dieses ermöglicht Ihnen im EGOCMS mit nur einer Bild Quelle das Bild auf mehreren Anzeigen für unterschiedliche Endgeräte optimal darzustellen. Dazu liefert das HTML Element dem Browser die Information bei welchen Anzeigen das Bild in welcher Breite verwendet werden soll. Für Anzeigen mit höherer Pixeldichte wird das Bild in größeren Dimensionen angeboten und runtergerechnet (Stichwort Retina Ready). Letzteres ist natürlich nur dann möglich, wenn das Originalbild in der errechneten Dimension auch möglich ist und nicht größer werden würde als das Original.
Ein Responsive Design hat in der Regel einige Fixwerte für Breiten der Anzeige. So werden Bilder bei z.B. einer Anzeige von maximal 480 Pixeln kleiner dargestellt als für Anzeigen mit einer größeren Breite. Diese Fixwerte sind standardmäßig 480, 767 und 990 Pixel.
Anzeigen mit einer Breite über 990 Pixel werden automatisch unterstützt und zeigen das Bild in seiner größten Breite.
Sollte Ihr Design andere Fixwerte verwenden, können Sie in der conf.json Datei die Eigenschaft srcset überschreiben:
{
"srcset": "320,480,768,992,1170"
}
Die Werte sollten sich jeweils auf die maximale Breite einer Anzeige beziehen.
Optional kann den Funktionen {picture} und {value} auch der Parameter srcset übergeben werden, um den Wert nur für ein bestimmtes Bild zu überschreiben.
Das System weiß nun, zu welchen Fixwerten der Anzeige sich die Darstellung von Bildern ändern kann. Damit nun die Bilder im Design auch die optimalen Bild URLs für die unterschiedlichen Anzeigen generieren können, muss der Parameter widths übergeben werden (andernfalls werden über den Wert aus srcset automatisch Werte generiert).
Der Wert für widths ist dabei eine kommaseparierte Liste mit Breiten für das Bild für die jeweiligen Anzeigen. Wenn Sie wie im Beispiel fünf Fixwerte für Anzeigen haben, dann sollte in widths eine Liste von fünf Breiten übergeben werden (werden weniger übergeben, füllt das System die restlichen Werte automatisch auf). Welche Werte das genau sind, hängt von Ihrem Design ab und wie das Bild verwendet wird. Im genannten Beispiel könnten die Werte wie folgt aussehen:
{picture src="image.png" widths="300,460,748,476,268"}
Dieses Beispiel würde ein PICTURE HTML Element erzeugen, welches dem Browser folgende Informationen gibt:
- Bei einer Breite von max. 320 Pixel, zeige das Bild mit einer Breite von 300 Pixel an.
- Bei einer Breite von max. 480 Pixel, zeige das Bild mit einer Breite von 460 Pixel an.
- Bei einer Breite von max. 768 Pixel, zeige das Bild mit einer Breite von 748 Pixel an.
- Bei einer Breite von max. 992 Pixel, zeige das Bild mit einer Breite von 476 Pixel an.
- Bei einer Breite von max. 1170 Pixel, zeige das Bild mit einer Breite von 268 Pixel an.
Alle Anzeigen mit einer Breite über dem letzten Wert aus srcset (hier 1170) werden natürlich automatisch auch unterstützt (der letzte Wert wird verwendet):
- Bei einer Breite von mehr als 1170 Pixel, zeige das Bild mit einer Breite von 268 Pixel an.
Sie können den letzten Wert auch selbst setzen, das wäre in diesem Beispiel der sechste Wert für widths, z.B. "300,460,748,476,268,500".
Falls die Anzeige des Endgeräts eine höhere Pixeldichte (DPR) unterstützt, wählt der Browser automatisch jeweils die höher auflösende Bild URL. Unterstützt werden die DPR Faktoren 2x, 3x und 4x.