Lazyload images for content in WordPress

function.php

<?php
add_filter('the_content', 'add_loading_attribute_to_content_images_for_lazyload');
function add_loading_attribute_to_content_images_for_lazyload($content) {
    // Find all images in the content
    preg_match_all('/<img[^>]+>/i', $content, $images);

    if (!empty($images[0])) {
        foreach ($images[0] as $index => $image) {
            // Check if image already has loading attribute
            if (str_contains($image, 'loading=')) {
                continue;
            }

            // Receive src attr
            preg_match('/src="([^"]+)"/i', $image, $src);

            // check if it first image
            if ($index == 0) {
                // If first image gif, then apply loading lazy, otherwise eager
                if (isset($src[1]) && pathinfo($src[1], PATHINFO_EXTENSION) === 'gif') {
                    $new_image = str_replace('<img', '<img loading="lazy"', $image);
                } else {
                    $new_image = str_replace('<img', '<img loading="eager"', $image);
                }
            } else {
                // For all other images add loading="lazy"
                $new_image = str_replace('<img', '<img loading="lazy"', $image);
            }

            // Replace image with modified context
            $content = str_replace($image, $new_image, $content);
        }
    }

    return $content;
}