This Neos package helps using npm's lazysizes strategy to implement responsive images. See https://www.npmjs.com/package/lazysizes

To install the package correctly, go to your theme package (e.g. Packages/Sites/Visol.Site) and run the following command:

composer require visol/neos-responsiveimages --no-update

• Install lazysizes. E.g. with npm

  npm install lazysizes --save
  

• Add the JavaScript sources to your main script

  import 'lazysizes/plugins/parent-fit/ls.parent-fit.min';
  import 'lazysizes/plugins/bgset/ls.bgset.min';
  import 'lazysizes/lazysizes.min';
  

Just replace usages of the Neos.Fusion:Image prototype with Visol.Neos.ResponsiveImages:ImageTag. e.g.

image = Visol.Neos.ResponsiveImages:ImageTag {
    asset = ${q(event).property('teaserImage')}
    ratio = 1.46
}

Or use the ViewHelper provided. e.g.

{namespace responsiveImages=Visol\Neos\ResponsiveImages\ViewHelpers}

<responsiveImages:image image="{item.properties.sliderImage}" ratio="1.89583" />

Adjust the desired image sizes in your Settings.yaml

Visol:
  Neos:
    ResponsiveImages:
      SizesPresets:
        Default:
          - 16
          - 48
          - 96
          - 160
          - 320
          - 480
          - 640
          - 960
          - 1024
          - 1440
          - 1920
          - 2560
          - 3840
          - 5120

Use Visol.Neos.ResponsiveImages:SrcSet prototype to generate srcset-Attribute

imageUri = Visol.Neos.ResponsiveImages:SrcSet {
    asset = ${q(offer).property('image')}
    ratio = 0.91
}

Add class lazyload and data-attributes

<div class="lazyload" data-bgset={props.imageUri} data-sizes="auto">

This package is currently being maintained for the following versions:

https://www.npmjs.com/package/lazysizes

visol digitale Dienstleistungen GmbH, www.visol.ch