1.. include:: ../../Includes.txt 2 3======================================================== 4Feature: #90426 - Browser-native lazy loading for images 5======================================================== 6 7See :issue:`90426` 8 9Description 10=========== 11 12TYPO3 now supports the browser-native :html:`loading` HTML attribute in :html:`<img>` tags. 13 14It is set to "lazy" by default for all images within Content Elements rendered 15with Fluid Styled Content. Supported browsers then choose to load these 16images at a later point when the image is within the browsers' viewport. 17 18The configuration option is available via TypoScript constants and 19can be easily adjusted via the TypoScript Constant Editor in the Template module. 20 21Please note that not all browsers support this option yet, but adding 22this property will just be skipped for unsupported browsers. 23 24 25Impact 26====== 27 28TYPO3 Frontend now renders images in content elements with the :html:`"loading=lazy"` 29attribute by default when using TYPO3's templates from Fluid Styled Content. 30 31Using the TypoScript constant :ts:`styles.content.image.lazyLoading`, 32the behavior can be modified generally to be either set to :html:`eager`, 33:html:`auto` or to an empty value, removing the property directly. 34 35The Fluid ImageViewHelper has the possibility to set this option 36via :html:`<f:image src="{fileObject}" treatIdAsReference="true" loading="lazy" />` 37to hint the browser on how the prioritization of image loading should be used. 38 39.. index:: Frontend, ext:fluid_styled_content 40