Question

链接http://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 functions。

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

//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;

提供者：ref

选择最适合你的

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

2 个答案: