新手版更新頁面圖片時，行動端圖片應該先準備哪些內容

更新網站圖片時，行動端的顯示效果直接影響使用者體驗。對於新手來說，提前準備好以下幾項內容，可以避免圖片模糊、載入慢、顯示不全等常見問題。

一、確認圖片尺寸和比例

行動端螢幕寬度通常為375-414px（物理像素），但需要考慮裝置像素比（DPR）。建議準備以下尺寸：

• 全螢幕圖片：寬度至少750px（375px×2倍），高度依比例調整。
• 內容內插圖：寬度建議為手機螢幕寬度的90%，約340-370px，使用2倍圖即680-740px。
• 圖示或小圖：按實際顯示尺寸的2倍準備，例如顯示50×50px，則準備100×100px。

避免使用原始大圖直接縮小，否則會浪費流量；也不要只用小圖拉伸，會導致模糊。

二、選擇合適圖片格式

行動端優先考慮載入速度和相容性：

• JPEG：適合色彩豐富的照片，壓縮率高。
• PNG：適合需要透明背景的圖示或簡單圖形。
• WebP：相比JPEG體積小25%-35%，且支援透明，但需注意部分舊裝置不支援，建議提供JPEG後備。

對於新手，建議準備JPEG和WebP兩個版本，透過程式碼判斷瀏覽器支援情況來載入。如果技術有限，可先用JPEG，後續再最佳化。

三、壓縮圖片以控制檔案大小

行動端網路環境多樣，圖片檔案過大會導致載入緩慢。建議壓縮至以下範圍：

• 主頁大圖：控制在200KB以內，最好100KB以下。
• 內容圖片：控制在100KB以內，50KB左右為宜。
• 圖示：控制在10KB以內。

可使用TinyPNG、Squoosh等工具線上壓縮，保持肉眼可接受的畫質。

四、編寫圖片alt文字

每張行動端圖片都需要alt屬性，用於搜尋引擎理解和輔助技術（如螢幕閱讀器）。alt文字應簡短描述圖片內容，例如「公司前台接待區域照片」而非「圖片1」。不需要堆砌關鍵詞，自然描述即可。

五、準備不同解析度的版本

行動裝置螢幕密度差異大，建議為每張圖片準備至少兩個解析度版本：

• 1x（標準解析度）：適合一般螢幕。
• 2x（高畫質）：適合Retina等高畫質螢幕。

如果使用者訪問量較大，可進一步考慮3x版本。透過CSS或srcset屬性指定不同版本，讓瀏覽器按需載入。

六、測試圖片在行動端的顯示效果

更新前，務必在真實手機或瀏覽器模擬器上測試：

• 圖片是否完整顯示，有無拉伸或裁剪變形。
• 載入速度是否可接受，可以使用Chrome開發者工具的網路面板查看耗時。
• 點擊圖片是否跳轉到預期連結（如適用）。

如果發現圖片在iOS和Android上顏色差異明顯，可調整色彩設定檔為sRGB。

七、備份原圖和修改記錄

新手應注意保留原始高解析度圖片，方便後續修改。同時記錄每次更新的圖片名稱、尺寸、壓縮比例、上傳位置等資訊，便於排查問題。

按照以上內容提前準備，行動端圖片更新過程會更順利，也能提升使用者瀏覽體驗。如果對技術細節不確定，可以諮詢網站建置服務商或參考官方文件。