Unterschiedliche Auflösungen für verschiedene Pixeldichten (z. B. „Retina“) können eingerichtet werden, indem man in den Bildgrößen-Einstellungen die gewünschten Pixeldichten einträgt. Wenn Sie für eine Größe von 100x100 die Pixeldichten 0.5x, 1x, 2x vergeben, wird automatisch für jedes Bild, das dieser Größe zugeordnet ist ein 50x50, 100x100 und 200x200 großes Bild erzeugt.
Um zusätzlich verschieden breite Bildschirme zu unterstützen, muss das sizes-Attribut in den Einstellungen vergeben werden. Diese Einstellung teilt dem Browser mit, in welcher Breite das Bild angezeigt wird.
Wenn das Bild immer in voller Breite des Fensters angezeigt wird, tragen Sie 100vw ein. Wenn ein Bild z. B. auf kleineren Bildschirmen in voller Breite angezeigt wird und in größeren immer 500 Pixel breit ist, tragen Sie (max-width: 600px) 100vw, 500px ein. Auch mehrere Media-Queries können verwendet werden z. B. (max-width: 600px) 100vw, (max-width: 900px) 60vw, 500px.
Die Einstellung folgt dem Schema: Media-Query in Klammern (optional), gefolgt von Wert und Einheit. Mehrere Angaben getrennt durch Komma.
Wenn nun bei einer 100x100-Bildgröße unter Sizes 100vw und unter Pixeldichte 0.5x, 1x, 2x eingestellt ist, erzeugt Contao ein 50x50, 100x100 und 200x200 großes Bild und der Browser entscheidet anhand der Sizes-Einstellung und der Daten des Bildschirms welches dieser Bilder geladen wird.