Lazy Image Style

Introduction

This module add support lazy image for image styles and responsive image.

Features

• Using lazy load images by image style
• Support responsive image
• Support base64 "empty"
• Easy used
• Support Intersection Observer API
• (For > 8.x-1.3 version)Support CKEditor. Add button in your text formatter and enable " Track supported lazy images"
• Twig function for fast render image. Example {{ lazysizes('you_src', {alt: 'image alt'}) }}

For use in CKEditor
Recommended use Full HTML text format else make sure next attributes: `data-use-lazy srcset data-srcset class` allowed for `img` tag.

Installation

After install module goto /admin/config/media/lazy_image_settings
and select image style for support lazy image.

2.x branch
Now this module provides integration lazysizes.

High performance and SEO friendly lazy loader for images (responsive and normal)

• Using srcset attribute;
• Support responsive image style;
• Required Lazysizes library.
  • Download library from https://github.com/aFarkas/lazysizes
  • Extract to library directory. Exmaple /libraries/lazysizes/lazysizes.min.js
  • Or use drush command drush lis-d