链接http://i.stack.imgur.com/9F0q5.jpg
我试图使我的网页加载更快和更好的用户体验,我试图调整这些图片在我的网站。我的网站上有很多图片
至于上面的图像,您可以看到图像的原始大小(自然大小)是960x960,在网站上显示的图像是214 x 214。
如果其中一幅图像是巨大的,比如1920年x 1080,高清大小。它将需要更长的时间来加载整个页面,等待高清图像充分加载。
有人能告诉我解决办法吗。我看到很多网站都使用了图像缓存,当点击图片时,它会加载原始图像。
发布于 2014-01-06 14:23:14
您需要使用缩略图。
要执行此操作,您需要放置缩小大小的图片的位置。在网站上,你只显示小的图片,点击它们显示真实大小的图片(我建议用某种Javascript来实现这一点)。
发布于 2014-01-06 21:05:29
用于存储较小的图像(缩略图):
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;提供:参考
选一个最适合你的
https://stackoverflow.com/questions/20951834
复制相似问题