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

链接

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

对于上面的图像，您可以看到图像的原始大小（自然大小）是960 x 960，而网站上显示的图像是214 x 214

如果其中一幅图像是巨大的，比如1920 x 1080，高清大小。这将需要更长的时间来加载整个页面，等待高清图像完全加载

---

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

你需要使用缩略图

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

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

它使用了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;

礼节：

---

选择最适合你的

你也可以存储较小的尺寸（缩略图）吗？这样你就可以查看它，花费更少，但是图像会被很多用户发布。如果是我的图片，我不会问如何缓存它：P我想知道一种更动态的方法来自动缓存大照片，使其更小。我找到了几个使用php将原始图片缩小为缩略图的插件。但我不知道怎么做。有什么插件可以推荐吗。有可能使用javascript吗？在javascript中调整它们的大小会破坏整个目的，他说这是为了减少通过网络不必要地发送的数据量。谢谢，我将尝试这两种方法。：）

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