我需要在我自己的网站上使用原始尺寸为 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'});
首先，375 并不是一个庞大的尺寸，即使是使用移动设备的客户也可能不会注意到该尺寸图像所需的数据。
其次，浏览器总是会缓存图片。因此，如果您的页面上有三张带有来源的图片：
/images/375/myimage.jpg/images/200/myimage.jpg/images/90/myimage.jpg然后将下载所有三个。但是，如果您有三个使用相同来源的图像，例如：
<img src="/images/myimage.jpg" width="375"><img src="/images/myimage.jpg" width="200"><img src="/images/myimage.jpg" width="90">图像只需下载一次，其他两次将由浏览器缓存访问。
根据图像的大小以及它们在同一页面上出现的频率，创建一些不同的大小仍然是值得的。但是，在简单（小）的情况下，最好使用单个图像。