PHPackages                             janhuenermann/lazyfox - 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. janhuenermann/lazyfox

ActiveCraft-plugin

janhuenermann/lazyfox
=====================

A dead simple Craft3 plugin that makes lazy loading your images a breeze.

45[1 issues](https://github.com/janhuenermann/lazyfox/issues)PHP

Since Sep 17Pushed 7y ago2 watchersCompare

[ Source](https://github.com/janhuenermann/lazyfox)[ Packagist](https://packagist.org/packages/janhuenermann/lazyfox)[ RSS](/packages/janhuenermann-lazyfox/feed)WikiDiscussions master Synced 2mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

[![](resources/img/lazyfox-icon.png)](resources/img/lazyfox-icon.png)

LazyFox for Craft CMS 3.x
=========================

[](#lazyfox-for-craft-cms-3x)

A dead simple plugin that makes lazy loading your images a breeze. Icon attribution: Fox by ester barbato from the Noun Project.

Key features
------------

[](#key-features)

- lazy load images to make web pages more responsive and fluid
- **source-sets**: LazyFox generates a bunch of different sizes of your images and makes the browser load only the image with needed size, avoiding the download of images that are bigger than what the viewport can render, resulting in faster load-time
- displaying awesome placeholders that are embeded into the HTML code while image loads
- easy to use API that is native to Craft and Twig
- uses the latest and greatest HTML5 and JS APIs such as MutationObserver, ResizeObserver and Intersection API. Has polyfills included.
- lightweight: 7kB JavaScript, <1kB CSS
- noscript fallback
- [Imager](https://github.com/aelvan/Imager-Craft) support. Uses Imager for resizing when available.

With LazyFox document jumping is a thing of the past!

[![Screenshot](resources/img/lazyfox-screencap.gif)](resources/img/lazyfox-screencap.gif)

Requirements
------------

[](#requirements)

This plugin requires Craft CMS 3.0.0-beta.23 or later.

Installation
------------

[](#installation)

While it's recommended to install LazyFox from the Craft plugin store, if you want to, you can install it manually by following these instructions.

1. Open your terminal and go to your Craft project:

    ```
     cd /path/to/project

    ```
2. Then tell Composer to load the plugin:

    ```
     composer require janhuenermann/lazyfox

    ```
3. In the Control Panel, go to Settings → Plugins and click the “Install” button for lazyfox.

Using lazyfox
-------------

[](#using-lazyfox)

To make images lazy-load, simply use the `image` function in Twig.

### image(asset)

[](#imageasset)

Creates a picture tag enabled for lazy-loading.

**Parameters:**

*asset*: An instance of `craft\elements\Asset`

**Example**:

```

{% for myImage in entry.myImageField %}
{{ image(myImage) }}
{% endfor %}

```

**Note**: Make sure that if you cache the result, that you still include the assets (JavaScript & CSS) required by LazyFox. You can do this in Twig using `{% do view.registerAssetBundle('janhuenermann\lazyfox\assetbundles\Lazyfox\LazyfoxAsset') %}`

Configuring lazyfox
-------------------

[](#configuring-lazyfox)

On the settings page you can choose between different lazy load styles and set the image sizes included in the source-set (srcset attribute).

Code output
-----------

[](#code-output)

After the image has been loaded by LazyFox the resulting HTML structure will look something like the following.

```

```

As you can see it produces a HTML5 picture element. The underlying img's `sizes` attribute in this case is automatically set by LazyFox in order to load the best fitting image.

Styling lazy-loaded images in CSS
---------------------------------

[](#styling-lazy-loaded-images-in-css)

As the generated code differs slightly from a plain img-tag, it can sometimes be tricky to style the image in a desired way. However with LazyFox it's quite simple. Just target the image inside the picture tag for any img based properties such as object-fit, object-position etc. If you want to adjust the size or anything that has to do with the border box of the element, simply target the picture element itself.

By default, LazyFox makes the picture tag 100% of the width. But that's easy to change. Keep in mind that it's recommended to use percentages in order to guarantee responsiveness across devices.

A basic example for how to create a lazy-loading square image that doesn't stretch:

```
main .lazyfox {
	width: 300px;
	height: 300px;
}

main .lazyfox img {
	object-fit: cover;
}
```

Plugin by [Jan Hünermann](https://janhuenermann.com).

Icon attribution: Fox by ester barbato from the Noun Project

###  Health Score

19

—

LowBetter than 10% of packages

Maintenance15

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity40

Maturing project, gaining track record

 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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/4b7835ae09e0c6caf2da95c5d6579932eb6f053c9baa1b2efe6b4012d4732d82?d=identicon)[janhuenermann](/maintainers/janhuenermann)

---

Top Contributors

[![janhuenermann](https://avatars.githubusercontent.com/u/10101036?v=4)](https://github.com/janhuenermann "janhuenermann (242 commits)")

---

Tags

craft3html5lazy-loading

### Embed Badge

![Health badge](/badges/janhuenermann-lazyfox/health.svg)

```
[![Health](https://phpackages.com/badges/janhuenermann-lazyfox/health.svg)](https://phpackages.com/packages/janhuenermann-lazyfox)
```

PHPackages © 2026

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