Responsive Images

TYPO3 + T3Bootstrap liefern für jedes Bild ein <picture>-Element mit mehreren <source>-Varianten aus — passend zum Viewport, mit modernem Bildformat (WebP/AVIF) und Lazy-Loading. Editor pflegt nur das Bild im Backend, das Template macht den Rest.

srcset/sizes — Browser wählt das passende Bild

Das Template generiert für jedes Bild mehrere Größen (z. B. 320w, 576w, 768w, 992w, 1200w, 1400w, 1920w). Der Browser lädt automatisch die kleinste Variante, die zur aktuellen Viewport-Breite und Pixel-Dichte (Retina) passt.

Mit den DevTools (Netzwerk-Tab → Filter „Img") siehst du nur die geladene Variante. Inspector zeigt das vollständige <picture>-Markup.

Live-Beispiel: Picture-Element mit srcset

Inspect das Bild oben (Rechtsklick → Untersuchen). Du siehst ein <picture> mit mehreren <source>-Elementen + srcset-Attributen pro Breakpoint.

Breakpoints — imagecols_xs … imagecols_xxl

Pro Breakpoint lässt sich die Anzahl der Bilder pro Reihe einstellen. Daraus berechnet das Template die jeweilige Bildbreite und liefert die passende Variante:

imagecols_xs

Mobile (≤ 575 px) — typisch 1 Bild pro Reihe

imagecols_sm

Small (≥ 576 px) — 1–2

imagecols_md

Medium (≥ 768 px) — 2–3

imagecols_lg

Large (≥ 992 px) — 3–4

imagecols_xl

X-Large (≥ 1200 px) — 4–6

imagecols_xxl

XX-Large (≥ 1400 px) — 4–6

Wichtig: Das JSON-Feld imagecols_grid muss alle Breakpoints definieren — ein fehlender Wert führt zu Single-Column-Fallback.

Modernes Bildformat — WebP / AVIF

Das Template konvertiert hochgeladene JPGs/PNGs automatisch in WebP (60–80 % kleiner als JPG) oder AVIF (50 % kleiner als WebP) — je nach Setting.

Steuerung über die TypoScript-Konstante plugin.tx_t3bcore.settings.preferredImageFormat:

jpg (Default)

Originalformat ohne Konvertierung — maximale Kompatibilität

webp

Empfohlener Standard, ~95 % aller modernen Browser

avif

Modernster Codec, Browser-Support steigt schnell (Stand 2026: 90 %+)

Lazy-Loading

Alle Bilder unterhalb des sichtbaren Viewports erhalten loading="lazy" automatisch. Der Browser lädt sie erst beim Scrollen — spart Initial-Bandbreite und Time-to-Interactive.

Erstes Hero-Bild auf einer Seite (LCP-Kandidat) bleibt absichtlich eager geladen, damit Largest-Contentful-Paint nicht künstlich verzögert wird.

Crop-Variants

Editor kann pro Bild verschiedene Crop-Variants definieren (TYPO3-Standard). Default-Variants im T3Bootstrap-Template:

default

Freier Crop für Standard-Layouts (max-Width 1920 px)

square

1:1 Quadrat — für Avatare, Cards

flat

2:1 Landscape — für Hero-Bilder

Hero crop-variants

xs (576), sm (768), md (992), lg (1400), xl (1920) — Mobile-First-Crops für unterschiedliche Bildausschnitte je Viewport

Editor lädt einmal das Original hoch, croppt im TYPO3-Image-Editor per Drag&Drop — das Template wählt die richtige Variante.

Was der Editor pflegt — und was nicht

Editor

Bild hochladen, Spaltenzahl (imagecols_*) wählen, optional Crop-Variants definieren

Template (automatisch)

srcset-Generierung, WebP/AVIF-Konvertierung, Lazy-Loading-Attribut, picture-Markup mit allen Breakpoints

Site-Settings

plugin.tx_t3bcore.settings.preferredImageFormat (jpg/webp/avif) — projektweite Default-Konvertierung