PHPackages                             shel/neos-sqip - 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. [Image & Media](/categories/media)
4. /
5. shel/neos-sqip

ActiveNeos-plugin[Image & Media](/categories/media)

shel/neos-sqip
==============

Neos CMS SQIP image renderer

0.2.0(3y ago)103491[1 issues](https://github.com/Sebobo/Shel.Neos.Sqip/issues)[1 PRs](https://github.com/Sebobo/Shel.Neos.Sqip/pulls)MITPHP

Since Jun 5Pushed 1y ago3 watchersCompare

[ Source](https://github.com/Sebobo/Shel.Neos.Sqip)[ Packagist](https://packagist.org/packages/shel/neos-sqip)[ RSS](/packages/shel-neos-sqip/feed)WikiDiscussions master Synced 2w ago

READMEChangelog (2)Dependencies (1)Versions (6)Used By (0)

Shel.Neos.Sqip
==============

[](#shelneossqip)

[![Latest Stable Version](https://camo.githubusercontent.com/e996ae1f243eb1d6c80aa8c1562591b412fc1e00b9b91ca927d52d1a09563aa6/68747470733a2f2f706f7365722e707567782e6f72672f7368656c2f6e656f732d737169702f762f737461626c65)](https://packagist.org/packages/shel/neos-sqip)[![Total Downloads](https://camo.githubusercontent.com/c48ae3d6afa4702b7fd1e214cf2c02c4e9c26215e5261f54b77f2dc2935fdeb4/68747470733a2f2f706f7365722e707567782e6f72672f7368656c2f6e656f732d737169702f646f776e6c6f616473)](https://packagist.org/packages/shel/neos-sqip)[![License](https://camo.githubusercontent.com/ba3e3930aceb06dd7b4e0941f38af2bdf8add2431bfeb0cff98a3fe9c8123ba2/68747470733a2f2f706f7365722e707567782e6f72672f7368656c2f6e656f732d737169702f6c6963656e7365)](https://packagist.org/packages/shel/neos-sqip)

Description
-----------

[](#description)

This package provides a fusion object for Neos CMS to render svg image placeholders based on the **SQIP** technique. They can be used to show a blurry or abstract version of an image while the real image is still lazy loading.

You can see it in action [here](https://vimeo.com/273546493).

Learn more about **SQIP** is a method to generate SVG based placeholders for images here:

- Original node.js version [sqip](https://github.com/technopagan/sqip) used by this package.
- The [go variant](https://github.com/denisbrodbeck/sqip) which is also supported via configuration.

**Attention:** the node.js based `sqip` is not released in version 1 yet. Therefore breaking changes might happen when you use the global binary and you might need to adjust the arguments in the settings or wait for an update of this package.

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

[](#installation)

Requires npm (node.js) to work out of the box, although binaries can also be installed manually without it.

```
composer require shel/neos-sqip

```

Ensure the image manipulation library `sqip` is installed globally.

Alternatively install them using `npm`:

#### Globally

[](#globally)

```
npm install -g sqip

```

#### Locally

[](#locally)

```
npm install --prefix Packages/Plugins/Shel.Neos.Sqip/Resources/Private/Library

```

How to use
----------

[](#how-to-use)

Use the provided fusion object `Shel.Neos.Sqip:ImageTag` to render an image with placeholder and use the lazy image loader [layzr](https://github.com/callmecavs/layzr.js) to lazy load the actual images. This object already provides the necessary attributes to make `layzr` work out of the box.

You can also use the provided `Shel.Neos.Sqip:SqipImage` fusion object to just render the SVG data which you can put into the `src` attribute of an `img` tag or in a inline style as background image.

The fusion object `Shel.Neos.Sqip:SqipCaseRenderer` provides a renderer for your `src` attribute which checks if the user is in the backend and then decides to render the original image uri instead of the SQIP image.

You can use this for example to modify the [Carbon.Image:Tag](https://github.com/CarbonPackages/Carbon.Image) object like this:

```
prototype(Carbon.Image:Tag) {
    attributes {
        src >
        src = Shel.Neos.Sqip:SqipCaseRenderer {
            asset = ${asset}
        }
        srcset >
        data-normal = Carbon.Image:ImageUri
        data-srcset = Carbon.Image:Srcset
    }
}

```

#### Compatible image formats

[](#compatible-image-formats)

This package was tested with pngs, jpegs and svgs. Possibly other formats work well too.

#### Performance

[](#performance)

Processing the SQIP placeholders is quite slow and takes several seconds per image.

To speed this up a thumbnail will be generated first (which can also be prerendered with CLI commands) to reduce the image dimensions. By default the preset from the Media Browser will be used which has dimensions of 250x250. So this is also a bit faster as the media module reuses the same thumbnails.

You can change the preset via configuration.

Configuration
-------------

[](#configuration)

#### Default options

[](#default-options)

```
Shel:
  Neos:
    Sqip:
      useGlobalBinary: false # use globally installed binaries
      globalBinaryPath: ''
      library: 'sqip'
      binaryPath: '.bin/sqip'
      arguments: "${'node ' + binaryPath + ' -n ' + numberOfPrimitives + ' -m ' + mode + ' -b ' + blur + ' ' + file}"
      parameters:
        # Customize the number of primitive SVG shapes (default=8) to influence bytesize or level of detail
        numberOfPrimitives: 8
        # Specify the type of primitive shapes that will be used to generate the image
        # 0=combo, 1=triangle, 2=rect, 3=ellipse, 4=circle, 5=rotatedrect, 6=beziers, 7=rotatedellipse, 8=polygon
        mode: 0
        # Set the gaussian blur
        blur: 12
      thumbnailPreset: 'Neos.Media.Browser:Thumbnail'

```

#### Using the go variant

[](#using-the-go-variant)

The go version is faster than the node.js version and has less dependencies but currently doesn't provide the blur parameter. Both binaries have the same cli output and therefore work fine.

1. Install the `sqip` binary like described in their [instructions](https://github.com/denisbrodbeck/sqip).
2. Override the package settings in your own package like this:

    ```
     Shel:
       Neos:
         Sqip:
           useGlobalBinary: true
           globalBinaryPath: '/path/to/your/go/bin/' # Adapt this to your system
           arguments: "${binaryPath + ' -n ' + numberOfPrimitives + ' -mode ' + mode + ' ' + file}"
           parameters:
             # Customize the number of primitive SVG shapes (default=8) to influence bytesize or level of detail
             numberOfPrimitives: 8
             # Specify the type of primitive shapes that will be used to generate the image
             # 0=combo, 1=triangle, 2=rect, 3=ellipse, 4=circle, 5=rotatedrect, 6=beziers, 7=rotatedellipse, 8=polygon
             mode: 0

    ```

#### Caching

[](#caching)

The generated SVGs will be cached in the filesystem as strings.

To speed the Cache up you can switch to use Redis like this in your `Caches.yaml`:

```
ShelNeosSqip_ImageCache:
  backend: Neos\Cache\Backend\RedisBackend
  backendOptions:
    database: 0

```

You can make the cache persistent to keep cached images when temporary caches are flushed:

```
ShelNeosSqip_ImageCache:
  persistent: true

```

###  Health Score

31

—

LowBetter than 66% of packages

Maintenance25

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 92.3% 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 ~520 days

Total

4

Last Release

1384d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/5c9f106db319e8698dcb4aedfe8034f0442d379ebbd78fcd67b884999b2236f1?d=identicon)[Sebobo](/maintainers/Sebobo)

---

Top Contributors

[![Sebobo](https://avatars.githubusercontent.com/u/596967?v=4)](https://github.com/Sebobo "Sebobo (12 commits)")[![paavo](https://avatars.githubusercontent.com/u/1118783?v=4)](https://github.com/paavo "paavo (1 commits)")

### Embed Badge

![Health badge](/badges/shel-neos-sqip/health.svg)

```
[![Health](https://phpackages.com/badges/shel-neos-sqip/health.svg)](https://phpackages.com/packages/shel-neos-sqip)
```

###  Alternatives

[neos/form-builder

Flow Form Framework integration into Neos CMS

19358.8k19](/packages/neos-form-builder)[jonnitto/plyr

Plyr.io for Neos.io

1136.5k2](/packages/jonnitto-plyr)[dl/gallery

Neos plugin to easily render image galleries

1416.9k2](/packages/dl-gallery)[shel/neos-image-checker

Image editor with customisable checks for Neos CMS

106.2k](/packages/shel-neos-image-checker)

PHPackages © 2026

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