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

【问题标题】：cache image on website increase browsing experience, load faster在网站上缓存图像增加浏览体验，加载更快
【发布时间】：2014-01-23 23:12:41
【问题描述】：

链接http://i.stack.imgur.com/9F0q5.jpg

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

至于上面的图片，可以看到图片的原始尺寸（Natural Size）是960 x 960，网站上显示的图片是214 x 214。

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

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

【问题讨论】：

你不能存储更小的尺寸（缩略图）吗？这样你可以查看它，成本更低
我可以，但是图片会被很多用户发布。如果是我的图片，我不会问如何缓存它：P 我想知道一种更动态的方式来自动缓存大照片以使其更小。

标签： php image caching browser

【解决方案1】：

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

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

它使用GD functions的php。

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

//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】：

您需要使用缩略图。

要执行此操作，您需要放置缩小图片的位置（=缩略图）。在网站上，您只显示小图片，点击它们会显示实际大小的图片（我建议使用某种 Javascript 来执行此操作）。

【讨论】：

我发现了几个使用 php 将原始图像缩小为缩略图的插件。但我无法弄清楚它是如何完成的。有没有什么插件可以推荐。可以使用javascript吗？
在 Javascript 中调整它们的大小违背了整个目的，他说这是为了减少通过网络发送的不必要的数据量。