PHP-Lernschritte: So optimieren Sie das Laden von Bildern

PHP-Lernschritte: So optimieren Sie das Laden von Bildern

In der modernen Webentwicklung ist die Optimierung des Ladens von Bildern ein wichtiges Thema. Mit der Entwicklung des Webdesigns sind Bilder zu einem integralen Bestandteil der Seite geworden. Zu große oder nicht optimierte Bilder können jedoch dazu führen, dass Webseiten langsam geladen werden, was sich negativ auf das Benutzererlebnis auswirkt. Daher ist das Erlernen der Optimierung des Bildladens eine Fähigkeit, die jeder PHP-Entwickler beherrschen sollte.

Im Folgenden werden einige häufig verwendete Methoden zur Optimierung des Bildladens und entsprechende PHP-Codebeispiele vorgestellt. Wir werden auf komprimierte Bilder, Lazy Loading und Byte-Stream-Ausgabe eingehen.

1. Bilder komprimieren

Bildkomprimierung ist eine häufig verwendete Methode zur Optimierung des Bildladens. Durch die Reduzierung der Dateigröße können Sie die Zeit verkürzen, die Bilder für die Übertragung durch das Netzwerk benötigen. PHP bietet verschiedene Möglichkeiten zum Komprimieren von Bildern. Das Folgende ist ein Beispielcode, der auf der GD-Bibliothek basiert:

<?php
// 原始图片路径
$source_path = '/path/to/source/image.jpg';

// 目标图片路径
$target_path = '/path/to/target/image.jpg';

// 打开原始图片
$source_image = imagecreatefromjpeg($source_path);

// 获取原始图片的尺寸
$width = imagesx($source_image);
$height = imagesy($source_image);

// 创建目标图片
$target_image = imagecreatetruecolor($width, $height);

// 压缩原始图片到目标图片
imagecopyresampled($target_image, $source_image, 0, 0, 0, 0, $width, $height, $width, $height);

// 保存目标图片
imagejpeg($target_image, $target_path);

// 释放内存
imagedestroy($source_image);
imagedestroy($target_image);
?>

Im obigen Code verwenden wir die von der GD-Bibliothek bereitgestellten Funktionen zum Komprimieren von Bildern. Öffnen Sie zunächst das Originalbild über die Funktion imagecreatefromjpeg() und ermitteln Sie dann seine Abmessungen. Erstellen Sie als Nächstes ein Zielbild mit den gleichen Abmessungen wie das Originalbild und komprimieren Sie das Originalbild mit der Funktion imagecopyresampled() in das Zielbild. Verwenden Sie abschließend die Funktion imagejpeg(), um das Zielbild zu speichern und den Speicher freizugeben. imagecreatefromjpeg()函数打开原始图片，然后获取其尺寸。接下来，创建一个与原始图片尺寸相同的目标图片，使用imagecopyresampled()函数将原始图片压缩到目标图片中。最后，使用imagejpeg()函数保存目标图片，并释放内存。

2. 延迟加载

延迟加载是一种优化图片加载的方法，可以减少页面的加载时间。通过延迟加载，我们可以将图片的加载推迟到用户浏览到页面中需要的时候再进行。下面是一个简单的延迟加载的PHP代码示例：

<?php
// 原始图片路径
$source_path = '/path/to/source/image.jpg';

// 占位图片路径
$placeholder_path = '/path/to/placeholder/image.jpg';

// 替代属性
$alt = '图片';

// 输出占位图片
echo "<img src='{$placeholder_path}' data-original='{$source_path}' alt='{$alt}' class='lazyload' />";
?>

<script src="https://cdn.jsdelivr.net/npm/lazyload/lazyload.min.js"></script>
<script>
// 延迟加载配置
lazyloadConfig = {
    elements_selector: ".lazyload",
    callback_reveal: function(element) {
        element.src = element.getAttribute('data-original');
    }
};

// 初始化延迟加载
LazyLoad.init(lazyloadConfig);
</script>

