PHPackages                             bnomei/kirby3-srcset - 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. [Parsing & Serialization](/categories/parsing)
4. /
5. bnomei/kirby3-srcset

AbandonedArchivedKirby-plugin[Parsing & Serialization](/categories/parsing)

bnomei/kirby3-srcset
====================

Kirby 3 Plugin for creating lazyloading image srcset

3.3.12(5y ago)432.1k3[3 issues](https://github.com/bnomei/kirby3-srcset/issues)[3 PRs](https://github.com/bnomei/kirby3-srcset/pulls)MITPHPPHP >=7.2.0

Since Jul 27Pushed 4y ago1 watchersCompare

[ Source](https://github.com/bnomei/kirby3-srcset)[ Packagist](https://packagist.org/packages/bnomei/kirby3-srcset)[ Fund](https://buymeacoff.ee/bnomei)[ Fund](https://paypal.me/bnomei)[ RSS](/packages/bnomei-kirby3-srcset/feed)WikiDiscussions master Synced 3d ago

READMEChangelog (10)Dependencies (4)Versions (54)Used By (0)

> With Kirby 3.6 introducing support for WebP & AVIF images and the lazy-attribute being well supported by modern browsers this plugin has in my opinion become obsolete. Thus I will not continue to work on it.

Kirby 3 Srcset
==============

[](#kirby-3-srcset)

[![Release](https://camo.githubusercontent.com/fbb77d50a078fd48d620e1fc0f19c1cb5dd8d720af0ca36a6cc95bb9288da029/68747470733a2f2f666c61742e62616467656e2e6e65742f7061636b61676973742f762f626e6f6d65692f6b69726279332d7372637365743f636f6c6f723d616538316666)](https://camo.githubusercontent.com/fbb77d50a078fd48d620e1fc0f19c1cb5dd8d720af0ca36a6cc95bb9288da029/68747470733a2f2f666c61742e62616467656e2e6e65742f7061636b61676973742f762f626e6f6d65692f6b69726279332d7372637365743f636f6c6f723d616538316666)[![Downloads](https://camo.githubusercontent.com/9bb4c7248fb68f088fdea7ed9336e45d83656f64ed7342f2f64c63436095773e/68747470733a2f2f666c61742e62616467656e2e6e65742f7061636b61676973742f64742f626e6f6d65692f6b69726279332d7372637365743f636f6c6f723d323732383232)](https://camo.githubusercontent.com/9bb4c7248fb68f088fdea7ed9336e45d83656f64ed7342f2f64c63436095773e/68747470733a2f2f666c61742e62616467656e2e6e65742f7061636b61676973742f64742f626e6f6d65692f6b69726279332d7372637365743f636f6c6f723d323732383232)[![Build Status](https://camo.githubusercontent.com/33e9ac25fc8baaac1d6241be99ceb0cbebfed68888b90a52457f640649ad7e30/68747470733a2f2f666c61742e62616467656e2e6e65742f7472617669732f626e6f6d65692f6b69726279332d737263736574)](https://travis-ci.com/bnomei/kirby3-srcset)[![Coverage Status](https://camo.githubusercontent.com/eecf3394ca8edab9df536020cc04e086d484e17d158b21cebdedafa8da3aff7b/68747470733a2f2f666c61742e62616467656e2e6e65742f636f766572616c6c732f632f6769746875622f626e6f6d65692f6b69726279332d737263736574)](https://coveralls.io/github/bnomei/kirby3-srcset)[![Maintainability](https://camo.githubusercontent.com/165883d126a7222687d64f18e6bbc6788e062e8050d54f0a70a1fa5f181c036d/68747470733a2f2f666c61742e62616467656e2e6e65742f636f6465636c696d6174652f6d61696e7461696e6162696c6974792f626e6f6d65692f6b69726279332d737263736574)](https://codeclimate.com/github/bnomei/kirby3-srcset)[![Twitter](https://camo.githubusercontent.com/b90e4b58a887e8ad09ec267628b75199a48522a9e01e88b129e5d2d730dffe50/68747470733a2f2f666c61742e62616467656e2e6e65742f62616467652f747769747465722f626e6f6d65693f636f6c6f723d363664396566)](https://twitter.com/bnomei)

### Kirby 3 Plugin for creating lazyloading image srcset

[](#kirby-3-plugin-for-creating-lazyloading-image-srcset)

This plugin extends the core `(image: )`-Kirbytag. All params that work for `(image: )` can be used with `(lazysrcset: )` yielding the same output. By default the plugin does add the following:

- `lazyloading` class to the img element
- `data-src` image based on the params of the tag `width, height, quality`. This replaces the `src` attribute.
- `data-srcset` attribute with srcsets generated by Kirbys core `$file->srcset()` method
- `data-sizes="auto"` attribute
- `data-thumb-srcset` attribute printing the srcset array as json (only when debugging)
- `data-ratio` attribute with ratio of the image to parent of `img` element
- It registers a custom markdown component since needs to wrap and unwrap the markdown.

TOC
---

[](#toc)

1. [Commercial Usage](https://github.com/bnomei/kirby3-srcset#commecial-usage)
2. [Installation](https://github.com/bnomei/kirby3-srcset#installation)
3. [Usage Kirbytag](https://github.com/bnomei/kirby3-srcset#usage-kirbytag)
4. [Usage Editor Block](https://github.com/bnomei/kirby3-srcset#usage-editor-block)
5. [Usage PHP](https://github.com/bnomei/kirby3-srcset#usage-php)
6. [Setup](https://github.com/bnomei/kirby3-srcset#setup)
7. [Settings](https://github.com/bnomei/kirby3-srcset#settings)
8. [FAQ](https://github.com/bnomei/kirby3-srcset#faq)
9. [Image Ratio](https://github.com/bnomei/kirby3-srcset#image-ratio)

Commercial Usage
----------------

[](#commercial-usage)

> **Support open source!**
>
> This plugin is free but if you use it in a commercial project please consider to sponsor me or make a donation.
> If my work helped you to make some cash it seems fair to me that I might get a little reward as well, right?
>
> Be kind. Share a little. Thanks.
>
> ‐ Bruno

MONEY[Github sponsor](https://github.com/sponsors/bnomei)[Patreon](https://patreon.com/bnomei)[Buy Me a Coffee](https://buymeacoff.ee/bnomei)[Paypal dontation](https://www.paypal.me/bnomei/15)[Buy a Kirby license using this affiliate link](https://a.paddle.com/v2/click/1129/35731?link=1170)Installation
------------

[](#installation)

- unzip [master.zip](https://github.com/bnomei/kirby3-srcset/archive/master.zip) as folder `site/plugins/kirby3-srcset` or
- `git submodule add https://github.com/bnomei/kirby3-srcset.git site/plugins/kirby3-srcset` or
- `composer require bnomei/kirby3-srcset`

Usage Kirby Tag
---------------

[](#usage-kirby-tag)

[image](https://getkirby.com/docs/reference/text/kirbytags/image)lazysrcsetalt, caption, class, height, imgclass, link, linkclass, rel, target, text, title, widthsizes, lazy, prefix, autosizes, quality, figure```
# like image tag
(image: myfile.jpg)
(lazysrcset: myfile.jpg)
(lazysrcset: myfile.jpg link: mypdf.pdf)
(lazysrcset: myfile.jpg class: myclass)

# changing width, height and/or quality of src (not srcset)
(lazysrcset: myfile.jpg width: 640 height: 480 quality: 70)

# different lazy class
(lazysrcset: myfile.jpg lazy: lazy)

# different or no prefix
(lazysrcset: myfile.jpg prefix: )

# remove wrapping figure element
(lazysrcset: myfile.jpg figure: false)

# remove the ratio information
(lazysrcset: myfile.jpg ratio: false)

# sizes from config
(lazysrcset: myfile.jpg sizes: default)
(lazysrcset: myfile.jpg sizes: breakpoints)

# sizes are supported in various formats
# string, number(s), with and without px, comma and brackets
(lazysrcset: myfile.jpg sizes: 320 640 960)
(lazysrcset: myfile.jpg sizes: [320, 640, 960])
(lazysrcset: myfile.jpg sizes: 320px, 640px, 960px)

```

Usage Editor Block
------------------

[](#usage-editor-block)

[![srcset editor block](https://raw.githubusercontent.com/bnomei/kirby3-srcset/master/kirby3-srcset-editor-block.png)](https://raw.githubusercontent.com/bnomei/kirby3-srcset/master/kirby3-srcset-editor-block.png)

**Specifically allow plugin block**

When you [specifically define](https://github.com/getkirby/editor/wiki/Blueprint-setup#allowed) which blocks are allowed in an editor field you need to add [the plugin block](https://github.com/bnomei/kirby3-srcset/blob/b700916bd5223629e9a022f6817c8fc1530415cc/src/index.js#L3) like this:

```
fields:
 text:
   label: Editor
   type: editor
   allowed:
     - h1
     - paragraph
     - srcset # matches name of plugin
```

Usage PHP
---------

[](#usage-php)

```
echo $page->image('ukulele.jpg')->lazysrcset();

// 320 and 1200
echo $page->image('ukulele.jpg')->lazysrcset('default');

// 576, 768, 992, 1200
echo $page->image('ukulele.jpg')->lazysrcset('breakpoints');

// 320, 640, 960
echo $page->image('ukulele.jpg')->lazysrcset(['sizes' => [320, 640, 960]]);

// other options
echo $page->image('ukulele.jpg')->lazysrcset([
    // lazysrcset
    'sizes' => [320, 640, 960],
    'lazy' => 'lazyloading-with-flickity',
    'prefix' => 'data-flickity-lazyload-',
    'figure' => false,
    'autosizes' => false,
    // image
    'width' => 640,
    'height' => 480,
    // ...
]);
```

Setup
-----

[](#setup)

### Config

[](#config)

You need to define [srcsets](https://getkirby.com/docs/reference/objects/file/srcset). The plugin will use these as well as the core `$file->srcset()` function.

**/site/config/config.php**

```
return [
    'thumbs' => [
        'srcsets' => [
            'default' => [320, 1200],
            'breakpoints' => [576, 768, 992, 1200],
        ],
    ],
];
```

### JS

[](#js)

Add [aFarkas/lazysizes](https://github.com/aFarkas/lazysizes) to your js dependencies and [RTFM](https://en.wikipedia.org/wiki/RTFM). You can also use [lozad.js](https://apoorv.pro/lozad.js) with little adjustments in the settings.

### Minimal CSS for auto-sizes detection

[](#minimal-css-for-auto-sizes-detection)

You will need some css to make the lazysizes lib automatic size detection work.

```
figure { width: 100%; }
img[data-sizes="auto"] { display: block; width: 100%; }
```

> IMPORTANT: The css must be applied to the DOM before the JS is executed. Make sure the order is right and they are not async applied. With a lib like [muicss/loadjs](https://github.com/muicss/loadjs) you can load them asyn and apply them in proper order. Otherwise you will face [blurry images on first load](https://github.com/bnomei/kirby3-srcset/issues/5).

### CSS for hinted image ratio

[](#css-for-hinted-image-ratio)

By default the images ratio is hinted by the plugin to minimize reflows and avoid page jumps. You just need to add the following css to you codebase.

> TIP: you can use a different class name if you set `ratio` to a different string. If you set either `ratio` or `figure` to `false` the ratio hints will disappear.

**CSS**

```
/* class name must matches the value of `ratio` setting. */
.lazysrcset-ratio {
    position: relative;
}
.lazysrcset-ratio > img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.lazysrcset-ratio > img:after {
    display: block;
    width: 100%;
    height: 0;
    content: '';
}
```

**tailwind.css**

```
.lazysrcset-ratio {
    @apply relative;
    & > img {
        @apply absolute top-0 left-0 w-full h-full block;
        &:after {
            content: '';
            @apply block h-0 w-full;
        }
    }
}
```

Each figure element will be prefixed with a style element defining the ratio. For example the css style for an image with 16/9 ratio followed by its `figure image` element would look like this:

**without figcaption**: `figure > img`

```
.lazysrcset-ratio[data-ratio="56.25"]{padding-bottom:56.25%;}
```

**with figcaption**: `figure > ((div > img) + figcaption)`

```
.lazysrcset-ratio[data-ratio="56.25"]{padding-bottom:56.25%;}with caption
```

**with nonce**

You can set a custom nonce using the options or install the [security headers plugin](https://github.com/bnomei/kirby3-security-headers).

```
...
```

Settings
--------

[](#settings)

bnomei.srcset.DefaultDescriptionlazy`lazyload`bool or string. additional class for imgclass paramprefix`data-`bool or string. prefix before srcset and src when doint lazy loadingautosizes`auto`bool or string. related to `data-sizes` attributefigure`true`bool. wrap image in figure or notratio`lazysrcset-ratio`bool or string. adds data-ratio to parent of `img`nonce`null`null, string or callback. default nonce for style elementFAQ
---

[](#faq)

- Does the plugin override the `(image: )`-Kirbytag? No and it never will.
- Why is the Javascript library for lazy loading not included? Since that should be part of the websites build chain.
- IE11 support? You will need a [Picture Polyfill](https://caniuse.com/#search=picture).
- Why is there no `sizes` attribute? It is not defined since js lib [lazysizes](https://github.com/aFarkas/lazysizes) can create these on-the-fly based on actual screen size of image. see `autosizes` setting.
- [Lazyloading with Flickity](https://flickity.metafizzy.co/options.html#lazyload)? Do `'prefix' => 'data-flickity-lazyload-'`.
- Where is the picture element support? This plugin v2.x.x versions could do picture element. I removed that and focused on a better kribytag and lazyloading to make the plugin simpler again.

Works well with
---------------

[](#works-well-with)

- [Thumb Imageoptim Plugin](https://github.com/bnomei/kirby3-thumb-imageoptim) Paid account required.

Disclaimer
----------

[](#disclaimer)

This plugin is provided "as is" with no guarantee. Use it at your own risk and always test it yourself before using it in a production environment. If you find any issues, please [create a new issue](https://github.com/bnomei/kirby3-srcset/issues/new).

License
-------

[](#license)

[MIT](https://opensource.org/licenses/MIT)

It is discouraged to use this plugin in any project that promotes racism, sexism, homophobia, animal abuse, violence or any other form of hate speech.

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance19

Infrequent updates — may be unmaintained

Popularity28

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity71

Established project with proven stability

 Bus Factor1

Top contributor holds 97.6% 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 ~21 days

Recently: every ~37 days

Total

49

Last Release

1825d ago

Major Versions

1.4.0 → 2.0.02019-03-16

2.1.1 → 3.0.02019-08-26

PHP version history (2 changes)1.2.2PHP >=7.1.0

2.1.1PHP >=7.2.0

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/3265642?v=4)[Bruno Meilick](/maintainers/bnomei)[@bnomei](https://github.com/bnomei)

---

Top Contributors

[![bnomei](https://avatars.githubusercontent.com/u/3265642?v=4)](https://github.com/bnomei "bnomei (120 commits)")[![tasinttttttt](https://avatars.githubusercontent.com/u/2914169?v=4)](https://github.com/tasinttttttt "tasinttttttt (3 commits)")

---

Tags

editor-blockflickityimagesimgkirby3kirby3-cmskirby3-pluginkirbytaglazyloadlazysizesloadjslozardsrcsetmarkdownimageslazycomponentloadimgsrcsetlazyloadkirby3kirby3-pluginkirby3-cmslazysizeskirbytagloadjsflickitylozad.jseditor-block

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/bnomei-kirby3-srcset/health.svg)

```
[![Health](https://phpackages.com/badges/bnomei-kirby3-srcset/health.svg)](https://phpackages.com/packages/bnomei-kirby3-srcset)
```

###  Alternatives

[fabianmichael/kirby-meta

Your all-in-one powerhouse for any SEO and metadata needs imaginable.

6910.7k1](/packages/fabianmichael-kirby-meta)[joomlatools/pages

Joomlatools Pages is a very fast just-in-time page generator and flexible framework that makes building websites with any CMS, API, or database fun again. It can be installed in Joomla as a component, or be used standalone

473.7k](/packages/joomlatools-pages)[schnti/cachebuster

A plugin for Kirby 3 CMS to add modification timestamps to css and js files

108.3k1](/packages/schnti-cachebuster)[bnomei/kirby3-php-cachedriver

PHP based Cache-Driver

112.6k](/packages/bnomei-kirby3-php-cachedriver)

PHPackages © 2026

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