User Experience, Design, & Graphical Flexibility

Browser-native Lazy-loading for Images

Introduced in version 10.4

Of the resources needed to serve up a modern web page, images pack the biggest punch in terms of file size. To help, lazy-loading for images has been adopted as a standard to improve load-times, reducing the burden on both servers and users. TYPO3 is the first major content management system that offers lazy-loading out-of-the-box.

Lazy-loading defers loading images, starting with a lightweight placeholder image, and only serving up the higher resolution when it’s needed. For example, if a visitor doesn’t scroll all the way down the page, that media won’t even load. This reduces the amount of data transferred and the processing time. This helps both at the server and client side to make for a faster site and better user experience.

The “loading” attribute for image tags was accepted and published last year as a new HTML standard (see the specification for further technical details). The purpose of this attribute is to instruct browsers if they should load images that are outside the viewport. As browser vendors start adding the support for this feature, TYPO3 v10 LTS already allows integrators and developers to configure/use this functionality.