PHP 개발에서 이미지 압축 및 로딩을 최적화하는 방법-PHP 튜토리얼-php.cn

PHP 개발에서 이미지 압축 및 로딩을 최적화하는 방법

WBOY

풀어 주다： 2023-10-08 18:20:02

원래의

754명이 탐색했습니다.

PHP 개발에서 이미지 압축 및 로딩을 최적화하는 방법

PHP 개발에서 이미지 압축을 최적화하고 로딩을 최적화하는 방법

요약:
웹사이트에서 이미지는 사용자가 보다 직관적이고 매력적인 경험을 할 수 있게 해주는 중요한 요소입니다. 그러나 이미지 파일은 일반적으로 용량이 크고 로드 속도가 느려 웹사이트 성능과 사용자 경험에 영향을 미칠 수 있습니다. 이 기사에서는 PHP 개발을 사용하여 이미지 압축 및 로딩을 최적화하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

참고: 이 글에 사용된 코드는 서버 환경 및 확장 모듈 구성에 사용해야 합니다. 실제 상황에 따라 구체적인 작업 단계와 구성 방법을 조정하세요.

이미지 압축
이미지 압축은 이미지 파일 크기를 줄이는 일반적인 방법입니다. 다음은 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;
?>

로그인 후 복사

위 코드에서는 compressImage 함수를 사용하여 이미지를 압축했습니다. 이 함수는 소스 이미지 경로, 대상 이미지 경로 및 이미지 품질을 매개변수로 받아들입니다. 이미지의 실제 형식(JPEG 또는 PNG)에 따라 imagecreatefromjpeg 또는 imagecreatefrompng 함수를 사용하여 이미지 리소스를 만든 다음 imagejpeg</code를 사용하세요. > 경로의 대상에 이미지 리소스를 저장합니다. <code>compressImage函数来压缩图片。该函数接受源图片路径、目标图片路径和图片质量作为参数。根据图片的实际格式（JPEG或PNG），使用imagecreatefromjpeg或imagecreatefrompng函数创建图像资源，然后使用imagejpeg将图像资源保存到目标路径中。

图片加载优化
除了通过压缩图片来减小文件大小，还可以通过以下方法来优化图片的加载速度。

2.1 响应式图片
当用户使用不同设备访问网站时，可以根据设备的屏幕尺寸自动加载适合的图片大小。以下是一个使用srcset和sizes属性来实现响应式图片的示例代码：

<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">

로그인 후 복사

上述代码中，srcset属性包含多个备选图片路径和它们的宽度（w）值。sizes属性指定了不同屏幕尺寸下的图片大小。浏览器会根据当前设备的屏幕宽度和sizes属性的定义来选择合适的图片进行加载。

2.2 图片懒加载
图片懒加载是指当用户滚动到可见的区域时，才加载图片。以下是一个使用Lazy Load插件来实现图片懒加载的示例代码：

<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);
        });
    }
});

로그인 후 복사

上述代码中，data-src属性指定了真实的图片路径，placeholder.jpg是一个占位图片。IntersectionObserver是一个新的浏览器API，用于检测元素是否进入视口。当图片进入视口时，通过设置src

이미지를 압축하여 파일 크기를 줄이는 것 외에도 다음 방법을 통해 이미지 로딩 속도를 최적화할 수도 있습니다.

2.1 반응형 이미지

srcset

sizes

srcset

sizes

Lazy Load

data-src

placeholder.jpg

IntersectionObserver