圖片最佳化

網站照片該用JPG、PNG、WebP還是AVIF格式？

現在的基本做法是照片優先用WebP或AVIF，Logo・圖示則用SVG。web.dev也說明，WebP和AVIF的壓縮效果大致比舊格式（JPG・PNG）更好，建議能用就用。

不過使用AVIF時，最好一併準備JPG之類的備用檔案，以防有些環境讀不出來。會動的GIF檔案非常大，改成短影片檔會輕巧得多。

很多時候其實不用老闆自己挑格式。依網站的製作方式，有些會內建轉換功能：您上傳JPG，系統就會配合客人的瀏覽器，自動轉成WebP或AVIF再送出。

需要透明背景的Logo，或是去背的商品照，改存成WebP而不是PNG，很多時候也會變得更輕。

網站照片要多少像素、多少KB才適合上傳？

沒有一個適用所有照片的固定數字，要以「畫面上實際顯示的大小」為準。如果是佔滿手機螢幕寬度的照片，像素大約是該寬度的兩倍，在高解析度螢幕上通常也夠清楚了。

手機相機拍的原圖，寬度常常超過4,000像素，直接上傳到網站，大部分像素其實都浪費掉了。大張的橫幅照片和小小的列表縮圖，最好分別做成不同尺寸。

同一張照片的檔案大小，也會因格式和壓縮程度差很多，與其背數字，不如邊看畫面上的畫質邊決定，會更準確。首屏照片尤其要做得輕巧，第一印象才會快。

以行業來看，咖啡廳・餐廳的菜單相簿、美髮店的前後對比照、網路販售的商品詳情照片，都是最容易變重的地方。先從這些地方檢查，效果最明顯。

響應式圖片和延遲載入是什麼？

響應式圖片是把同一張照片準備成好幾種尺寸，只送出符合客人螢幕的那一張。使用HTML的srcset・sizes設定，瀏覽器就會依螢幕大小挑選合適的檔案。

延遲載入（Lazy Loading）是等客人往下捲、快看到畫面下方的照片時才載入。不過web.dev提醒，首屏看得到的照片，尤其是最大的那張，不要設定延遲載入，因為這樣反而會讓首屏更晚出現。

幫每張照片標上寬・高（width・height）也很重要。如果瀏覽器不知道尺寸，照片載入的瞬間文字會被往下推，客人可能就按錯原本想按的按鈕。

延遲載入和響應式圖片大多在製作階段就會設定好，老闆每次上傳照片時不需要另外處理。只是有沒有設定正確，建議上線前請製作公司確認一次。

老闆自己上傳照片時，要怎麼縮小檔案？

如果網站的管理後台會自動幫您縮小，直接上傳原圖也沒關係。如果不會，養成照下面的順序先縮小一次再上傳的習慣就好。

像咖啡廳新品、工作室作品這種常常要上傳的照片，先定好一個標準會很方便。把和製作公司講好的標準記下來，例如「相簿照片寬幾像素、WebP格式」，每次用同樣的方式縮小就行了。

用手機拍的照片，有時會連同拍攝地點等資訊一起存下來。如果縮圖工具有刪除這類資訊的設定，建議打開，對檔案大小和個人資料保護都有好處。

1. 01確認要放的位置（橫幅、相簿、商品列表）在畫面上顯示多大。
2. 02用修圖App或免費的圖片壓縮工具，把寬度縮到符合那個位置的大小。
3. 03存檔格式選WebP，畫質調低到肉眼看不出差別為止。
4. 04把檔名從「IMG_1234」改成像「yeonnam-cafe-handdrip.webp」這樣看得出內容的名稱。
5. 05上傳後用手機行動網路（關掉Wi-Fi）打開頁面，確認載入速度。

照片說明（alt）和檔名要怎麼寫？

照片說明就像用一句話告訴看不到照片的人「這張照片在傳達什麼」那樣寫就好。Google搜尋中心把照片說明視為圖片資訊中最重要的屬性，並提醒不要硬塞關鍵字。

裝飾用的花紋或背景這類沒有內容的照片，說明留空才對。W3C的圖片指引也說，裝飾用照片的說明值要留空。相反地，像菜單這種有文字的照片，就要把上面的文字原封不動寫進說明裡。

檔名也是一個小線索。比起「IMG00023.JPG」這種名稱，Google建議使用簡短、能說明內容的檔名。用英文小寫和連字號（-）命名，網址不會變成亂碼，管理起來也方便。

• 好的例子：「一片草莓鮮奶油蛋糕，上面有三顆新鮮草莓」
• 可惜的例子：「蛋糕名店 蛋糕推薦 蛋糕訂購」（只是堆關鍵字）
• 可惜的例子：「照片1」、「image」（沒有任何資訊）

圖片最佳化常見的錯誤有哪些？

最常見的錯誤是上線時很輕巧，經營一段時間後原圖一張張累積，網站又變慢了。尤其相簿・評論・商品經常增加的店家，特別容易發生。

只用一張照片放菜單・價目表・活動公告也是個問題。不但檔案重，搜尋引擎和螢幕閱讀器也讀不到裡面的內容。

速度只要把網址輸入Google PageSpeed Insights這類免費工具就能檢查。如果結果出現圖片相關的改善建議，就先從照片下手。

如果相簿照片有數十張，也可以先只顯示幾張，按下「查看更多」時再載入其餘的照片，首屏會輕巧很多。

圖片最佳化要問製作公司哪些問題？

照片在上線後也會持續增加，建議把初次上傳和日後經營分開來看，問以下四個問題。

• 在管理後台上傳的照片，會自動縮小並轉換格式嗎？
• 有使用依螢幕大小挑選照片送出的響應式圖片嗎？
• 上線前會幫忙測量首屏照片的載入速度嗎？
• 上線後也會檢查重的照片有沒有變多嗎？