網站上圖多大張適合?

最近有幾位客人
主機流量暴增

本來以為說客人生意很好
訂單滿滿
但後來發現
流量消耗的實在是太快了

稍微幫客戶看了一下
他首頁打開來
光圖片就吃了50M的流量
雖然頁面開起來是很快
但是是因為我們 Google 主機很夠力
圖片都太大張了

雖然畫面上顯示的大小大概是 300~500像素寬高
但圖片實際尺寸卻是 3000 x 3000 以上
一張圖片 6~8M

一個人打開首頁 就吃了50M
只要20個瀏覽次數 就會吃掉1G
難怪流量一下子就吃光了

其實我們也不是第一次發現這個問題
跟客戶反應

客戶收到這個訊息後
第一個會問的問題就是
"那建議尺寸是多大?"

其實產品圖片的尺寸 在 1000 x 1000 以下 比較適合
手機版的尺寸通常寬度不會超過1000像素
就算是 pc 版 全尺寸的產品圖
通常也不會超過2000
而且產品圖一般不會以全尺寸顯示
所以沒有必要使用超過 2000像素的圖片

但因為現在手機拍照很方便
很多客戶習慣手機拍照後
不裁切 就直接上傳
所以圖片都是原始尺寸
手機現在像素都超高
如果不裁切的話就會發生這樣的問題
所以建議還是先處理過再上傳會比較好

這邊建議兩種減少圖片容量的方法

1. 降低長寬尺寸
這邊指的尺寸是長寬的像素(pixel)值
如同上述
建議的尺寸是 1000像素以下
如果把 3000~4000 像素的圖片降低到 1000以下
通常 3~4M的圖片就可以變成 500~800K的圖片
可以至少節省 2/3 的頻寬跟儲存容量

2. 增加壓縮量
以JPEG格式的圖片來說
可以調整壓縮品質來控制壓縮程度
但壓縮太多 圖片就會變得不清楚
這邊介紹一個工具
可以免費幫你壓縮圖片容量
但又不會影響圖片品質的工具
https://tinyjpg.com/

2000x 2000的圖片 原本要 3M
壓縮後
一樣是 2000x 2000
但圖片容量變成 500K
超級厲害
大家可以試用看看

當然如果可以的話
網站上圖的時候就直接壓縮
就不需要手動壓縮啦
但這需要串接API
tinyjpg 也有提供 API 串接
但需要付費
另外付費的圖片壓縮工具
shortpixel
https://shortpixel.com/
更便宜

這些功能在路老闆的網站系統中都是內建的
您只需要購買服務後 把 key 塞到後台
以後上傳圖片的時候
系統就會自動幫你壓縮
節省時間 節省頻寬 節省主機使用容量
還可以提升使用者體驗
真的是一舉數得~

如果還有什麼網站圖片處理的問題
請不要客氣跟我說喔