So optimieren Sie die Bildkomprimierung und das Laden in der PHP-Entwicklung

So optimieren Sie die Bildkomprimierung und das Laden in der PHP-Entwicklung

Zusammenfassung:
Auf einer Website sind Bilder ein wichtiges Element, das Benutzern ein intuitiveres und attraktiveres Erlebnis ermöglicht. Allerdings sind Bilddateien in der Regel größer und langsamer zu laden, was sich auf die Leistung der Website und das Benutzererlebnis auswirken kann. In diesem Artikel wird detailliert beschrieben, wie Sie mithilfe der PHP-Entwicklung die Komprimierung und das Laden von Bildern optimieren können, und es werden spezifische Codebeispiele bereitgestellt.

Bitte beachten Sie: Der in diesem Artikel verwendete Code muss bei der Konfiguration der Serverumgebung und der Erweiterungsmodule verwendet werden. Bitte passen Sie die spezifischen Betriebsschritte und Konfigurationsmethoden entsprechend Ihrer tatsächlichen Situation an.

1. Bildkomprimierung
   Bildkomprimierung ist eine gängige Methode zur Reduzierung der Bilddateigröße. Das Folgende ist ein Beispielcode für die Bildkomprimierung mit 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;
?>

Im obigen Code wird die Funktion compressImage zum Komprimieren von Bildern verwendet. Diese Funktion akzeptiert den Quellbildpfad, den Zielbildpfad und die Bildqualität als Parameter. Abhängig vom tatsächlichen Format des Bildes (JPEG oder PNG) verwenden Sie die Funktion imagecreatefromjpeg oder imagecreatefrompng, um die Bildressource zu erstellen, und verwenden Sie dann imagejpeg</code > um die Bildressource im Ziel im Pfad zu speichern. <code>compressImage函数来压缩图片。该函数接受源图片路径、目标图片路径和图片质量作为参数。根据图片的实际格式（JPEG或PNG），使用imagecreatefromjpeg或imagecreatefrompng函数创建图像资源，然后使用imagejpeg将图像资源保存到目标路径中。

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

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

<img src="/static/imghw/default1.png"  data-src="path/to/image.jpg"  class="lazy"
     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 class="lazy lazy"  src="/static/imghw/default1.png"  data-src="placeholder.jpg" 
     data-
     alt="Lazy Load Image">

// 引入 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

Optimierung des Ladens von Bildern

Neben der Komprimierung von Bildern zur Reduzierung der Dateigröße können Sie auch die Ladegeschwindigkeit von Bildern mit den folgenden Methoden optimieren.


2.1 Responsive Bilder

Wenn Benutzer mit unterschiedlichen Geräten auf die Website zugreifen, kann automatisch die passende Bildgröße entsprechend der Bildschirmgröße des Geräts geladen werden. Das Folgende ist ein Beispielcode, der die Attribute srcset und sizes verwendet, um responsive Bilder zu implementieren: 🎜rrreee🎜Im obigen Code das Attribut srcset enthält mehrere alternative Bildpfade und deren Breitenwerte (w). Das Attribut sizes gibt die Bildgrößen für verschiedene Bildschirmgrößen an. Der Browser wählt das geeignete Bild zum Laden basierend auf der Bildschirmbreite des aktuellen Geräts und der Definition des Attributs sizes aus. 🎜🎜2.2 Verzögertes Laden von Bildern🎜Verzögertes Laden von Bildern bedeutet, dass Bilder nur geladen werden, wenn der Benutzer zum sichtbaren Bereich scrollt. Das Folgende ist ein Beispielcode, der das Plug-in Lazy Load verwendet, um das verzögerte Laden von Bildern zu implementieren: 🎜rrreeerrreee🎜Im obigen Code gibt das Attribut data-src an echter Bildpfad, placeholder.jpg ist ein Platzhalterbild. IntersectionObserver ist eine neue Browser-API zum Erkennen, ob ein Element in das Ansichtsfenster gelangt. Wenn das Bild in das Ansichtsfenster gelangt, laden Sie das echte Bild, indem Sie das Attribut src festlegen. 🎜🎜Fazit: 🎜Durch die Verwendung der oben genannten Methoden können wir die Bildkomprimierung und das Laden in der PHP-Entwicklung optimieren und dadurch die Leistung und Benutzererfahrung der Website verbessern. Durch die Komprimierung von Bilddateien und die Optimierung der Lademethoden können Sie die Größe der Bilddateien erheblich reduzieren und die Ladegeschwindigkeit der Website verbessern. In der tatsächlichen Entwicklung können wir je nach Bedarf geeignete Methoden auswählen, um eine Bildkomprimierung und Ladeoptimierung zu erreichen. 🎜🎜 (Hinweis: Der Beispielcode in diesem Artikel dient nur als Referenz und zum Lernen. Bitte passen Sie die spezifischen Vorgänge entsprechend den tatsächlichen Anforderungen und der Konfiguration an.) 🎜

Das obige ist der detaillierte Inhalt vonSo optimieren Sie die Bildkomprimierung und das Laden in der PHP-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!