上傳圖片注意事項
善用精美的圖片展示,能讓瀏覽者快速掌握產品特色並提升購買意願。
圖片不是愈大愈好!過大的圖片檔案對畫面清晰度沒有額外幫助,反而會增加載入時間,影響網頁速度與 SEO 分數。
為了確保網站效能,請務必遵循以下圖片上傳規範。
一、螢幕解析度基本觀念
🖥️螢幕顯示與印刷的差異
- 印刷:圖片解析度越高,細節就能印得越清楚,所以需要大檔案。
- 螢幕:顯示效果取決於「螢幕解析度」本身,圖片超過這個範圍,螢幕也無法顯示更多細節。
一般常見的螢幕解析度為 1920×1080 (Full HD),超過這些解析度的圖片,畫面看起來不會更清楚。即使圖片檔案非常大(例如 2MB 以上),畫質仍受到螢幕解析度限制。
二、圖片尺寸與容量建議
📏上傳標準規範
- 強烈建議依照後台的「建議尺寸」上傳圖片。
- 檔案容量大小建議:最佳為 100KB~300KB,過大的圖檔將有可能造成網站載入速度變慢。
💡 建議處理方式
- 統一尺寸:務必先將圖片尺寸調整成建議尺寸,再上傳至後台。
- 重新命名:若圖片重新上傳時,檔名也要重新命名,避免系統判斷為原檔案而不更新。
- 壓縮瘦身:請務必在上傳前先壓縮圖片,避免消耗流量甚至影響 SEO 排名。
- 壓縮工具推薦:我們建議您使用 TinyPNG(米洛設計師也有在使用),該工具能有效壓縮圖片檔案,並保留畫質。
- 更多資源:米洛線上教學網站中尚有分享免費線上的圖片編輯軟體,您可以參考:米洛線上教學網站>技術支援>圖片編輯
三、圖片命名與上傳規範
🏷️檔案管理規則
1. 圖片命名規則
請僅使用 英文 或 數字 或 兩者組合(例如:sample_01)。
🚨 嚴禁重覆檔名:
請勿上傳「重覆名稱」的圖檔,如未更改檔名,系統仍會判斷為原檔案而不更新。
若因名稱相同導致檔案覆蓋或系統異常,後續恕不代為調整。
請勿上傳「重覆名稱」的圖檔,如未更改檔名,系統仍會判斷為原檔案而不更新。
若因名稱相同導致檔案覆蓋或系統異常,後續恕不代為調整。
2. 上傳穩定性建議
上傳時間視檔案大小而定,建議檔案小於 1MB 以避免因網路波動造成上傳失敗。
四、圖片色差問題:色彩模式
🎨RGB 模式確保不失真
請檢查圖片的色彩模式是否為 RGB。網站瀏覽器使用的色彩標準為 RGB,而非印刷用的 CMYK。
❌ 避開 CMYK 模式:
若上傳 CMYK 模式的圖片,前台顯示可能會產生嚴重色偏。如發現變色,請在繪圖軟體中將色彩模式改回 RGB 後重新上傳。
若上傳 CMYK 模式的圖片,前台顯示可能會產生嚴重色偏。如發現變色,請在繪圖軟體中將色彩模式改回 RGB 後重新上傳。
五、系統自動壓縮機制說明
💾上傳自動優化邏輯
系統會在上傳時判斷 「最短邊」 並自動執行優化,強烈建議依照後台建議尺寸製作:
- 最短邊限制: 超過 1440px 時,系統將等比例縮放至 1440px。
- 容量壓縮: 檔案超過 1.2MB 時,會自動進行 85% 壓縮處理。
- 尺寸不符優化: 若上傳尺寸與後台規範不符(例如:後台限制 600px,您上傳了 1000px),系統會強制縮小至 600px 並執行 85% 壓縮儲存。
📌 最佳實踐建議:
建議圖片容量維持在 200KB ~ 300KB。雖然系統會自動縮小 1440px 以上的圖檔,但為了網頁載入速度與 SEO 分數,仍強烈建議「手動壓縮後」再上傳。
建議圖片容量維持在 200KB ~ 300KB。雖然系統會自動縮小 1440px 以上的圖檔,但為了網頁載入速度與 SEO 分數,仍強烈建議「手動壓縮後」再上傳。
六、實作教學影片
🎬後台操作影音導覽
本影片將教學如何在後台個別上傳產品圖片、列表圖片,以及如何在編輯器中插入圖檔:
⏱️ 影片時間軸索引:
• 00:00 如何上傳產品圖片
• 01:06 如何上傳列表圖片
• 02:04 如何在編輯器中插入圖片
• 00:00 如何上傳產品圖片
• 01:06 如何上傳列表圖片
• 02:04 如何在編輯器中插入圖片
適當的圖片處理不僅能美化網站,更能大幅提升使用者的瀏覽體驗!