如何在加載圖像時縮小圖像的大小

Question

我想以16x16顯示圖像。但是當我用css做這件事時，例如：（width：16px;），圖片仍然以原始大小加載，這會減慢加載頁面所需的時間。我想知道是否有一種方法只能將圖像加載爲16x16而不是像2000x2000，而不僅僅是改變圖像的寬度和高度，也不會改變圖像的實際大小。

感謝 伊恩

Answer 1

基本上你需要有兩個圖像。全尺寸的一個和一個縮略圖。您應該謹慎使用CSS來縮放圖像的大小，大部分時間您應該將圖像調整爲您想要的大小。當你有一個2000x2000大小的圖像並使用CSS來使它成爲16x16時，你仍然在加載2000x2000大小的圖像。無論在用戶瀏覽器中如何渲染，其仍然佔用相同數量的帶寬。因此，通過創建縮略圖圖像，您可以極大地減少在用戶瀏覽器中加載的大小和時間。

Answer 2

呃......不是嗎？

你問的問題就像是問你是否可以拿500頁的文章，並且每讀一百封信，而不計算整個文檔。

唯一真正的方法是首先將圖像設置爲16x16。

Answer 3

客戶無法調整大小或壓縮圖像以獲得性能優勢。如果客戶端可以壓縮圖像，它會仍然不得不下載全尺寸的原始圖片，從而破壞壓縮的目的。

因此，以16x16格式獲取圖像的唯一方法是使其成爲該尺寸，或使用服務器端腳本來調整圖像大小。