iT邦幫忙

0

請問是否 <img src="data:image..." + gzipping 比用 <ima src="url"> 好?

請問是否 <img src="data:image..." + gzipping 比用 <ima src="url"> 好?

像是有100多張圖片,使用 img src data:image 只需要一次請求,假如在加上 gzipping 壓縮,是否比100個請求的 img src url 方式好?

看更多先前的討論...收起先前的討論...
fillano iT邦超人 1 級 ‧ 2020-08-19 17:14:59 檢舉
要看圖片多大,可以先考慮用CSS Sprite的方式處理。如果是像照片之類較大的圖片,一次載入一百多張並不合理,也許該lazy loading
淺水員 iT邦大師 6 級 ‧ 2020-08-19 17:32:00 檢舉
多個頁面共用的圖片,也是另外放比較好。因為有機會利用 cache 機制減低流量。
淺水員 iT邦大師 6 級 ‧ 2020-08-19 17:42:41 檢舉
另外圖片本身就已經壓縮過了,對圖片用 gzip 是浪費效能的行為。
想要圖片小一點,除了縮圖外,也有一些對圖片做最佳化的軟體可以減少圖片大小。
PS. 現在應該沒人在用 BMP 那種沒壓縮過的圖片了吧。
感謝大神們的分享
<img src='thumb.php?t=0001&w=100' >取縮圖,至於thumb.php是我自己掰的,你可以上網找各平台的縮圖做法版本,aspx , php , python , jsp ......都有

這是用C/GPU換取流量的做法

不說別的,FB跟IG都是瀏覽時只顯示縮圖,點進去看才給你原圖
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
wolfwang
iT邦研究生 4 級 ‧ 2020-08-19 17:29:52
最佳解答

雖然可以減少請求數,不過卻會帶來一些麻煩,像是每次圖片有修改,網頁就得要修改、上傳,沒辦法只改圖片。另外因為網頁本身變得較肥,載入速度變慢,是不是可以彌補請求圖片的時間,也很難說。

如果圖片是載入速度的瓶頸,可以從:

  • 上傳圖片時壓縮成適合版面或裝置尺寸的大小
  • 使用無損壓縮轉圖
  • lazy load 載入圖片
  • 用 CDN 來加速圖片載入

應該都可以收到不錯的效果。

感謝 wolfwang 大神您的分享!!
原來還有這麼多方式

我要發表回答

立即登入回答