在 QSYUYU 數位設計的專案交接流程中，我們經常遇到客戶在「網站營運維護」階段最頭痛的問題：圖片上架。許多客戶並沒有購買 Adobe Photoshop 等專業繪圖軟體，為了貪圖方便，往往將手機拍下的高畫質照片直接上傳至網站後台 。然而，這個看似「省麻煩」的動作，卻是拖垮網站效能的元兇！今天，我們將與您分享一款免費、免安裝的線上修圖神器—— Photopea，並傳授網站圖片上架的核心觀念。
為什麼不能把手機照片「直接上傳」？
這是一個講究 Loading（載入速度）的時代 。您可能會想：「現在都 5G 時代了，網路這麼快，圖片大一點有關係嗎？」答案是：絕對有關係！
- 載入速度＝客戶流失率： 現代人的耐心極低，只要網頁轉圈圈超過 3 秒，大部分的使用者就會直接跳出 。
- 拖垮主機空間與效能： 一張未經壓縮的手機照片動輒 5MB 到 10MB。如果一個輪播圖放了 5 張原圖，光是首頁就要載入近 50MB 的資料，這不僅極度佔用伺服器空間，更會導致網站上下載速度變得極為緩慢，給予瀏覽者非常不友善的觀感 。
- 前端版面跑版變形： 網站的每一個區塊（如橫幅、產品圖、文章縮圖）都有其預設的最佳顯示比例，未經裁切的圖片會被系統強制壓縮或拉伸，導致畫面慘不忍睹 。
認識 Photopea：免安裝的線上版 Photoshop
為了解決「軟體購買成本」與「操作門檻」的問題，QSYUYU 推薦您使用 Photopea 。這是一款完全免費、直接在瀏覽器運作的線上圖片編輯器。它的操作介面幾乎與 Photoshop 一模一樣，您不需要下載任何龐大的軟體，只要打開網頁就能隨時隨地處理網站素材 。不要要注意是你的wifi給不給力喔!
網站圖片編輯的 2 大核心教育訓練
使用 Photopea 時，請務必掌握以下兩個網站圖片處理的黃金守則：
1. 永遠保持解析度 72 dpi
許多人會把印刷用的 300 dpi 高解析度圖片直接傳上網站 。事實上，電腦與手機螢幕的顯示上限就是 72 dpi（網頁標準解析度）。超過這個數值，肉眼根本看不出差異，只會徒增圖片的檔案大小。在 Photopea 建立新檔或匯出時，請務必檢查是否設定為 72 dpi，檔案能越小越好但又不影響圖片清晰度，這就在考驗你的判斷轉存的眼力技術。
2. 依照「網站單元需求尺寸」進行裁切
這點最為重要！在上架圖片前，請先確認該網站區塊的尺寸需求（例如：最新消息縮圖需為 800 x 600 px）。在 Photopea 中：
- 不要用「縮放」去硬塞，請使用「裁切（Crop）」工具。
- 輸入正確的寬高比例，將照片中最精華的視覺焦點裁切出來 。
- 這樣不僅能確保版面整齊劃一，也能將檔案容量降到最低。
結語：輕量化是網站留住客戶的關鍵
建立一個精美的網站只是第一步，後續的維護才是品牌長久經營的關鍵。透過 Photopea 養成裁切與壓縮圖片的好習慣，讓您的網站保持輕盈、快速，這不僅是為了 SEO 搜尋引擎優化，更是為了給您的潛在客戶最流暢的數位體驗！
