12 Möglichkeiten, responsive TYPO3-Bilder zu erstellen!

TYPO3 unterstützt mehrere Ansätze, abhängig vom benötigten Anpassungsgrad.

Diese Übersicht hilft Entwicklern und Integratoren, schnell den am besten geeigneten Ansatz für responsive Bilder in TYPO3-Projekten auszuwählen.

2. Verwendung des <img srcset> Attributs

Eine weitere gängige Möglichkeit, responsive Bilder in TYPO3 zu implementieren, ist die Verwendung des srcset Attributs innerhalb des <img> Tags. Dadurch kann der Browser die am besten geeignete Bildgröße basierend auf der Bildschirmbreite und der Auflösung des Geräts auswählen.

In TYPO3 Fluid-Templates kann das srcset-Attribut über additionalAttributes hinzugefügt werden, während die Bild-URLs mit dem <f:uri.image> ViewHelper erzeugt werden.

Beispiel: Verwendung von  srcset mit <f:media>

<!-- Syntax of srcset using additionalAttributes -→

<f:media
   class="image-embed-item"
   file="{file}"
   width="{dimensions.width}"
   height="{dimensions.height}"
   alt="{file.alternative}"
   title="{file.title}"
   loading="{settings.media.lazyLoading}"
   additionalAttributes="{srcset: '{f:uri.image(image: file, maxWidth: 768)} 768w,
                                   {f:uri.image(image: file, maxWidth: 990)} 990w,
                                   {f:uri.image(image: file, maxWidth: 1200)} 1200w,
                                   {f:uri.image(image: file, maxWidth: 1440)} 1440w,
                                   {f:uri.image(image: file, maxWidth: 1900)} 1900w',
                          sizes: '(min-width: 1200px) 50vw, 100vw'}"
/>

Output-Beispiel

<img
   srcset="/fileadmin/_processed_/6/e/csm_image_01_8159d1e3b0.jpg 768w,
           /fileadmin/_processed_/6/e/csm_image_01_19d1039365.jpg 990w,
           /fileadmin/_processed_/6/e/csm_image_01_9cee8957cf.jpg 1200w,
           /fileadmin/_processed_/6/e/csm_image_01_922756210c.jpg 1440w,
           /fileadmin/_processed_/6/e/csm_image_01_0e137c815f.jpg 1900w"
   sizes="(min-width: 1200px) 50vw, 100vw"
   class="image-embed-item"
   title="Title Text"
   alt="Alt Text"
   src="/fileadmin/_processed_/6/e/csm_image_02_38sd8s8776.jpg"
   loading="lazy"
   width="600"
   height="337"
>

Tipps

• Das srcset Attribut hilft Browsern, die optimale Bildgröße für verschiedene Geräte zu laden.
• TYPO3 erzeugt automatisch verarbeitete Bilder über die FAL-Bildverarbeitung.
• Bildbreitenlimits können über TypoScript-Konstanten konfiguriert werden:

styles.content.textmedia.maxW
styles.content.textmedia.maxWInText

3. Verwendung des <img data-srcset>-Attributs

Einige TYPO3-Integratoren bevorzugen die Verwendung von data-srcset anstelle von srcset, insbesondere beim Einsatz von Lazy Loading mit JavaScript-Bibliotheken wie LazySizes. Bei diesem Ansatz werden Bildquellen in data-*-Attributen gespeichert und erst geladen, wenn das Bild in den sichtbaren Bereich (Viewport) gelangt.

Diese Methode hilft, das Laden von Bildern zu verzögern und verbessert die anfängliche Seitenladegeschwindigkeit.

Beispiel: Verwendung von data-srcset für Lazy Loading

<img
   class="image-embed-item lazy"
   data-src="{f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1168)}"
   data-srcset="{f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 768)} 768w,
                {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 990)} 990w,
                {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1200)} 1200w,
                {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1440)} 1440w,
                {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1900)} 1900w"
   data-sizes="(min-width: 1200px) 1168px, 100vw"
   alt="{file.alternative}"
   title="{file.title}"
   width="{dimensions.width}"
   height="{dimensions.height}"
/>

Tipps

• data-srcset wird häufig in Kombination mit Lazy-Loading-Bibliotheken verwendet.
• Bilder werden nur bei Bedarf geladen, was die Seitenladegeschwindigkeit verbessert.
• TYPO3s <f:uri.image> ViewHelper erzeugt automatisch verarbeitete Bildversionen.

4. Verwendung des <picture> Tags

