Lazy Load inline images in Drupal 8 We have nodes with a lot of inline images in them. And we are looking for a solution on how to lazyload inline images in Drupal 8.

We are trying to get the Blazy module to lazyload them but it is not working that smoothly since we have a ton of posts already and can't manually apply the src-data attribute and class to all existing images. 

This is how I am trying to get blazy to lazyload all images, but it is not working. Any ideas on what we are doing wrong? We are open to all recommendations. 

Apply lazyload / blazy to all images.

1) In mytheme.libraries.yml I added the following:

dependencies:
- blazy/load


2) In MYTHEME.info.yml I added the following

libraries:
- 'mytheme/global-styling'
- 'mytheme/local'


3) In MYTHEME.theme I added the following:

/**
* Implements hook_page_attachments_alter()
*/
function MYTHEME_page_attachments_alter(array &amp;$attachments) {
  $attachments['#attached']['library'][] = 'blazy/load';
}


What is wrong?

Currently getting this error:


  Fatal error: Cannot use assign-op operators with overloaded objects
  nor string offsets in
  /core/lib/Drupal/Core/Asset/LibraryDiscoveryParser.php on line 138
When you need to lazy-load inline-images, I'd recommend doing that so via Filter plugin system.

That way you wouldn't need to alter any of the HTML in the node body/content.

The filter would be responsible of making the necessary markup changes to support lazy loading images.

The filter plugin should be FilterInterface::TYPE_TRANSFORM_REVERSIBLE type to avoid making changes to node content. That way in CKEditor the images could be maintained same as before. But when they are viewed in the page they would be lazy-loaded.

Here's the plugin I created for my projects:

&lt;?php
// This plug needs to be placed in a custom module:
// `modules/custom/YOURMODULE/src/Plugin/Filter/FilterLazyload.php`

namespace Drupal\YOURMODULE\Plugin\Filter;

use Drupal\Component\Utility\Html;
use Drupal\filter\FilterProcessResult;
use Drupal\filter\Plugin\FilterBase;

/**
 * Provides a filter to lazy-load images.
 *
 * @Filter(
 *   id = "filter_lazyload",
 *   title = @Translation("Lazyload images"),
 *   description = @Translation("Lazy load images via bLazy"),
 *   type = Drupal\filter\Plugin\FilterInterface::TYPE_TRANSFORM_REVERSIBLE,
 *   weight = 20
 * )
 */
class FilterLazyload extends FilterBase {

  /**
   * {@inheritdoc}
   */
  public function process($text, $langcode) {
    $placeholder_src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';

    $result = new FilterProcessResult($text);
    $html_dom = Html::load($text);
    $images = $html_dom-&gt;getElementsByTagName('img');

    foreach ($images as $image) {
      $src = $image-&gt;getAttribute('src');
      $image-&gt;removeAttribute('src');
      $image-&gt;setAttribute('data-src', $src);
      $image-&gt;setAttribute('src', $placeholder_src);
      $classes = $image-&gt;getAttribute('class');
      $classes = (strlen($classes) &gt; 0) ? explode(' ', $classes) : [];
      $classes[] = 'b-lazy';
      $image-&gt;setAttribute('class', implode(' ', $classes));
    }

    $result-&gt;setProcessedText(Html::serialize($html_dom));

    return $result;
  }

  /**
   * {@inheritdoc}
   */
  public function tips($long = FALSE) {
    return $this-&gt;t('All inline-images will be lazy-loaded.');
  }

}


You still need to attach bLazy library and the initiator js to all pages. But you don't necessarily need the Blazy module to make this plugin work.