PHPackages                             derhaeuptling/contao-lazy-images - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. derhaeuptling/contao-lazy-images

AbandonedArchivedContao-module[Utility & Helpers](/categories/utility)

derhaeuptling/contao-lazy-images
================================

Lazy Images delays loading of images in long web pages for Contao Open Source CMS.

3.0.8(6y ago)95.1k4LGPL-3.0+PHPPHP >=5.4.0

Since Aug 25Pushed 6y ago3 watchersCompare

[ Source](https://github.com/derhaeuptling/contao-lazy-images)[ Packagist](https://packagist.org/packages/derhaeuptling/contao-lazy-images)[ RSS](/packages/derhaeuptling-contao-lazy-images/feed)WikiDiscussions master Synced 3w ago

READMEChangelog (7)Dependencies (2)Versions (20)Used By (0)

[![No Maintenance Intended](https://camo.githubusercontent.com/d904056147052e22d8e1c7f46bb50293ed2aeb4c43ead9a2d0cf7a48b46d0562/687474703a2f2f756e6d61696e7461696e65642e746563682f62616467652e737667)](http://unmaintained.tech/)

DEPRECATED
==========

[](#deprecated)

This plugin was made to do two things:

1. lazy load images
2. prevent browser reflow whenever image dimensions become available

Both are now becoming solved by native browser support ... at least partially for now.

1. native lazy loading

    The loading attribute `` brings native lazy loading to the browser.
    As of writing this, it is supported by Google Chrome & Microsoft Edge.
    more info:
    [caniuse.com](https://caniuse.com/#search=lazy%20loading)
    [Firefox has plans for v75](https://bugzilla.mozilla.org/show_bug.cgi?id=1542784)
    [Safari is working on it too](https://bugs.webkit.org/show_bug.cgi?id=200764)
2. native image placeholder

    Img with and height attributes still work perfectly to paint a placeholder into which the image will be loaded.
    But whenever we added responsive css to our images, like by adding `style="width: 100%; height: auto;"`, the browser where unable to paint the placeholder.

    But in the meantime, beginning with Firefox, the broswers now utilize the with and height img attributes to calculate an aspect ratio. With this aspect ratio modern browsers can now paint a placeholder.
    (actually this is the same, what this plugin does and the [intrinsic ratio ](https://alistapart.com/article/creating-intrinsic-ratios-for-video/) trick did back in 2009.)

    Source: [](https://www.youtube.com/watch?v=4-d_SoCHeWE)[https://www.youtube.com/watch?v=4-d\_SoCHeWE](https://www.youtube.com/watch?v=4-d_SoCHeWE)

Thanks for having used this Plugin!

contao-lazy-images
==================

[](#contao-lazy-images)

Contao Plugin for lazyloading images with LazySizes.js without the disturbing reflow of the website, whenever an image is loaded.

Lazyloading images improves the website performance. Images no longer block the window.onload event.
Visible images in the viewport are loaded first and therefore faster.

To prevent the website reflow whenever an image is loaded a the configurable placeholder protects the place the image would take.

Several options are available in the generic contao settings:

- Transparent placeholder
    a tiny transparent data:image placeholder with the correct aspect ratio is inlined.
- Thumbnail placeholder
    a thumbnail data:image placeholder with the correct aspect ratio is inlined.
- Intrinsic ratio (no placeholder needed)
    An intrinsic ratio container is created to preserve the correct dimenions for the loading image.
    This is the fastest and the most correct approach. As intrinsic ratios relay on CSS it may conflict with your theme.
- Intrinsic ratio + thumbnail placeholder

The sizes of the placeholders and thumbnails can be adjusted.

Hint:the picture syntax with its sources is supported since 3.0.0, but only work with thumbails, not with instrinsic ratios.

Why preventing the reflow
-------------------------

[](#why-preventing-the-reflow)

[![Alt text](../screenshot/image.jpg?raw=true)](../screenshot/image.jpg?raw=true)

While the reflow is ugly and consumes computing power it also causes issues with JavaScript layout solutions.

JavaScript libs like Masonry or GreenSock position / layout elements respectively their dimensions.
If anything is changing those dimensions afterwards, like an image that got (lazy)loaded, the calculated layout breaks.

Using inline placeholders prevent those issues upfront.

LazySizes
---------

[](#lazysizes)

[LazySizes](https://github.com/aFarkas/lazysizes) is a high performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

###  Health Score

35

—

LowBetter than 77% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity26

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity67

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~74 days

Recently: every ~106 days

Total

18

Last Release

2320d ago

Major Versions

1.0.6 → 2.0.02017-04-13

2.0.1 → 3.0.02017-10-20

### Community

Maintainers

![](https://www.gravatar.com/avatar/8f738ebbbcb203ec68275ced0f3953f267a6c8e75eaa84d5e4fca383eb75e5cf?d=identicon)[DER HÄUPTLING](/maintainers/DER%20H%C3%84UPTLING)

---

Top Contributors

[![sebastijanr](https://avatars.githubusercontent.com/u/20647163?v=4)](https://github.com/sebastijanr "sebastijanr (33 commits)")

---

Tags

contaocontao-lazy-imageslazy-loadinglazyloadlazysizesreflowimagescontao

### Embed Badge

![Health badge](/badges/derhaeuptling-contao-lazy-images/health.svg)

```
[![Health](https://phpackages.com/badges/derhaeuptling-contao-lazy-images/health.svg)](https://phpackages.com/packages/derhaeuptling-contao-lazy-images)
```

###  Alternatives

[codefog/contao-haste

haste extension for Contao Open Source CMS

41668.4k162](/packages/codefog-contao-haste)[metamodels/core

MetaModels core

9956.1k68](/packages/metamodels-core)[codefog/contao-news_categories

News Categories bundle for Contao Open Source CMS

3187.0k6](/packages/codefog-contao-news-categories)[terminal42/contao-node

Node bundle for Contao Open Source CMS

3075.6k5](/packages/terminal42-contao-node)[terminal42/contao-folderpage

Provides a new page type for Contao that allows you to group pages into folders.

18153.4k10](/packages/terminal42-contao-folderpage)[terminal42/contao-url-rewrite

URL Rewrite bundle for Contao Open Source CMS

15100.0k3](/packages/terminal42-contao-url-rewrite)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)