Das HTML <picture>-Element ist eine weitere effektive Methode, um responsive Bilder in TYPO3 zu implementieren. Es ermöglicht Entwickler:innen, mehrere Bildquellen für unterschiedliche Bildschirmgrößen oder Bedingungen zu definieren, während der Browser automatisch die am besten geeignete Quelle auswählt.

Dieser Ansatz ermöglicht eine bessere Kontrolle über Haltepunkte, Bildformate und das responsive Verhalten.

Beispiel: Verwendung von <picture> für responsive Bilder

<picture>
   <source
       media="(min-width: 990px)"
       srcset="{f:uri.image(image: file, maxWidth: 1200)}"
   />

   <source srcset="{f:uri.image(image: file, maxWidth: 768)}" />
   <img src="{f:uri.image(image: file, maxWidth: 768)}" alt="{file.alternative}" />
</picture>

Tipps

• Nützlich, um verschiedene Bildquellen für unterschiedliche Breakpoints zu definieren.
• Funktioniert gut beim Bereitstellen unterschiedlicher Formate oder Bildgrößen.
• Das <img>-Element dient als Ausweichlösung für Browser, die <picture> nicht unterstützen.

5. Verwendung von TypoScript SourceCollection

In einigen TYPO3-Implementierungen können responsive Bilder auch direkt über TypoScript-Konfiguration erzeugt werden. Dieser Ansatz ermöglicht Integratoren, mehrere Bildquellen und responsive Breakpoints mit sourceCollection zu definieren.

Obwohl heutzutage oft neuere Ansätze wie DataProcessors bevorzugt werden, ist das TypoScript-basierte Rendering in bestimmten Szenarien weiterhin nützlich.

Beispiel: Verwendung von TypoScript sourceCollection

10 = IMAGE
10 {
 file = fileadmin/sample.jpg
 file.width = 3141

 layoutKey = default
 layout {

   srcset {
     element = <img src="###SRC###" srcset="###SOURCECOLLECTION###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
     source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
   }
 }

 sourceCollection {
   small {
     width = 800
     srcsetCandidate = 800w
     mediaQuery = (min-device-width: 800px)
     dataKey = small
   }
 }
}

20 < 10
20.layoutKey = srcset

Tipps

• Ermöglicht die direkte Generierung von responsive Bildern über TypoScript.
• Nützlich für Projekte, die benutzerdefinierte Rendering-Logik ohne Template-Änderungen benötigen.
• Mehrere Breakpoints und Bildgrößen können innerhalb der TYPO3 Konfiguration definiert werden.

6. Verwendung von TypoScript  in renderObj

Eine weitere Möglichkeit, responsive Bilder in TYPO3 zu implementieren, ist die Verwendung von TypoScript mit renderObj. Dieser Ansatz erlaubt es Entwickler:innen, ein wiederverwendbares TypoScript-Objekt für das Bild-Rendering zu erstellen und es dann dynamisch innerhalb von Fluid-Templates aufzurufen.

Durch die Definition eines benutzerdefinierten TypoScript-Objekts können Sie Bildquellen, Breakpoints und das Rendering-Verhalten zentral steuern.

Beispiel: TypoScript-Objekt für responsive Bilder vorbereiten

lib.objResponsiveImage {
   default = IMAGE
   default {
       file {
           import.current = 1
           treatIdAsReference = 1
       }

       altText.field = alternative
       titleText.field = title
       params = class="image-embed-item"

       layoutKey = srcset
       layout {

           srcset {
               element = <img src="###SRC###" srcset="###SOURCECOLLECTION###" sizes="100vw" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###>
               source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
           }

           sourceCollection {
               mobile {
                   maxW = 314
                   srcsetCandidate = 314w
                   dataKey = mobile
               }
           }
       }
   }
}

Objekt über renderObj zuweisen

renderObj < lib.objResponsiveImage.default
renderObj {

   sourceCollection {
       tablet {
           width = 768
           srcsetCandidate = 768w
           mediaQuery = (max-device-width: 768px)
           dataKey = tablet
       }
   }
}

In TYPO3 Fluid rendern

<f:cObject
   typoscriptObjectPath="lib.objResponsiveImage.default"
   data="{file.uid}"
/>

7. Definieren von cropVariants in TCEFORM

TYPO3 ermöglicht Entwickler:innen, benutzerdefinierte Crop-Varianten für Bilder zu definieren, wodurch Redakteur:innen mehr Flexibilität bei der Vorbereitung von Bildern für unterschiedliche Layouts wie Mobil, Tablet oder Karten erhalten. Mit der TCEFORM-Konfiguration können mehrere Crop-Presets erstellt werden, die Redakteur:innen direkt im TYPO3 backend auswählen können.

