============
Introduction
============

What does it do?
================

Media Utils provides responsive image rendering for TYPO3 and bundles reusable
Fluid partials and ViewHelpers for working with image and media files.

It can render classic responsive ``img`` markup with ``srcset`` and ``sizes``
or ``picture`` markup with breakpoint-specific ``source`` tags. The output is
configured through TYPO3 site sets and TypoScript settings.

Main features
=============

* Responsive image rendering with ``srcset`` and ``sizes``.
* Optional ``picture`` tag rendering with configurable breakpoints.
* Native lazy loading via ``loading="lazy"``.
* JavaScript lazy loading support via ``data-src`` and ``data-srcset``.
* Optional placeholder images, including inline base64 placeholders.
* Configurable output file extension, for example WebP.
* Configurable ignored file extensions, for example SVG and GIF.
* Width limits to avoid unnecessary image upsizing.
* TYPO3 v14 batch image processing when available.
* Reusable ``Utils/Media`` partial for images and videos.
* Own Fluid ViewHelpers under the ``Madj2k\MediaUtils`` namespace.
* File helper ViewHelpers for FAL properties, relations and crop-variant CSS classes.
* Default and Bootstrap site sets.
* Backend-editable settings via ``settings.definitions.yaml``.
* Compatibility with projects migrating from ``EXT:sms_responsive_images``.

Rendering concept
=================

The extension separates the rendering into small services:

* the ViewHelpers collect arguments and settings,
* the responsive image service prepares image options,
* generators create ``srcset`` candidates and placeholders,
* renderers build ``img``, ``source`` and ``picture`` tags,
* TYPO3's renderer registry is used for non-image media files.

This keeps Fluid templates concise while still allowing detailed control over
individual images or media elements.