Responsive Images

TYPO3 + T3Bootstrap generate a -element with multiple variants—tailored to the viewport, in a modern image format (WebP/AVIF), and with lazy loading. The editor simply manages the image in the backend; the template handles the rest.

srcset/sizes — The browser selects the appropriate image

The template generates multiple sizes for each image (e.g., 320w, 576w, 768w, 992w, 1200w, 1400w, 1920w). The browser automatically loads the smallest version that matches the current viewport width and pixel density (Retina).

Using DevTools (Network tab → “Img” filter), you’ll only see the loaded version. The Inspector displays the complete markup.

Live Example: Picture Element with srcset

Inspect the image above (right-click → Inspect). You'll see an with several elements + srcsetattributes per breakpoint.

Breakpoints — imagecols_xs … imagecols_xxl

For each breakpoint, you can set the number of images per row. The template then calculates the corresponding image width and returns the appropriate version:

imagecols_xs: Mobile (≤ 575 px) — typically 1 image per row
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

Important: The JSON field imagecols_grid must define all breakpoints—a missing value results in a single-column fallback.

Modern Image Formats — WebP / AVIF

The template automatically converts uploaded JPGs/PNGs to WebP (60–80% smaller than JPG) or AVIF (50% smaller than WebP)—depending on the settings.

Controlled via the TypoScript constant plugin.tx_t3bcore.settings.preferredImageFormat:

jpg (Default): Original format without conversion — maximum compatibility
webp: Recommended standard, ~95% of all modern browsers
avif: State-of-the-art codec; browser support is growing rapidly (as of 2026: 90%+)

Lazy Loading

All images below the visible viewport are loaded loading="lazy" automatically. The browser loads them only when the user scrolls—saving initial bandwidth and reducing time to interactivity.

The first hero image on a page (LCP candidate) is intentionally loaded eagerly so that Largest Contentful Paint is not artificially delayed.

Crop Variants

The editor can define different crop variants for each image (TYPO3 standard). Default variants in the T3Bootstrap template:

default: Free crop for standard layouts (max-width 1920 px)
square: 1:1 Square — for avatars, cards
flat: 2:1 Landscape — for hero images
Hero crop variants: xs (576), sm (768), md (992), lg (1400), xl (1920) — mobile-first crops for different image sections based on the viewport

The editor uploads the original image once, then crops it in the TYPO3 Image Editor using drag-and-drop; the template selects the correct variant.

What the editor maintains — and what it doesn't

Editor: Upload image, select number of columns (imagecols_*), optionally define crop variants
Template (automatic): srcset generation, WebP/AVIF conversion, lazy-loading attribute, `picture` markup with all breakpoints
Site Settings: plugin.tx_t3bcore.settings.preferredImageFormat (jpg/webp/avif) — project-wide default conversion