圖片怎麼上傳才正確？
圖片是網站變慢的主因
在談尺寸與命名之前，先建立一個認知：網站慢，八成是圖片造成的。
常見的情況是直接把手機拍的照片或設計稿的原檔上傳——那些檔案可能有好幾 MB，而網頁上實際只顯示很小的尺寸。
訪客要下載完整的檔案，卻只看到縮小後的畫面。
上傳前先處理三件事
一、縮到合適的尺寸
不要上傳原始大小的照片。常見的建議：
| 用途 | 建議寬度 |
|---|---|
| 內文中的圖片 | 約 800 至 1200 像素 |
| 列表的縮圖 | 約 400 至 600 像素 |
| 橫幅主視覺 | 約 1600 至 1920 像素 |
實際尺寸依版型而定，可以問廠商各處建議用多大。
二、壓縮檔案
縮小尺寸之後再壓縮，通常可以在肉眼看不出差別的情況下減少檔案大小。
目標：內文圖片盡量控制在數百 KB 以內。
三、確認格式
- 照片——JPG 或較新的格式
- 需要透明背景——PNG
- 標誌與圖示——SVG 最好，放大不會模糊
格式的詳細比較見網站圖片格式怎麼選。
系統可能會自動處理，但不要依賴
部分網站系統會自動產生縮圖或壓縮。但原始檔仍然會佔用空間，而且自動處理的品質不一定理想。
上傳前自行處理過，結果通常比較好，也比較可控。
檔名怎麼取
這是最常被忽略卻很簡單的一項。
| 不建議 | 建議 |
|---|---|
| IMG_2847.jpg | steel-shelf-installation.jpg |
| 螢幕擷取畫面.png | product-catalog-2026.png |
| 未命名 (3).jpg | office-taoyuan.jpg |
三個原則
- 用英文小寫，單字之間用連字號
- 避免中文與空格——網址中會變成一長串編碼，難以閱讀與分享
- 描述圖片的內容
為什麼中文檔名會有問題
中文檔名在網址中會被轉成編碼形式，變成一長串看不懂的字元。這會造成：
- 網址變得很長很醜
- 分享或複製連結時容易出錯
- 部分系統或環境可能處理不正確
養成用英文檔名的習慣，日後省事很多。
替代文字：最容易被跳過的欄位
上傳圖片時通常會有一個「替代文字」欄位。它的作用是用文字描述這張圖的內容。
三個用途
- 圖片載入失敗時顯示
- 搜尋引擎理解圖片內容——它讀不懂圖片，只能靠這段文字
- 視障者使用螢幕報讀軟體時聽到的內容
怎麼寫
- 描述圖片實際呈現的東西
- 簡潔即可——一句話
- 不要堆砌關鍵字
- 純裝飾用的圖片可以留空
範例
- 不好：「圖片」「產品」「桃園網頁設計 網站架設 SEO」
- 建議：「三層鋼製層架安裝完成後的側面照」
詳細說明見圖片的替代文字與檔名該怎麼寫。
圖片中不要放重要文字
常見的做法是把一整段文案做成圖片直接上傳。這會造成：
- 搜尋引擎讀不到那些文字
- 手機上會縮到看不清楚
- 要改一個字就要重做整張圖
- 視障者完全無法取得那些資訊
正確做法是把文字打在內文中，圖片只放視覺元素。
如果一定要有文字圖
至少要把圖中的文字也寫在替代文字或內文中，讓資訊不會遺失。
版權：只能用有權使用的圖
這一點很重要，實務上真的會收到侵權通知。
不能用的
- 從搜尋引擎的圖片搜尋下載的
- 同業網站上的產品照——即使是同一款商品
- 社群平台上看到的照片
- 從型錄或雜誌翻拍的
可以用的
- 自行拍攝——最安全，也最能呈現真實樣貌
- 購買授權的圖庫素材
- 原廠提供且允許使用的素材——建議留下書面同意
「不確定就不要用」是最省成本的原則。
詳見別人的內容可以用嗎。
手機拍的照片要注意兩件事
一、方向可能是橫的
手機照片帶有方向資訊，某些情況下上傳後會呈現橫倒。上傳前先在電腦上開啟確認，必要時旋轉並另存。
二、可能含有拍攝地點
手機照片可能記錄了拍攝時的座標。如果是在客戶場地拍攝，上傳前建議移除這些資訊。
多數圖片處理軟體在另存或壓縮時會移除，但值得確認。
媒體庫的管理
上傳的圖片會累積，建議建立習慣：
- 用有意義的檔名——日後才找得到
- 如果系統支援資料夾，依用途分類
- 不要重複上傳同一張圖——先找找是否已存在
- 定期清理不再使用的圖片——但刪除前要確認沒有頁面在用
刪除圖片要小心
刪除媒體庫中的圖片，會讓所有引用它的頁面出現破圖。
不確定有沒有被使用時，建議先不要刪。
上傳前的檢查清單
- 尺寸縮到合適大小了嗎？
- 檔案壓縮過了嗎？
- 檔名是英文且有意義嗎？
- 方向正確嗎？
- 有使用權嗎？
- 替代文字填了嗎？
這六項變成習慣之後，每張圖只多花一分鐘，但網站的速度、搜尋表現與法遵風險都會明顯改善。
網站速度的完整說明見網站慢的常見原因與優先處理順序。