路老闆個人品牌網站
0
  • 會員登入
  • 關於我們
    回主選單
    • 關於我們
  • 服務項目
  • 我的錄音小間
  • 課程活動
    回主選單
    • 線上課程
    • 預約服務
    • 活動報名
  • 商品總覽
  • 創作與紀錄
    回主選單
    • 部落格
    • 影像紀錄
    • Podcast
    • 我的作品
  • 最新消息
  • 聯絡我們
  • Join us
  • Login
  • 0
    路老闆個人品牌網站
  • 關於我們
    關於我們
  • 服務項目
  • 我的錄音小間
  • 課程活動
    線上課程 預約服務 活動報名
  • 商品總覽
  • 創作與紀錄
    部落格 影像紀錄 Podcast 我的作品
  • 最新消息
  • 聯絡我們
部落格
  • 文章總覽
  • 分類
  • 技術筆記
  • 日本旅遊
  • 網站搬家
  • 時事觀察
  • 投資理財
  • 公司經營
  • 主機架設
  • 接案
  • 遊戲心得
  • 產品開箱
  • 網頁相關
  • 金流串接
  • 遊戲經濟
  • 閒聊
  • 直銷
  • CodeIgniter
  • cpanel
  • 出書材料
  • 個人品牌
  • SEO
  • 讀書心得
  • 金流物流
  • 線上課程心得
  • 日劇
    • 大河劇
      • 真田丸
  • AI
91app ClubHouse php8 imunify360 cdn apache php nginx linode digitalocean
  1. 首頁
  2. 部落格
  3. 網站上圖多大張適合?

網站上圖多大張適合?

2021 Dec 22 技術筆記 網頁相關

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

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

稍微幫客戶看了一下
他首頁打開來
光圖片就吃了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 塞到後台
以後上傳圖片的時候
系統就會自動幫你壓縮
節省時間 節省頻寬 節省主機使用容量
還可以提升使用者體驗
真的是一舉數得~

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

  • 分享此文章
0則留言

相關文章

.NET 存取 web

爬蟲(crawler)是什麼? 爬蟲的運作原理

(預)2009大阪難波五日遊

客製化 部落格 的好處

Google Compute Engine 寄送 Email 的問題

[2021-12月] webp safari 瀏覽器支援狀況

因為某些瀏覽器一直沒有支援 webp 格式 所以一直不敢換 webp

關於路老闆

推薦連結

  • Alice 你的理財陪跑教練
  • 羅鈞鴻/小虎老師
  • 徐慧玲Lynn
  • 寶寶牙醫 沈醫師
  • 保險資訊懶人包
  • 你的好感度教練
  • 天下為暢

聯絡我們

  • Email: louis@boss-louis.tw
  • 營業時間: 09:00~18:00
  • 聯絡電話: 02-77252950
  • 地址: 106 台北市大安區忠孝東路四段270號17樓
  • 隱私權政策
COPYRIGHT ©路老闆個人品牌網站 All rights reserved | Powered by 路老闆