做電商久了，你會發現一個很矛盾的現象：商品圖片幾乎是整個頁面裡最重要、也最花錢拍的資產，卻同時是最常拖垮頁面速度的兇手。品牌花了大把預算找攝影棚、修圖、做情境照，把商品拍得漂漂亮亮，然後原封不動地把一張三、四 MB 的大圖直接丟上官網，結果消費者在手機上點開，圖片一塊一塊慢慢刷出來，人早就退出去別家了。你辛苦拍的美圖，根本沒被看完。
反過來也有另一種極端。有些品牌被工程師或速度工具嚇到，開始瘋狂壓縮圖片，把畫質壓到肉眼一看就糊、布料的紋理不見了、金屬的光澤變成一片死灰，於是頁面是變快了，轉換率卻不升反降——因為消費者在螢幕上看不清楚這東西到底長怎樣、質感好不好，自然不敢下單。速度和畫質這兩件事，看起來是互相拉扯的，但其實不是二選一的問題，而是有一套方法可以同時兼顧。
我們在替品牌做電商代營運時，商品圖優化幾乎是每一次官網健檢的必查項目。這篇文章想把這件事講清楚：為什麼圖片是電商頁面最重的資源、它怎麼一路影響速度、轉換與 SEO，然後一步步拆解實際可以動手的做法——從選對格式、壓到肉眼無感、出對尺寸、響應式圖片、延遲載入、CDN、避免版面位移，一直到 ALT 文字與大量商品的批次自動化。我盡量講得務實可執行，數字級距我會用「通常、大約」來抓，因為每個品牌的商品類型與客群不同，沒有一體適用的絕對值。
為什麼商品圖是電商頁面最重的資源
先講一個很多人沒意識到的事實：在絕大多數電商頁面裡，圖片佔了整個頁面傳輸量的一大半，通常是六成到八成起跳。你頁面上的文字、程式碼、CSS 加起來可能才幾十 KB，但一頁商品頁如果放了主圖加五、六張情境照、再加規格說明的長圖，隨便就是好幾 MB。也就是說，消費者連上你的頁面，手機要下載的東西裡面，絕大部分都是圖。
這件事的殺傷力在於，它直接撞上 Google 用來衡量頁面體驗的 Core Web Vitals，尤其是 LCP（最大內容繪製）。商品頁的 LCP 元素，十之八九就是那張首屏主圖。如果這張圖太大、載入太慢，LCP 的數字就難看，體驗分數就低，Google 排名和廣告品質分數都會受影響。關於這三個指標的細節，我在 /blog/website-speed-core-web-vitals 這篇有完整拆解，這裡不重複。
但更現實的是轉換。消費者的耐心是以毫秒計算的。頁面每多一秒才載入完成，跳出率就往上跳一截、加入購物車的比例就往下掉一截。你在廣告上花錢把人買進來，卻在落地頁載入完成之前就流失掉，這是電商最冤枉的一種漏財——你連讓消費者看到商品的機會都沒有，就先輸了。所以圖片優化從來不是一件單純的技術美化工作，它是一條直接連到營收的營運主軸。網站速度和轉換之間的完整關係，我在 /blog/website-speed-optimization 談得比較全面。
圖太重與圖太糊，怎麼平衡
把問題拆開來看，商品圖優化的核心矛盾其實只有一句話：圖太重會拖慢速度傷轉換，圖太糊會讓人看不清楚不敢買，你要找到那個「肉眼看起來夠清楚、檔案又夠小」的甜蜜點。
這裡我要先打破一個迷思。很多人以為速度和畫質是零和的，壓得越小畫質一定越差。但實際上，大部分品牌的圖片之所以又重又慢，根本不是因為畫質高，而是因為根本沒優化——用了錯的格式、沒有壓縮、尺寸大到離譜、還直接拿原圖去縮放。這些問題修掉之後，你會發現檔案可以縮到原本的四分之一甚至更小，而肉眼幾乎看不出差別。也就是說，前面很大一段路，速度和畫質是可以一起變好的，根本不用犧牲誰。
真正要取捨的甜蜜點，是在你已經做完基本優化之後，最後那一小段。這時候你要問自己：這張圖的角色是什麼？如果是需要看清楚布料織法、寶石切工、食物質感這種「畫質就是賣點」的商品，那就把品質參數留高一點、寧可檔案大一些；如果只是背景情境照、氛圍圖、次要角度，那就壓得狠一點沒關係。優化不是全站一個參數壓到底，而是依照每張圖的任務給不同的待遇。這一點觀念，會貫穿後面所有的做法。
用對格式：WebP、AVIF 與 JPEG、PNG 怎麼選
格式是所有做法裡投報率最高的一步，因為換格式幾乎不用改設計、不用重拍，就能把檔案砍掉一大塊。
先講結論：現在電商商品圖的主力格式應該是 WebP，它在同樣的肉眼畫質下，檔案通常比傳統 JPEG 小三成到七成，而且現在的瀏覽器幾乎全部支援，相容性已經不是問題。如果你還想更激進，AVIF 的壓縮效率又比 WebP 更好一階，同樣畫質下常常還能再小一截，特別適合那種色彩層次豐富的情境大圖；缺點是編碼比較慢、少數舊環境支援度稍差，所以實務上我會建議 AVIF 搭 WebP 一起出，讓瀏覽器挑它能吃的那個。
那 JPEG 和 PNG 呢？傳統 JPEG 已經沒有必要當主力，但保留當作最後的相容備援是合理的。PNG 則有個很多人踩的坑——它是無損格式，檔案通常很大，只適合需要透明背景、或線條與純色塊為主的圖，例如去背商品圖、logo、圖示。千萬不要拿 PNG 去存那種滿滿細節的商品情境照，那會是災難級的檔案大小。至於 GIF，除非是很短的動態示意，否則能用影片就用影片，別用 GIF 撐動畫。
一句話記住：照片類優先 WebP 或 AVIF，需要透明或純色線條才考慮 PNG，JPEG 留作備援，能不用 GIF 就不用。
壓到肉眼無感：壓縮該怎麼拿捏
換完格式之後，下一步是壓縮。壓縮分兩種：無損和有損。無損就是不丟任何畫質、只是把檔案重新編排得更精簡，能省的有限；有損則是聰明地丟掉人眼不太察覺的細節，換來大幅的檔案縮小，這才是電商圖片瘦身的主力。
拿捏的原則我叫它「壓到肉眼無感」。實務上，大部分商品照的品質參數抓在中高的區間，通常就能在畫質幾乎無損的前提下把檔案砍掉一大半。你可以做一件很簡單的事來校準：把壓縮前後的圖並排放在手機螢幕上，用一般消費者的距離去看，如果看不出差別，就代表你還有壓縮空間；如果開始看到色帶、方塊、細節糊掉，就退回去一格。這個「並排目視」的土方法，比盯著檔案大小的數字有用得多，因為最終判官是消費者的眼睛，不是你的檢測工具。
另外提醒一個常被忽略的細節：拍攝原檔裡通常帶了一堆用不到的中繼資料，例如相機型號、GPS、色彩描述檔，這些對消費者毫無意義卻佔空間，輸出網頁圖時順手清掉，又能再省一點。
依版位出對尺寸，別拿原圖硬縮
這是我看過最普遍、也最浪費的錯誤：品牌把攝影棚交來的原始大圖，動輒四、五千像素寬，直接丟上網站，然後靠 CSS 或版型把它「顯示」成小小一格。問題是，瀏覽器還是得先把那張超大原圖整個下載下來，再縮到版面該有的大小。你在手機上明明只需要看一張寬度幾百像素的縮圖，卻被迫下載了一張夠印海報的巨圖，這中間浪費掉的傳輸量，全部由消費者的耐心和你的轉換率買單。
正確做法是：先想清楚這張圖在頁面上「實際會被顯示多大」，再輸出對應尺寸的檔案。列表頁的縮圖、商品頁的主圖、放大檢視的大圖，這三種版位需要的像素完全不同，就該出三種尺寸，而不是全部共用一張原圖。考慮到高解析度螢幕，實際輸出時通常會抓顯示尺寸的大約兩倍像素來確保清晰，但就算加了這個倍數，也遠比直接丟原圖省得多。
換句話說，尺寸這件事的原則是：讓下載的像素量，盡量貼近實際顯示需要的像素量，中間不要有巨大的落差。
響應式圖片、首屏優先與延遲載入
出好了多種尺寸，接下來就是讓瀏覽器聰明地挑對的那張，這靠的是響應式圖片，也就是 srcset 這套機制。你把不同尺寸的檔案都提供給瀏覽器，並告訴它每張圖大概會用在多寬的版位，瀏覽器就會根據使用者的螢幕大小與解析度，自動挑一張最合適的來下載。手機用戶拿到小圖、桌機用戶拿到大圖，各取所需，不會有人被迫下載超過自己需要的檔案。
再來是載入時機，這裡的關鍵原則是「首屏優先，其餘延遲」。消費者一進頁面就會看到的那張首屏主圖，要讓它優先、盡快載入，這樣 LCP 才會漂亮；至於那些要往下滑才會看到的情境照、規格長圖、頁尾推薦商品，就設成延遲載入（lazy load），等使用者快滑到了再去抓。這樣一來，頁面「一開始」需要下載的東西大幅減少，開啟速度自然快，而下面的圖也不會不見，只是聰明地延後到需要時才登場。
要提醒的是，別把首屏主圖也設成延遲載入，那是常見的反效果——你會親手拖慢自己最重要那張圖的登場時間，LCP 反而更差。首屏的圖要優先，其餘的才延遲，順序不能搞反。
CDN 就近供圖、指定寬高與 ALT 文字
處理完圖片本身，還有幾件「周邊」但同樣影響很大的事。
第一是 CDN。就算你的圖片已經瘦身完美，如果它們全部只放在一台位於遠方的主機上，台灣的消費者要連過大半個地球去抓圖，延遲還是很有感。CDN 的作用是把你的圖片複製到分布在各地的節點，讓消費者從離自己最近的節點取圖，大幅縮短傳輸距離與等待時間。對圖片這種又多又重的靜態資源，CDN 幾乎是必備。很多 CDN 服務還能順便幫你做即時的格式轉換與尺寸調整，等於把前面講的好幾件事自動化掉。
第二是指定寬高，避免版面位移。你一定遇過這種惱人的經驗：頁面載入到一半，圖片突然冒出來，把整個版面往下推一格，害你差點點錯按鈕。這就是 CLS（累積版面位移）在作怪，它同樣是 Core Web Vitals 的一項，體驗差還會被 Google 扣分。解法很單純：在程式碼裡明確告訴瀏覽器每張圖的寬高比例，這樣瀏覽器在圖還沒載入完之前，就會先把位置預留好，圖片再怎麼慢慢冒出來，版面都不會亂跳。
第三是 ALT 文字。這是圖片的替代文字，一來是無障礙的基本，讓使用螢幕報讀器的視障者也能知道這張圖是什麼；二來它也是圖片 SEO 的重要訊號，Google 會靠它理解圖片內容，寫得好有機會從圖片搜尋帶進額外流量。ALT 要用自然的句子具體描述商品，例如寫清楚顏色、材質、款式，而不是塞一堆關鍵字或乾脆留空。這一步很多品牌懶得做，但它是少數同時對無障礙和 SEO 都加分的事，很划算。
大量商品時的批次處理與一致規格
前面所有做法，如果你只有十件商品，手動一張張處理也還好。但電商真正的痛點是：品牌動輒上千、上萬個商品，每個又有多張圖、多個顏色，你不可能靠人力一張張換格式、壓縮、出尺寸、寫 ALT。這時候，流程與自動化就是勝負關鍵。
我的建議是把它變成一條產線。第一，先定義好一套「商品圖規格」——背景要不要統一、主圖的構圖與留白、去背與否、裁切比例、要出哪幾種尺寸、命名規則。規格一致，頁面看起來才專業，也才可能自動化。第二，用批次工具或影像處理管線，把「原圖進去、各種尺寸的 WebP 和 AVIF 出來、中繼資料清掉、命名照規則」這一整串一次跑完，而不是每張手動操作。第三，ALT 文字可以用商品資料庫裡既有的欄位（品名、顏色、材質）套模板自動生成初稿，再針對重點商品人工微調。
這套「規格化加自動化」的思維，其實和商品內容大量上架的邏輯是一樣的，我在 /blog/product-content-scaling 有更完整的討論。而商品圖本身怎麼拍得專業、怎麼建立一致的視覺規格，可以參考 /blog/product-photography-basics。圖片優化是「拍好之後」的事，前面拍攝與規格若沒打好底，後面自動化也事倍功半。
一個匿名實務案例：又快又清楚是可以並存的
分享一個我們實際經手、細節去識別化的案例。某個中型服飾品牌的官網，商品頁載入慢到我第一次用手機打開時，主圖大約要三秒多才完整顯示，往下滑還會一路卡頓、版面跳來跳去。追進去看，問題很典型：全站圖片都是攝影棚交來的原始 JPEG 大圖，一張常常三到四 MB，沒壓縮、沒出對尺寸、沒延遲載入，列表頁一次要載入幾十張這種巨圖，手機用戶等到天荒地老。
我們做的事並不玄，就是把前面講的那套按順序做完：全站圖片轉成 WebP 並保留備援、依列表縮圖與商品主圖兩種版位出對應尺寸、壓到並排目視看不出差別為止、首屏主圖優先載入其餘延遲、接上 CDN 就近供圖、每張圖補上寬高避免版面位移、ALT 用商品資料套模板生成再人工修重點款。整個過程沒有重拍任何一張照片，畫質在消費者眼中幾乎沒有變化。
結果大約一個多月後回看，商品頁的圖片總傳輸量大約掉到原本的三成上下，首屏主圖在手機上的顯示時間從三秒多縮到大約一秒出頭，往下滑的卡頓和版面跳動也幾乎消失。更重要的是營運端的數字：商品頁跳出率明顯下降、加入購物車的比例往上走，那段期間廣告投報率也跟著改善——因為同樣的廣告預算買進來的人，這次真的等到頁面載入完、看到了商品。這個案例我最想強調的是：整個過程沒有犧牲畫質，速度和清楚是一起變好的，這正好推翻了「優化圖片一定會變糊」的迷思。商品頁還有哪些轉換槓桿可以一起拉，我整理在 /blog/product-page-cro。
用哪些工具檢測
最後講檢測。優化不能憑感覺，要有數字佐證。免費又好用的，首推 Google 自家的 PageSpeed Insights 和 Lighthouse，它們會直接告訴你 LCP、CLS 這些指標的分數，並點名是哪張圖太大、哪張圖沒設寬高、哪張該延遲載入卻沒有。瀏覽器內建的開發者工具裡的網路面板，可以讓你看到每一張圖實際的檔案大小與載入時間，很適合抓出那些漏網的巨圖。
我的建議是，把檢測變成常態而不是一次性的專案。每次上新品、改版型，都順手用這些工具掃一遍首屏和幾個代表性商品頁，確保沒有人又不小心把一張沒壓縮的原圖丟上線。我們平常在替品牌做健檢時，也會把常用的檢測與工具整理在 /tools，你可以拿去對照著跑。
常見問題 FAQ
Q：全站都換成 WebP，舊瀏覽器打不開圖怎麼辦？ 實務上這幾乎不是問題了，現在市面上絕大多數瀏覽器都支援 WebP。真的要保險，做法是用 picture 標籤同時提供 WebP 與一份 JPEG 備援，瀏覽器會自己挑它能吃的那個，支援的用 WebP、極少數不支援的自動退回 JPEG，兩邊都照顧到，消費者完全無感。
Q：圖片壓縮到什麼程度才不會糊？有沒有一個標準參數？ 沒有一體適用的絕對值，因為不同商品對畫質的要求差很多。可靠的方法是把壓縮前後的圖並排放在手機上，用一般消費者的距離目視比對，看不出差別就代表安全、還能再壓；一旦看到色塊、色帶或細節糊掉就退回一格。畫質是賣點的商品（如珠寶、布料）品質參數留高一點，背景情境照可以壓得狠一點。
Q：延遲載入（lazy load）會不會害 SEO，讓 Google 看不到我的圖？ 只要做法正確就不會。關鍵是首屏主圖不要設延遲載入，讓它優先載入；只對需要往下滑才會看到的圖做延遲。現在的 Google 爬蟲能處理主流的延遲載入寫法，但前提是你用的是標準做法。把首屏也延遲載入才是真正會傷 LCP 和體驗的錯誤。
Q：我沒有工程團隊，也能做這些優化嗎？ 可以。很多電商平台後台或佈景主題已內建自動轉 WebP、自動延遲載入的功能，開啟即可。CDN 服務也常提供即時格式轉換與尺寸調整。你要做的主要是觀念到位——上圖前先出對尺寸、別丟原圖、補好 ALT，剩下的自動化交給工具。真的規模大到需要建管線，再找專業協助也不遲。
Q：商品圖要放幾張才夠？是不是越多越好？ 不是越多越好，而是要「該有的角度都有、每張都有存在的理由」。主圖、關鍵細節、情境使用、尺寸比例參考，這些是消費者做決定需要的；但塞一堆重複角度或無意義的氛圍圖，只會拖慢頁面又稀釋重點。原則是先確保必要資訊到位，再在速度允許的範圍內補情境照，而且記得把首屏之後的都設延遲載入。
Q：影片和圖片，商品頁該放哪個？ 兩者角色不同，不是互斥。圖片負責讓消費者快速、清楚地看到商品各個面向，是基本盤；影片適合呈現動態、使用情境、材質光澤變化這種靜態圖表達不出來的東西。但影片檔案更重，一定要設成點擊或滑到才播放、不要自動下載整支，否則對速度的傷害比圖片更大。實務上多半是圖片打底、關鍵商品再補一支短影片。
Q：優化圖片對廣告投報率（ROAS）真的有影響嗎？ 有，而且常常被低估。廣告投報率的分母是廣告花費，分子是這些流量帶來的成交。頁面載入慢會讓你花錢買進來的人在看到商品前就流失，等於廣告費打水漂。把落地頁的圖片與速度優化好，同樣的預算能留住更多人、看到更多商品，成交自然往上，ROAS 也跟著改善。所以我常說，圖片優化是一種不用加預算就能拉高廣告效益的槓桿。
結論
商品圖優化這件事，說到底就是一句話：讓頁面又快又清楚。速度和畫質看似互相拉扯，但只要照著正確的順序做——選對格式、壓到肉眼無感、依版位出對尺寸、用響應式圖片、首屏優先其餘延遲、接上 CDN、指定寬高避免版面位移、補好 ALT，再把大量商品的處理流程規格化與自動化——你會發現前面一大段路，速度和畫質是可以一起變好的，根本不必犧牲誰。真正要取捨的，只是最後那一小段，而且取捨的依據是每張圖在頁面上扮演的角色。
我看過太多品牌把力氣花在拍出漂亮的商品圖，卻在「上線那一步」把它們搞砸，讓辛苦拍的美圖既拖慢頁面、又沒被消費者好好看完。這實在太可惜。圖片是電商頁面最重的資源，也是最靠近成交的臨門一腳，它值得你像經營廣告預算一樣，把它當成一條能持續優化、直接影響營收的營運主軸來對待。從今天起，上圖之前多想一步：這張圖夠小了嗎、尺寸對了嗎、該延遲的延遲了嗎、ALT 寫好了嗎。這些小動作累積起來，就是又快又清楚的頁面，也是能持續把流量變成訂單的基礎。
林克威長期協助國際品牌與台灣品牌進行電商代營運、品牌代理與通路拓展，累積超過十年實務經驗，服務涵蓋 Momo、PChome、蝦皮、LINE 禮物、品牌官網及實體零售通路。若您希望了解品牌進入台灣市場或電商成長策略，歡迎與我們聯繫。
