A Statamic modifier that adjusts the markup of images coming from content areas to appease lazysizes general convention.

LazysizesModifier.php

<?php

/**
 * 
 * Lazysizes Modifier
 * - Will add the lazyload class
 * - Turns all srcs into data-src and srcset into data-srcset.
 * - Generates a low rez blurred image to start.
 * 
 * How to use:
 * {{ content | lazysizes }}
 * 
 */

namespace Statamic\Addons\Lazysizes;

use Statamic\Extend\Modifier;
use Statamic\API\Asset;

class LazysizesModifier extends Modifier
{

    /**
     * Stores the incoming content
     * @var  String
     */
    private $content;

    /**
     * Modify a value
     *
     * @param mixed  $content  The value to be modified
     * @param array  $params   Any parameters used in the modifier
     * @param array  $context  Contextual values
     * @return mixed
     */
    public function index($content, $params, $context) {

        // Manipulate the image strings
        return $this->setContent($content)
            ->addLazyloadClasses()
            ->addDataSrc()
            ->addLowresSrc()
            ->getContent();

    }

    /**
     * Returns the content string
     * @return  String
     */
    private function getContent () {

        // return the content string
        return $this->content;
        
    }

    /**
     * Sets the content string
     * @return  LazysizesModifier
     */
    private function setContent ($content) {
        
        // Store the content string
        $this->content = $content;

        // Make function pipable
        return $this;

    }

    /**
     * Adds the lowres image src
     * @return  LazysizesModifier
     */
    private function addLowresSrc () {

        // Find all the data srcs
        preg_match_all(
            '/data-src="\/([^"]+)/',
            $this->content, 
            $img_urls
        );

        // if there were matched images, loop through them
        if(!empty($img_urls[1])) foreach ($img_urls[1] as $url) {
            
            // Get the image
            $asset = Asset::wherePath($url);

            // Generate the lowres
            $low_res = $asset->manipulate([
                'w' => 100,
                'blur' => 100
            ]);
            
            // generate the correct image
            $this->content = str_replace(
                "data-src=\"/{$url}\"",
                "src=\"{$low_res}\" data-src=\"/{$url}\"",
                $this->content
            );

        }

        // Make the method pipable
        return $this;

    }

    /**
     * Replaces image srcs with data-src
     * @return  LazysizesModifier
     */
    private function addDataSrc () {

        // Replace all image srcs with data-src
        $this->content = preg_replace(
            '/(<img[^>]+?)(src=")([^"]+)/',
            '$1data-$2$3',
            $this->content
        );

        // Replace all image srcsets with data-srcest
        $this->content = preg_replace(
            '/(srcset=")/',
            'data-$1',
            $this->content
        );

        // Make method pipable
        return $this;

    }

    /**
     * Adds the lazyload classes
     * @return  LazysizesModifier
     */
    private function addLazyloadClasses () {

        // Add lazyload to all images with classes
        $this->content = preg_replace(
            '/(<img[^>]+?class=["\'])/',
            '$1lazyload ',
            $this->content
        );

        // Add lazyload to all images that don't have classes
        $this->content = preg_replace(
            '/(<img(?:(?!class)[^>])+)>/',
            '$1 class="lazyload" \/>',
            $this->content
        );

        // Make pipable
        return $this;

    }

}