Dies hilft, konsistente Bildverhältnisse über responsive Layouts hinweg beizubehalten.

Beispiel: Crop-Varianten in TCEFORM definieren

TCEFORM {
   sys_file_reference.crop.config.cropVariants {
       default {
           title = Alle (Standard)
           selectedRatio = NaN
           allowedAspectRatios {
               NaN {
                   title = Frei
                   value = 0.0
               }

               4:3 {
                   title = 4:3
                   value = 1.333333
               }
           }
       }

       card {
           title = Card
           selectedRatio = 16:9
           allowedAspectRatios {
               16:9 {
                   title = 16:9
                   value = 1.777777778
               }
           }
       }
   }
}

Crop-Variante in TYPO3 Fluid rendern

<img
   class="lazy"
   data-src="{f:uri.image(src: file, treatIdAsReference: 1, maxWidth: 768, cropVariant: 'card')}"
   data-srcset="{f:uri.image(src: file, treatIdAsReference: 1, maxWidth: 768, cropVariant: 'card')} 768w,
                {f:uri.image(src: file, treatIdAsReference: 1, maxWidth: 1900, cropVariant: 'card')} 1200"
   data-sizes="..."
   alt="..."
/>

Tipps

• Hilft Redakteur:innen, vordefinierte Crop-Verhältnisse direkt im TYPO3-Backend auszuwählen.
• Gewährleistet konsistente Bildlayouts über responsive Breakpoints hinweg.
• Funktioniert gut mit srcset, Lazy Loading und anderen responsive Rendering-Methoden.

8. Verwendung von EXT:vhs

Die Extension EXT:vhs ist eine beliebte TYPO3-Fluid-Extension, die zusätzliche ViewHelpers für die fortgeschrittene Template-Entwicklung bereitstellt. Sie erweitert die Fluid-Funktionalitäten von TYPO3 und bietet bequeme Helfer für die Medienverarbeitung, einschließlich responsive Bilder.

Mit dem <v:media.image> ViewHelper können Entwickler:innen problemlos mehrere Bildgrößen über das srcset-Attribut definieren.

Beispiel: Verwendung von EXT:vhs für responsive Bilder

<v:media.image
   src="path/to/media.jpg"
   width="123"
   height="123"
   treatIdAsReference="1"
   srcset="314, 768, 990, 1200"
   srcsetDefault="768"
/>

Tipps

• Bietet zusätzliche Fluid-ViewHelpers über den TYPO3 Kern hinaus.
• Vereinfacht die Konfiguration von responsive Bildern mit srcset.
• Wird von TYPO3 Entwicklern häufig für fortgeschrittenes Fluid-Templating verwendet.

9. Verwendung von EXT.sms_responsive_images

Die Extension EXT:sms_responsive_images ist eine weit verbreitete TYPO3 Extension, die die Erstellung von responsive Bildern vereinfacht. Sie stellt benutzerdefinierte ViewHelpers bereit, die responsives Bild-Markup basierend auf TYPO3s Bild-Cropping- und Verarbeitungsfunktionen erzeugen.

Mit dieser Extension können Entwickler Bildgrößen, Breakpoints und das Lazy-Loading-Verhalten direkt in Fluid-Vorlagen festlegen.

Beispiel: Verwendung von EXT:sms_responsive_images

<sms:image image="{image}" srcset="400, 600, 800, 1000" />

<sms:image image="{image}" srcset="1x, 2x" />

<sms:image
   image="{image}"
   sizes="(min-width: 1200px) 600px, (min-width: 900px) 800px, 100vw"
/>

<sms:image
   image="{image}"
   breakpoints="{
       0: {'cropVariant': 'desktop', 'media': '(min-width: 1000px)', 'srcset': '1000, 1200, 1400, 1600'},
       1: {'cropVariant': 'mobile', 'srcset': '400, 600, 800, 1000, 1200, 1400, 1600'}
   }"
/>

<sms:image image="{image}" srcset="400, 600" lazyload="true" />

Tipps

• Ermöglicht flexible Konfiguration von responsive Breakpoints und Bildgrößen.
• Integriert sich in TYPO3's Bild-Cropping-System.
• Unterstützt Funktionen wie Lazy Loading und dichtebasierte Bilddarstellung

10. Verwendung von EXT:fluid_styled_responsive_images

