Rumah >pembangunan bahagian belakang >tutorial php >Langkah pembelajaran PHP: Bagaimana untuk mengoptimumkan pemuatan imej

Langkah pembelajaran PHP: Bagaimana untuk mengoptimumkan pemuatan imej

王林
王林asal
2023-08-18 12:05:101280semak imbas

Langkah pembelajaran PHP: Bagaimana untuk mengoptimumkan pemuatan imej

Langkah pembelajaran PHP: Cara mengoptimumkan pemuatan imej

Dalam pembangunan web moden, mengoptimumkan pemuatan imej adalah topik penting. Dengan pembangunan reka bentuk web, imej telah menjadi sebahagian daripada halaman. Walau bagaimanapun, imej yang terlalu besar atau tidak dioptimumkan boleh menyebabkan halaman web dimuatkan dengan perlahan, menjejaskan pengalaman pengguna. Oleh itu, mempelajari cara mengoptimumkan pemuatan imej adalah kemahiran yang harus dikuasai oleh setiap pembangun PHP.

Yang berikut akan memperkenalkan beberapa kaedah yang biasa digunakan untuk mengoptimumkan pemuatan imej dan contoh kod PHP yang sepadan. Kami akan mengembangkan imej termampat, pemuatan malas dan output strim bait.

  1. Mampatkan imej

Mampatan imej ialah kaedah yang biasa digunakan untuk mengoptimumkan pemuatan imej. Dengan mengurangkan saiz fail, anda boleh mengurangkan masa yang diambil untuk imej dipindahkan melalui rangkaian. PHP menyediakan pelbagai cara untuk memampatkan imej Berikut adalah contoh kod berdasarkan perpustakaan GD:

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

Dalam kod di atas, kami menggunakan fungsi yang disediakan oleh perpustakaan GD untuk memampatkan imej. Mula-mula, buka imej asal melalui fungsi imagecreatefromjpeg(), dan kemudian dapatkan dimensinya. Seterusnya, cipta imej sasaran dengan dimensi yang sama seperti imej asal dan gunakan fungsi imagecopyresampled() untuk memampatkan imej asal ke dalam imej sasaran. Akhir sekali, gunakan fungsi imagejpeg() untuk menyimpan imej sasaran dan melepaskan memori. imagecreatefromjpeg()函数打开原始图片,然后获取其尺寸。接下来,创建一个与原始图片尺寸相同的目标图片,使用imagecopyresampled()函数将原始图片压缩到目标图片中。最后,使用imagejpeg()函数保存目标图片,并释放内存。

  1. 延迟加载

延迟加载是一种优化图片加载的方法,可以减少页面的加载时间。通过延迟加载,我们可以将图片的加载推迟到用户浏览到页面中需要的时候再进行。下面是一个简单的延迟加载的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="Langkah pembelajaran PHP: Bagaimana untuk mengoptimumkan pemuatan imej" >标签。其中data-original属性指向原始图片路径,class属性为lazyload。然后在页面底部引入延迟加载的JavaScript库,并通过初始化配置来延迟加载所有带有lazyload类的图片。当用户浏览到需要加载图片的位置时,延迟加载库会将原始图片路径赋值给src属性,实现延迟加载。

  1. 字节流输出

字节流输出是一种优化图片加载的方法,可以减少图片在网络中的传输时间。通过直接将图片的字节流输出到浏览器,可以避免使用磁盘中的临时文件。下面是一个使用字节流输出图片的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 ialah kaedah mengoptimumkan pemuatan imej, yang boleh mengurangkan masa memuatkan halaman. Dengan malas memuatkan, kami boleh menangguhkan pemuatan imej sehingga pengguna perlu melayari halaman tersebut. Berikut ialah contoh kod PHP pemuatan malas yang mudah:

    rrreee🎜Dalam kod di atas, kami mula-mula mengeluarkan teg <img alt="Langkah pembelajaran PHP: Bagaimana untuk mengoptimumkan pemuatan imej" > dengan imej pemegang tempat dan konfigurasi pemuatan malas. Atribut data-original menghala ke laluan imej asal dan atribut class ialah lazyload. Kemudian perkenalkan perpustakaan JavaScript pemuatan malas di bahagian bawah halaman dan muatkan semua imej dengan malas dengan kelas lazyload melalui konfigurasi permulaan. Apabila pengguna menyemak imbas ke lokasi di mana imej perlu dimuatkan, perpustakaan pemuatan malas akan menetapkan laluan imej asal kepada atribut src untuk melaksanakan pemuatan malas. 🎜
      🎜Output strim Byte🎜🎜🎜Output strim Byte ialah kaedah untuk mengoptimumkan pemuatan imej, yang boleh mengurangkan masa penghantaran imej pada rangkaian. Dengan mengeluarkan strim bait imej terus ke penyemak imbas, anda boleh mengelak daripada menggunakan fail sementara pada cakera. Berikut ialah contoh kod PHP yang menggunakan aliran bait untuk mengeluarkan imej: 🎜rrreee🎜Dalam kod di atas, kami mula-mula menggunakan fungsi mime_content_type() untuk mendapatkan jenis MIME imej, dan lulus header() menetapkan pengepala respons. Kemudian aliran bait imej dikeluarkan kepada penyemak imbas melalui fungsi <code>readfile(). 🎜🎜Ringkasan🎜🎜Mengoptimumkan pemuatan imej adalah penting untuk meningkatkan prestasi halaman web dan pengalaman pengguna. Pemuatan imej boleh dioptimumkan dengan berkesan melalui kaedah seperti pemampatan imej, pemuatan malas dan output strim bait. Dalam pembangunan PHP, kita boleh menggunakan perpustakaan GD untuk pemampatan imej, pemuatan malas imej melalui perpustakaan pemuatan malas, dan imej output melalui aliran bait. Menguasai kaedah ini boleh membantu kami membangunkan halaman web yang lebih pantas dan lebih cekap. Saya harap artikel ini dapat membantu anda mengoptimumkan pemuatan imej dalam proses pembelajaran PHP. 🎜

Atas ialah kandungan terperinci Langkah pembelajaran PHP: Bagaimana untuk mengoptimumkan pemuatan imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn