PHP 開発における画像の圧縮と読み込みを最適化する方法

<?php
function compressImage($source, $destination, $quality) {
    $info = getimagesize($source);
    
    if ($info['mime'] == 'image/jpeg') {
        $image = imagecreatefromjpeg($source);
    } elseif ($info['mime'] == 'image/png') {
        $image = imagecreatefrompng($source);
    }
    
    imagejpeg($image, $destination, $quality);
    
    return $destination;
}

// 压缩图片
$sourceImage = 'path/to/source/image.jpg';
$destinationImage = 'path/to/destination/image.jpg';

$compressedImage = compressImage($sourceImage, $destinationImage, 80);
echo '压缩后的图片路径：' . $compressedImage;
?>

<img src="path/to/image.jpg"
     srcset="path/to/small/image.jpg 500w,
             path/to/medium/image.jpg 1000w,
             path/to/large/image.jpg 1500w"
     sizes="(max-width: 768px) 90vw,
            (max-width: 1200px) 70vw,
            50vw"
     alt="Responsive Image">

<img src="placeholder.jpg"
     data-src="path/to/image.jpg"
     alt="Lazy Load Image"
     class="lazy">

// 引入 Lazy Load 插件的 js 文件

document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    }
});