Die Extension EXT:fluid_styled_responsive_images erweitert TYPO3s fluid_styled_content, um die Unterstützung für responsive Bilder zu bieten. Sie ermöglicht Entwickler:innen, responsive Bildquellen über TypoScript sourceCollection zu konfigurieren, was die Definition unterschiedlicher Bildgrößen für verschiedene Bildschirmbreiten erleichtert.

Dieser Ansatz integriert sich direkt in TYPO3s Standard-Content-Elemente und fügt gleichzeitig Unterstützung für responsive Bilder hinzu.

Beispiel: Responsive Bilder mit TypoScript konfigurieren

tt_content.textmedia {
   settings {
       responsive_image_rendering {
           layoutKey = srcset

           sourceCollection {
               10 {
                   dataKey = desktop
                   width = 1260m
                   srcset = 1260w
               }

               20 {
                   dataKey = tablet
                   width = 960m
                   srcset = 960w
               }
           }
       }
   }
}

Tipps

• Erweitert fluid_styled_content um responsive Bildfunktionen.
• Nutzt TypoScript sourceCollection zur Definition von Breakpoints.
• Nützlich für Projekte, die auf Standard-TYPO3-Content-Elemente setzen.

11. EXT:responsive-images

EXT:responsive-images ist eine weitere TYPO3-Extension, die responsive Bildunterstützung für Fluid-Templates hinzufügt. Sie arbeitet zusammen mit TYPO3s MediaViewHelper und ermöglicht Integratoren, Bildvarianten, Breakpoints und Bildqualitäts-Einstellungen zu definieren.

Die Extension berücksichtigt auch TYPO3-Crop-Varianten und kann unterschiedliche Bildqualitäten für verschiedene Bildschirmgrößen generieren.

Beispiel: Verwendung von EXT:responsive-images

<r:loadRegister key="IMAGE_VARIANT_KEY" value="default">
   <f:media file="{file}" />
</r:loadRegister>

Beispiel für Responsive Rendering

<picture>
   <source media="(max-width: 40em)" srcset="320x180-q65.jpg 1x, 640x360-q40.jpg 2x" />
   <source media="(min-width: 64.0625em)" srcset="1920x1080-q80.jpg 1x" />
   <source media="(min-width: 40.0625em)" srcset="1024x576-q80.jpg 1x, 2048x1152-q40.jpg 2x" />
   <img src="1920x1080.jpg" alt="Example alternative" width="1920" height="1080" />
</picture>

Tipps

• Fügt Fluid-Templates responsive Bildfunktionen hinzu.
• Unterstützt Crop-Varianten und verschiedene JPEG-Qualitätsstufen.
• Ermöglicht Integratoren, benutzerdefinierte Bildvarianten für responsive Layouts zu definieren.

12. Verwendung eines benutzerdefinierten TYPO3 API ImageProcessorCore (PHP)

Bei anspruchsvollen TYPO3-Projekten können Entwickler responsive Bilder mithilfe eines benutzerdefinierten DataProcessors implementieren, der auf der ImageProcessorCore-API von TYPO3 basieren. Dieser Ansatz ermöglicht die vollständige Kontrolle darüber, wie Bilder verarbeitet, in der Größe angepasst und auf verschiedenen Bildschirmgrößen dargestellt werden.

Durch die Erweiterung des Core-ImageProcessors können Entwickler:innen Bildmaße dynamisch berechnen, responsive Breakpoints definieren und optimierte Formate wie WebP und JPEG ausgeben.

Beispiel: benutzerdefinierter ImageProcessor (PHP)

<?php
declare(strict_types=1);

namespace YourVendor\YourTemplate\DataProcessing;

use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer;
use TYPO3\CMS\Frontend\DataProcessing\ImageProcessor as ImageProcessorCore;

class ImageProcessor extends ImageProcessorCore
{
   protected $maxWidths = [
       'full' => 1600,
       'beside' => 800
   ];

   public function process(
       ContentObjectRenderer $cObj,
       array $contentObjectConfiguration,
       array $processorConfiguration,
       array $processedData
   ) {
       $processedData = parent::process($cObj, $contentObjectConfiguration, $processorConfiguration, $processedData);
       return $processedData;
   }
}

Beispiel für Responsive Rendering (Fluid Template)

<picture>

<f:if condition="{dimensions.maxWidth} > 1201">
<source srcset="{f:uri.image(image:file, maxWidth: 1601, fileExtension: 'webp')}" type="image/webp">
<source srcset="{f:uri.image(image:file, maxWidth: 1600, fileExtension: 'jpg')}" type="image/jpeg">
</f:if>

