zum Hauptinhalt springen

Bildgrößen

Bildgrößen
Bildgrößen definieren

Neben der Bezeichnung kann einer Bildgröße auch eine CSS Klasse vergeben werden. Die Basisangabe für Breite und Höhe eines Bildes sollte immer die größten, benötigten Ausmaße angeben, auch wenn auflösungsabhängige Größen angegeben werden. Nur wenn Sie sowohl Breite, als auch Höhe festlegen, spielt der gewünschte Ausschnitt im unteren Bereich der Eingabemaske eine Rolle. Die Bildgröße, die als Standard definiert wird, wird in den Auswahllisten der Elemente vorausgewählt, sofern dem Elementtyp über "Bildgrößenzuordnung" keine anderweitige Bildgröße zugewiesen wurde.

Verzögertes Laden sorgt dafür, dass Bilder mit dieser Bildgröße erst geladen werden, wenn sie sichtbar werden (durch scrollen oder Aufklappen eines Akkordeons). Das ist nützlich, wenn viele Bilder auf einer Seite angezeigt werden, um Ladezeiten zu verringern. Verwendet wird hierfür intern das HTML5 "loading" Attribut.

Die Größenverdopplung greift, wenn das verwendete Display eine größere Pixeldichte als ein Standarddisplay aufweist. Das ist bei fast allen Smart Phones und Tablets der Fall, aber teilweise verfügen auch große Bildschirme heutzutage über hochauflösende Displays, was das Sparen bei Bildgrößen nicht unbedingt leichter macht.

Die auflösungsabhängigen Größenanpassungen sind hilfreich, um Ladezeiten zu minimieren. Je nach momentaner Größe und Pixeldichte des Browser Tabs wird dynamisch die passende Bildgröße für das Bild verwendet. Technisch wird hier kein Javascript verwendet, sondern es wird das picture-tag mit scrset Attribut angewendet. Wenn Sie viele Bilder auf einer Seite haben und aufwendige Bildgrößenangaben hinterlegen, kann das erste Laden einer Seite im Frontend etwas länger dauern, da die notwendigen Bildgrößen im Hintergrund einmalig im Cache angelegt werden müssen. Das können maximal zwölf Varianten pro Bild werden. Im Cache Ordner bleiben die Versionen verfügbar, bis das Original entweder gelöscht, oder ersetzt wird.