PHPackages                             lekoala/silverstripe-lazysizes - 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. lekoala/silverstripe-lazysizes

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

lekoala/silverstripe-lazysizes
==============================

Adds lazysizes in the SilverStripe CMS

161365PHP

Since Sep 2Pushed 4y ago2 watchersCompare

[ Source](https://github.com/lekoala/silverstripe-lazysizes)[ Packagist](https://packagist.org/packages/lekoala/silverstripe-lazysizes)[ RSS](/packages/lekoala-silverstripe-lazysizes/feed)WikiDiscussions master Synced today

READMEChangelogDependenciesVersions (1)Used By (0)

Silverstripe Lazysizes module
=============================

[](#silverstripe-lazysizes-module)

Integrate  and to Silverstripe.

Code heavily inspired by

All-in-one solution for:

- Lazy loading images
- Responsive images
- Placeholder images (using placehold.it)

Respimages is only loaded if the browser does not support native syntax.

Plugins
=======

[](#plugins)

This modules has already pre built plugins into a consolidated js file.

Plugins available by default are:

Lasysizes:

- unveilhooks
- print
- bgset
- include

Respimages:

- oldie
- intrinsic
- mutation

You can also define your own path to the libraries by adjusting the following path

```
LazySizesImageExtension:
	js_path: 'lazysizes/javascript'

```

LazyLoading
===========

[](#lazyloading)

If you simply want to lazy load your image, you can use any of three default methods which specify no additional sizes.

Example:

```
$Image.Lazy(720x250)
$Image.LazyCrop(720x250)
$Image.LazyCropFocus(720x250)

```

Responsive sets
===============

[](#responsive-sets)

You can define your own responsive sets. You can see the bundled configuration for the ResponsiveDefault set which set 4 breakpoints. You can define your own sets, change sizes, method and default size to be used.

All sets use lazysizes data-sizes="auto" by default, meaning that the width of the parent is used to determine which size needs to be loaded.

Retina is also supported.

Config example:

```
LazySizesImageExtension:
	ResponsiveDefault:
		sizes: [320x213 320w,640x426 640w,960x639 960w,1280x852 1280w]
	ResponsiveDefaultSquare:
		sizes: [320x320 320w,640x640 640w,960x960 960w,1280x1280 1280w]
	ResponsiveDefaultRetina:
		sizes: [400x300 1x, 800x600 2x]

```

Usage example in template:

```
$Image.ResponsiveDefault

```

Using placeholders
==================

[](#using-placeholders)

The controller extension provides a helper method to easily create placeholders using PlaceholdIt. You can define a base size and a src set.

Example:

```
$PlaceholdIt(175x75,'200x100,500x300,800x400')

```

SrcSet
======

[](#srcset)

Sometimes, you just need to output a list of srcset paths (for instance, to define a bgset). The last element of the set is never resized (always using the original image at maximum size). You can prevent this from happening by setting the second argument to false.

Example:

```

```

Compatibility
=============

[](#compatibility)

Tested with 3.1

Installation
============

[](#installation)

composer require lekoala/silverstripe-lazysizes

Maintainer
==========

[](#maintainer)

LeKoala -

###  Health Score

21

—

LowBetter than 18% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity20

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity29

Early-stage or recently created project

 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://avatars.githubusercontent.com/u/250762?v=4)[Thomas Portelange](/maintainers/lekoala)[@lekoala](https://github.com/lekoala)

---

Top Contributors

[![lekoala](https://avatars.githubusercontent.com/u/250762?v=4)](https://github.com/lekoala "lekoala (12 commits)")

### Embed Badge

![Health badge](/badges/lekoala-silverstripe-lazysizes/health.svg)

```
[![Health](https://phpackages.com/badges/lekoala-silverstripe-lazysizes/health.svg)](https://phpackages.com/packages/lekoala-silverstripe-lazysizes)
```

PHPackages © 2026

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