<f:if condition="{dimensions.maxWidth} > 769">
<source srcset="{f:uri.image(image:file, maxWidth: 1201, fileExtension: 'webp')}" type="image/webp">
<source srcset="{f:uri.image(image:file, maxWidth: 1200, fileExtension: 'jpg')}" type="image/jpeg">
</f:if>

<img
class="image-embed-item"
title="{file.title}"
alt="{file.description -> f:format.nl2br()}"
src="{f:uri.image(image:file, maxWidth: 1600)}"
width="{dimensions.width}"
height="{dimensions.height}"
loading="{settings.media.lazyLoading}" />

</picture>

Den benutzerdefinierten Datenprozessor zuweisen

tt_content.textmedia.dataProcessing {
 20 = YourVendor\YourTemplate\DataProcessing\ImageProcessor
}

Tipps

• Bietet vollständige Kontrolle über TYPO3-Bildverarbeitungslogik.
• Ermöglicht fortgeschrittene responsive Setups mit benutzerdefinierten Breakpoints und Formaten.
• Ideal für komplexe TYPO3-Projekte, die maßgeschneidertes Bild-Rendering erfordern.

WebP ist ein modernes Bildformat, das kleinere Dateigrößen bei guter visueller Qualität liefert und so die Performance von TYPO3 Website verbessert.

WebP Unterstützung im TYPO3-Core

Seit TYPO3 v10.3 können WebP-Bilder mit Fluid ViewHelpers wie <f:image>, <f:media> und <f:uri.image> generiert werden.

<picture>
   <source srcset="{f:uri.image(image: file, treatIdAsReference: true, fileExtension: 'webp')}" type="image/webp"/>
   <source srcset="{f:uri.image(image: file, treatIdAsReference: true, fileExtension: 'jpg')}" type="image/jpeg"/>
   <f:image alt="{file.alternative}" image="{file}" treatIdAsReference="true"/>
</picture>

Browser, die WebP unterstützen, laden das optimierte Bild, während andere auf JPEG zurückfallen.

ImageMagick für WebP-Konvertierung konfigurieren

TYPO3 nutzt ImageMagick oder GraphicsMagick für die Bildverarbeitung

• Stellen Sie sicher, dass Ihre ImageMagick-Installation WebP-Konvertierung unterstützt
• TYPO3 generiert verarbeitete WebP-Bilder automatisch
• Hilft, die Kompression und Seiten-Performance zu verbessern

WebP-Dateiendungen in TYPO3 erlauben

Aktivieren Sie WebP-Uploads, indem Sie die Erweiterung in der TYPO3-Konfiguration zulassen:

$GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] = 'gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg,webp';

Selbst bei den integrierten TYPO3-Tools können falsche Konfigurationen die Performance verringern.

Fehlendes sizes-Attribut

• Browser laden möglicherweise größere Bilder als nötig
• Definieren Sie immer viewport-basierte Größen wie:
  (min-width: 1200px) 50vw, 100vw

Falsche Breakpoints

• Verwenden Sie Breakpoints basierend auf den tatsächlichen Layout-Breiten
• Testen Sie auf Desktop, Tablet und Mobilgeräten

Zu große Bilder

• Vermeiden Sie das Ausliefern großer Desktop-Bilder auf Mobilgeräten
• Nutzen Sie TYPO3 Bild verarbeitung, um mehrere Größen zu erzeugen

Ignorieren von Lazy Loading

• Verzögert das Laden von Bildern, bis sie sichtbar sind
• Verbessert die initiale Seitenladegeschwindigkeit
• Wird nativ in TYPO3 Fluid ViewHelpers unterstützt

Die Implementierung responsiver Bilder ist für die Bereitstellung schneller, moderner und gerätefreundlicher TYPO3-Websites unerlässlich. Dank des flexiblen Ökosystems von TYPO3 stehen Entwicklern und Integratoren zahlreiche Optionen zur Verfügung, von zentralen Fluid-ViewHelpern und TypoScript-Konfigurationen bis hin zu Erweiterungen und benutzerdefinierten PHP-Implementierungen.

Die Wahl der richtigen Methode hängt von Ihren Projektanforderungen, Leistungszielen und dem erforderlichen Grad an Anpassung ab. Durch die Kombination von Techniken für responsive Bilder mit modernen Formaten und Optimierungsverfahren können TYPO3-Websites eine bessere Leistung, ein verbessertes Nutzererlebnis und stärkere SEO-Ergebnisse erzielen.

Entdecken Sie die in diesem Leitfaden vorgestellten Ansätze und wenden Sie die Methode an, die am besten zu Ihrem TYPO3-Projekt passt.