在网站上缓存图像增加浏览体验，加载速度更快

Question

Link https://i.stack.imgur.com/9F0q5.jpg

我正在

尝试使我的网页加载更快，更好的用户体验，我正在尝试调整我网站中的这些图像的大小。我的网站有很多图片

至于上面的图像，您可以看到图像的原始尺寸（自然尺寸）为960 x 960，网站上显示的图像为214 x 214。

如果其中一个图像很大，比如 1920 x 1080，高清尺寸怎么办？加载整个页面等待高清图像完全加载需要更长的时间。

谁能告诉我解决方案。我看到很多网站都使用了图像缓存，当点击图像时，它会加载原始图像。

Answer 1

您需要使用缩略图。

要执行此操作，您需要放入缩小尺寸的图片的位置（=缩略图）。在网站上，您只显示小图片，通过单击它们，您可以显示真实大小的图片（我建议使用某种 Javascript 执行此操作）。

Answer 2

用于存储较小的图像（缩略图）：

function make_thumb($src, $dest, $desired_width) {
    /* read the source image */
    $source_image = imagecreatefromjpeg($src);
    $width = imagesx($source_image);
    $height = imagesy($source_image);
    /* find the "desired height" of this thumbnail, relative to the desired width  */
    $desired_height = floor($height * ($desired_width / $width));
    /* create a new, "virtual" image */
    $virtual_image = imagecreatetruecolor($desired_width, $desired_height);
    /* copy source image at a resized size */
    imagecopyresampled($virtual_image, $source_image, 0, 0, 0, 0, $desired_width, $desired_height, $width, $height);
    /* create the physical thumbnail image to its destination */
    imagejpeg($virtual_image, $dest);
}

它使用 php 的 GD 函数。

要在客户端浏览器上调整图像大小：

//on js
var thumbSize = 64;
var canvas = document.getElementById("canvas");
canvas.width = thumbSize;
canvas.height = thumbSize;
var c = canvas.getContext("2d");
var img = new Image();
img.onload = function(e) {
    c.drawImage(this, 0, 0, thumbSize, thumbSize);//64x64
    document.getElementById("yourImgID").src = canvas.toDataURL("image/png");
};
img.src = fileDataURL;

友情提供：参考

文献

选择最适合您的