Question

我需要在我自己的网站上使用原始尺寸为375 x 375像素的图片，有4种不同尺寸（375 x 375,200 x 200,160 x 160和90 x 90像素）。

如果我想让我的网站图片优化，我应该为每个尺寸制作四个不同的文件夹，并将图片与他们自己的大小放在该文件夹中！？或者有更好的方法吗？

现在我正在使用此代码，我知道这对图像优化不正确

$(this).data({'image': thumbImage, 'zoom-image': zoomImage}).find('img').css({'width': '90px', 'height': 'auto'});

Answer 1

首先，375不是一个庞大的尺寸，即使使用手机的客户可能也不会注意到该尺寸图像所需的数据。

其次，浏览器将始终缓存图像。因此，如果您的页面上有三个图像来源：

然后将下载所有三个。但是，如果您有三个使用相同来源的图像，例如：

图像只需要下载一次，其他两次将被浏览器缓存访问。

根据图像的大小以及它们在同一页面上出现的频率，创建一些不同的尺寸可能仍然值得。但是，在简单（小）的情况下，最好使用单个图像。