存儲多個縮略圖vs使用css

Question

我正在一個網站，目前存儲縮略圖的大小100x100。設計師正在與我們合作，並創建了一個需要縮略圖100x100,32x32,22x22和16x16的設計。

很可能在網站上任何給定的頁面會以不同的大小顯示相同的縮略圖多次。

我的問題是：我們應該創造和各大小商店縮略圖？或者，將縮略圖存儲爲100x100就足夠了，只需使用CSS即可實現較小的縮略圖大小？

我的理論是用一刀切的100x100的縮略圖，並使用CSS來獲得所需的規模將有更好的表現：不是存儲各種不同的尺寸（即更快的頁面加載）。

我爲什麼這麼想？

因爲第一次的100×100的下載將被緩存和CSS將「調整」它始終在使用相同的圖像的頁面。如果我們明確地存儲和引用不同的圖像文件，我們將需要抓取4個文件而不是1個，並且也無法利用瀏覽器的緩存。

想法？

Answer 1

你不能總是保證端瀏覽器會緩存頁面。特別是在移動設備上，內存非常有限，因此快速緩存會被填滿並且無效。

如果你想快速的頁面加載時間，你會想使小的圖像，因爲他們會更快地下載。唯一的問題是請求時間。瀏覽事物的人（如圖像庫）將會瀏覽並僅點擊幾張圖像。如果您從所有小縮略圖開始，頁面加載速度會非常快，然後當它們要求增加選定大小的頁面大小時，您會動態加載這些圖像。

你可以做的一件事是減少請求是使用服務器端腳本來將每個大小的所有縮略圖放入一個排列的tileset中（按大小排序......如果是靜態的，也可以手動執行此操作頁面）並使用CSS來調整視圖邊界。這是JQuery如何做他們的按鈕。這樣可以讓你只需要請求一張圖片就可以加載給定集合的所有縮略圖。隨着最終用戶要求增加縮略圖的大小，您的頁面可以動態請求更大的尺寸。這樣做的缺點是，如果您在每個頁面上都有很多圖片，那麼您可以下載一個大圖片，並且我相信在許多瀏覽器中，用戶只有在完全加載後纔會看到圖片。使用單個縮略圖，他們可以看到他們的進步。