Comment optimiser la compression et le chargement des images dans le développement PHP-tutoriel php-php.cn

Comment optimiser la compression et le chargement des images dans le développement PHP

WBOY

Libérer： 2023-10-08 18:20:02

original

799 Les gens l'ont consulté

Comment optimiser la compression et le chargement des images dans le développement PHP

Comment optimiser la compression des images et optimiser le chargement dans le développement PHP

Résumé :
Dans un site Web, les images sont un élément important qui permet aux utilisateurs d'avoir une expérience plus intuitive et attrayante. Cependant, les fichiers image sont généralement plus volumineux et plus lents à charger, ce qui peut affecter les performances du site Web et l'expérience utilisateur. Cet article présentera en détail comment utiliser le développement PHP pour optimiser la compression et le chargement des images, et fournira des exemples de code spécifiques.

Veuillez noter : le code utilisé dans cet article doit être utilisé avec la configuration de l'environnement du serveur et des modules d'extension. Veuillez ajuster les étapes de fonctionnement spécifiques et les méthodes de configuration en fonction de votre situation réelle.

Compression d'image
La compression d'image est une méthode courante pour réduire la taille du fichier image. Voici un exemple de code pour la compression d'images à l'aide de 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;
?>

Copier après la connexion

Dans le code ci-dessus, la fonction compressImage est utilisée pour compresser les images. Cette fonction accepte le chemin de l'image source, le chemin de l'image cible et la qualité de l'image comme paramètres. Selon le format réel de l'image (JPEG ou PNG), utilisez la fonction imagecreatefromjpeg ou imagecreatefrompng pour créer la ressource image, puis utilisez imagejpeg</code > pour enregistrer la ressource image sur la cible dans le chemin. <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">

Copier après la connexion

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

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

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

Copier après la connexion

// 引入 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);
        });
    }
});

Copier après la connexion

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

En plus de compresser les images pour réduire la taille du fichier, vous pouvez également optimiser la vitesse de chargement des images grâce aux méthodes suivantes.

2.1 Images réactives

srcset

sizes

srcset

sizes

Lazy Load

data-src

placeholder.jpg

IntersectionObserver

src

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!