針對不同尺寸圖片的圖像優化

我需要在我自己的圖片中使用原始尺寸爲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是不是一個巨大的尺寸，甚至使用手機可能不會注意到所需的客戶數據爲這個大小的圖像。

其次，瀏覽器將總是緩存圖像。所以，如果你有你的頁面上有源三幅影像：

則所有三個將被下載。但是，如果使用相同的源，像有三幅影像：

圖像將只需要下載一次，另兩次將被瀏覽器緩存訪問。

根據圖像的大小以及它們出現在同一頁面上的頻率，它可能仍然值得創建不同的大小。但是，在簡單（小）情況下，最好使用單個圖像。

2017-09-03 13:16:43 arbuthnott

我同意。但是，如果您真的想要/需要優化，您可以使用像cloudinary，imgix或類似的服務，這些服務非常容易實現，無需構建自己的圖像管理。或者如果你想保持本地的東西，那裏有很多圖像調整大小的課程。 – VA79

回答