上述代码中，我们首先输出一个带有占位图片和延迟加载配置的<img alt="PHP-Lernschritte: So optimieren Sie das Laden von Bildern" >标签。其中data-original属性指向原始图片路径，class属性为lazyload。然后在页面底部引入延迟加载的JavaScript库，并通过初始化配置来延迟加载所有带有lazyload类的图片。当用户浏览到需要加载图片的位置时，延迟加载库会将原始图片路径赋值给src属性，实现延迟加载。

3. 字节流输出

字节流输出是一种优化图片加载的方法，可以减少图片在网络中的传输时间。通过直接将图片的字节流输出到浏览器，可以避免使用磁盘中的临时文件。下面是一个使用字节流输出图片的PHP代码示例：

<?php
// 图片路径
$image_path = '/path/to/image.jpg';

// 获取图片的MIME类型
$mime_type = mime_content_type($image_path);

// 设置响应头
header('Content-Type: '.$mime_type);

// 输出图片字节流
readfile($image_path);
?>

上述代码中，我们首先使用mime_content_type()函数获取图片的MIME类型，并通过header()函数设置响应头。然后通过readfile()

Lazy Loading

Lazy Loading ist eine Methode zum Optimieren des Ladens von Bildern, wodurch die Ladezeit der Seite verkürzt werden kann. Durch verzögertes Laden können wir das Laden von Bildern verschieben, bis der Benutzer die Seite durchsuchen muss. Das Folgende ist ein einfaches PHP-Codebeispiel für verzögertes Laden:

rrreee🎜Im obigen Code geben wir zunächst ein <img alt="PHP-Lernschritte: So optimieren Sie das Laden von Bildern" >-Tag mit einem Platzhalterbild und einer Lazy-Loading-Konfiguration aus. Das Attribut data-original verweist auf den ursprünglichen Bildpfad und das Attribut class ist lazyload. Führen Sie dann unten auf der Seite die JavaScript-Bibliothek zum verzögerten Laden ein und laden Sie alle Bilder mithilfe der Klasse lazyload durch die Initialisierungskonfiguration träge. Wenn der Benutzer zu dem Speicherort navigiert, an dem das Bild geladen werden muss, weist die Lazy-Loading-Bibliothek den ursprünglichen Bildpfad dem Attribut src zu, um Lazy Loading zu implementieren. 🎜
🎜Byte-Stream-Ausgabe🎜🎜🎜Byte-Stream-Ausgabe ist eine Methode zur Optimierung des Bildladens, wodurch die Übertragungszeit von Bildern im Netzwerk verkürzt werden kann. Indem Sie den Bytestream des Bildes direkt an den Browser ausgeben, können Sie die Verwendung temporärer Dateien auf der Festplatte vermeiden. Das Folgende ist ein Beispiel für PHP-Code, der Byteströme zur Ausgabe von Bildern verwendet: 🎜rrreee🎜Im obigen Code verwenden wir zunächst die Funktion mime_content_type(), um den MIME-Typ des Bildes abzurufen und zu übergeben header() legt den Antwortheader fest. Anschließend wird der Bytestrom des Bildes über die Funktion <code>readfile() an den Browser ausgegeben. 🎜🎜Zusammenfassung🎜🎜Die Optimierung des Ladens von Bildern ist entscheidend für die Verbesserung der Webseitenleistung und des Benutzererlebnisses. Das Laden von Bildern kann durch Methoden wie Bildkomprimierung, Lazy Loading und Byte-Stream-Ausgabe effektiv optimiert werden. In der PHP-Entwicklung können wir die GD-Bibliothek für die Bildkomprimierung, das verzögerte Laden von Bildern über die Lazy-Loading-Bibliothek und die Ausgabe von Bildern über Bytestreams verwenden. Die Beherrschung dieser Methoden kann uns helfen, schnellere und effizientere Webseiten zu entwickeln. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, das Laden von Bildern beim Erlernen von PHP zu optimieren. 🎜

Das obige ist der detaillierte Inhalt vonPHP-Lernschritte: So optimieren Sie das Laden von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!