素材規格

圖片是網站變慢的頭號原因

網站在手機上載入緩慢，最大宗的原因就是圖片沒有處理。直接把手機拍的原圖上傳，一張可能好幾 MB，一頁放十張就是幾十 MB——在行動網路下，訪客等不到就走了。

而使用者對慢的容忍度很低，多數人在等待數秒後就會離開。

兩件不同的事：尺寸與壓縮

順序是先調尺寸、再壓縮。 一張 4000 像素寬的原圖，就算壓縮得再用力，也不如先縮到需要的尺寸來得有效。

各種用途的建議尺寸

以下為常見的參考值，實際依版型而定：

高解析度螢幕會需要較大的圖才不會模糊，這部分由網站端處理即可，不需要業主操心。

好的後台應該自動處理

這是最重要的一點：尺寸與壓縮不應該是業主的工作。

網站後台在上傳圖片時，應該自動：

• 依用途縮到適當尺寸
• 壓縮到合理的檔案大小
• 產生列表用的縮圖
• 視情況轉成較有效率的格式

如果沒有這些處理，遲早會有同事直接把手機原圖傳上去，網站就慢下來了——而且沒有人會發現是這個原因。

後台該具備的功能見哪些內容需要做成後台可自行管理。發包時可以直接問：「上傳一張手機拍的照片會怎麼處理？」

如果需要自己處理

幾個實用做法：

• 用線上壓縮工具——上傳、下載，不需安裝軟體。注意機密圖片不要用線上服務
• 用作業系統內建的預覽或小畫家——調整尺寸很夠用
• 批次處理——大量圖片時，用支援批次的工具一次處理

壓縮到什麼程度

沒有標準答案，方法是邊壓邊看：逐步提高壓縮率，直到開始看到畫質劣化，再退回一級。

照片通常可以壓得比想像中多而看不出差異；但有大片純色或漸層的圖（例如天空、白牆）容易出現色塊，要保守一點。

不要重複壓縮

JPG 每存一次就會損失一些細節，且無法還原。反覆開啟、編輯、儲存的圖片，畫質會逐次下降。

正確做法是保留一份原始檔，每次需要不同尺寸時都從原始檔產生，而不是從已壓縮的版本再加工。

其他影響載入速度的素材

• 影片——檔案通常比圖片大得多，需要壓縮與適當的載入策略
• 中文字型——整套中文字型可能達數 MB，是容易被忽略的負擔
• PDF——型錄動輒數十 MB，應提供壓縮版本，並註明檔案大小讓使用者決定要不要下載

怎麼檢查自己網站的圖片有沒有問題

1. 用手機的行動網路（不要用 Wi-Fi）開啟網站，感受載入速度
2. 如果明顯緩慢，先看首頁——多數問題出在首頁的主視覺與輪播圖
3. 用線上的網站速度測試工具，通常會直接指出哪幾張圖過大

手機端的其他速度問題見手機版破版與常見問題排查。

為什麼設計公司一直要「原始檔」

網站架設時最常卡住的素材之一，就是 Logo。業主提供的常常是：從舊網站另存的小圖、從名片掃描的檔案、或是 Word 檔裡複製出來的圖片。

這些通常都不能用——不是設計師挑剔，是技術上真的做不出好結果。

點陣圖與向量圖的差別

Logo 需要出現在各種尺寸：網站頁首的小 Logo、手機版更小、頁尾、社群分享圖、有時還要做成大圖。只有向量檔能一份應付所有尺寸。

應該準備哪些檔案

必要

• 向量原始檔——AI、EPS 或 SVG。當初設計 Logo 的設計師手上應該有
• 透明背景的 PNG——作為備援，建議提供較大尺寸（寬度 1000 像素以上）

建議一併準備

• 反白版——放在深色背景上使用的版本
• 單色版——只有一個顏色的簡化版，用於特殊場合
• 橫式與直式——不同版面配置需要不同比例
• 只有標誌、沒有文字的版本——用於小尺寸場合，例如瀏覽器分頁圖示
• 標準色的色碼——詳見下一段

標準色要給螢幕用的色碼

印刷用的色票與螢幕顯示的色碼是不同的系統。如果只有印刷用的色號，需要轉換成螢幕用的色碼。

轉換不是完全對等的——某些印刷色在螢幕上無法完全重現，反之亦然。所以轉換後最好由設計師確認，而不是機械式換算。

如果公司有品牌識別規範文件，直接提供給設計公司最省事。完整的配色規劃見網站配色與品牌識別怎麼定。

找不到原始檔怎麼辦

這很常見，尤其是 Logo 設計於多年前、或當初的設計師已經聯絡不上。可能的處理方式：

1. 先問印刷廠或代工廠——做過名片、招牌、包裝的廠商手上常常還有向量檔
2. 問內部的行政或行銷同仁——有時候檔案在某個人的電腦裡
3. 請設計公司重新描繪——依現有的圖片重新畫成向量。這是常見的加購服務，通常不貴，而且做完之後就永久可用

第三項值得做。與其每次都將就用模糊的小圖，不如一次把向量檔補起來——它不只用於網站，日後所有的印刷品、招牌、簡報都用得到。

Logo 使用上的常見問題

拉伸變形

調整大小時必須等比例，不能只拉寬或只拉高。這是最常見也最傷品牌形象的錯誤。

周圍留白不足

Logo 四周應保留一定的淨空區，不要讓其他元素或文字緊貼。多數品牌規範會明確定義這個距離。

在深色背景上使用彩色版

若沒有準備反白版，深色背景上的 Logo 可能糊成一團。這也是建議準備多版本的原因。

直接用截圖

從 PDF 或簡報截圖出來的 Logo，邊緣會有雜點，放大更明顯。

順便確認的兩件事

一、Logo 的著作權歸屬

Logo 若由外部設計師製作，著作權的歸屬應該在委託時就約定清楚。日後若要修改、延伸應用，這會影響能不能做。

二、有沒有註冊商標

Logo 與商標是兩件事——有 Logo 不代表有商標權。如果品牌對生意很重要，值得評估申請商標註冊，日後遇到仿冒或網域搶註時，立場會強很多。

影片能留住人，也能拖垮網站

影片作為第一印象的主體，效果很好——訪客一進站就被畫面留住。但影片檔案比圖片大得多，處理不當會讓網站在手機上完全打不開。

這篇整理提供影片素材時該注意的規格與取捨。

格式與基本規格

提供原始檔即可，壓縮與轉檔由網站端處理。跟圖片一樣，您負責提供品質最好的來源。

自架還是嵌入影音平台？

常見的搭配：首頁的無聲背景影片放自己主機（要夠短夠小），完整的形象片或產品說明片嵌入影音平台。

嵌入時要留意：平台可能在影片結束後顯示其他人的影片推薦，設定時通常可以關閉或限制。

背景影片的四個必要條件

如果要在首頁放滿版背景影片，這幾件事一定要做：

1. 靜音——多數瀏覽器不允許有聲音的影片自動播放，而且突然出聲會嚇到訪客
2. 提供靜態備援圖——影片載入前、或在不支援的環境下，要有一張圖頂著，不能是空白
3. 手機另外處理——行動網路載入大檔很慢且耗流量。常見做法是手機版直接顯示靜態圖，不播影片
4. 文字要看得清楚——影片上疊標題時，需要遮罩或陰影，否則畫面一亮文字就消失

手機端的效能考量見手機版破版與常見問題排查。

拍攝時的建議

背景影片

• 畫面單純、動作緩慢——上面要疊文字，太複雜會互相干擾
• 預留裁切空間——不同螢幕比例會裁切不同區域，重要主體不要放在邊緣
• 能循環最好——首尾畫面相近，重複播放時不會有明顯跳接

說明性影片

• 前五秒決定去留——重點放最前面，不要用長長的片頭
• 加上字幕——很多人在無聲環境觀看，沒字幕等於沒內容
• 畫面中的文字要夠大——手機螢幕上會縮小很多

字幕與無障礙

字幕有三個作用：讓無聲觀看的人看得懂、讓聽障者能理解、以及讓搜尋引擎讀得到影片的內容。

影片本身對搜尋引擎而言只是一個檔案，裡面說了什麼它不知道。如果影片承載了重要資訊，建議在頁面上同時提供文字說明。

這與「重要文字不要做成圖片」是同一個道理——搜尋引擎讀的是文字，不是畫面。

音訊素材

網站上使用背景音樂要非常謹慎：

• 不要自動播放——這是最容易讓人立刻關掉網頁的設計
• 一定要有明顯的關閉按鈕
• 注意授權——音樂的著作權管理通常比圖片更嚴格，使用市售音樂需取得授權

多數企業網站其實不需要背景音樂。若有需求，建議只在特定的展示頁面使用，並讓使用者主動點擊播放。

版權提醒

影片與音樂的授權往往比圖片複雜——一支影片可能同時涉及影像、配樂、旁白、以及入鏡人物的肖像權。

• 自行拍攝的影片，若有員工或客戶入鏡，應取得同意
• 使用市售或網路上的音樂、影片素材，務必確認授權範圍
• 保留所有授權證明

素材授權的完整說明見網站版型的授權與安全性風險。

沒有影片素材怎麼辦

不必為了「別人都有」而硬做。影片是加分項目，不是必要項目——一張好的實景照片，效果勝過一支勉強拼湊的影片。

若確實需要，多數網頁設計公司可以協助安排拍攝或轉介，這通常是另計費用的加購項目。及早提出，比拖到最後卡住整個專案好。

搜尋引擎看不見圖片裡的內容

這是理解圖片與搜尋關係的起點：搜尋引擎讀的是網頁的文字描述，圖片對它而言只是一個檔案。

所以把重要的標題、產品規格、聯絡資訊做成圖片，等於對搜尋引擎隱藏了這些內容——網站上看得到，但搜尋不到。

圖片要被理解，靠的是三個文字線索：替代文字、檔名、以及周圍的說明文字。

一、替代文字（alt）

替代文字是給圖片的文字描述。它有三個用途：

• 圖片載入失敗時顯示的文字
• 螢幕報讀軟體朗讀的內容，視障使用者靠它理解圖片
• 搜尋引擎判斷圖片內容的依據

怎麼寫

原則是如實描述圖片內容，寫給看不到這張圖的人聽。

三個常見錯誤

1. 堆砌關鍵字——把想排名的字全部塞進去。搜尋引擎會判定為刻意操作，而且螢幕報讀軟體會把那串字全部念出來，對使用者是干擾
2. 全部留空——失去一整層的語意訊息
3. 寫成「圖片」「照片」「未命名」——等於沒寫

什麼時候該留空

純裝飾用的圖片——背景花紋、分隔線、純視覺的裝飾元素——替代文字應該留空。

這不是偷懶，而是正確做法：讓螢幕報讀軟體跳過它，避免使用者被無意義的描述打斷。

二、檔名

檔名也是搜尋引擎判斷圖片內容的線索之一。

• 不好：IMG_4827.jpg、螢幕擷取畫面 2026-08-05.png、未命名-1.jpg
• 建議：stainless-steel-duct-elbow.jpg、taoyuan-factory-exterior.jpg

檔名的原則

• 用小寫英文，單字之間用連字號分隔
• 避免空格與中文——部分伺服器與系統處理中文檔名會出問題，網址中也會變成一長串編碼
• 簡短且有意義，不需要塞滿關鍵字

提供素材給網頁設計公司時，如果能順手把檔名取好，對後續作業與搜尋都有幫助。

三、周圍的文字

圖片附近的說明文字、圖說、以及所在段落的內容，都會被用來判斷圖片的主題。

這也是為什麼產品頁只放一張圖、沒有任何說明文字是很吃虧的——搜尋引擎沒有任何線索可以判讀這是什麼產品。每項產品建議至少有一百字的說明。

圖片也會被搜尋

不少人是透過圖片搜尋找到網站的，尤其是產品、案例、空間類的內容。做好上述三件事，等於多開了一個流量入口。

另外建議：

• 圖片要能被直接連結——不要用會阻擋讀取的方式呈現
• 重要的圖片放進網站地圖——有助於被完整收錄
• 圖片旁提供清楚的圖說——對使用者與搜尋引擎都有幫助

載入速度也是搜尋的一環

圖片過大導致網站緩慢，會影響搜尋排名與使用者留存。這一項的處理方式見圖片尺寸與壓縮。

另外，畫面外的圖片延遲載入、以及事先指定圖片的顯示尺寸，都能避免版面在載入過程中跳動——這種跳動會讓使用者點錯位置，體驗很差。

後台應該讓人容易做對

替代文字這件事，如果後台沒有欄位可填，就不會有人填。

好的後台應該：

• 上傳圖片時就有替代文字欄位
• 欄位旁有簡短說明，告訴使用者該寫什麼
• 必要時設為必填

網站架設時可以把這一項列入需求。後台功能的規劃見哪些內容需要做成後台可自行管理。

一個實務建議

不必回頭把過去幾百張圖的替代文字全部補齊——投入與效益不成比例。

務實的做法是：從今天起新上傳的圖片都做對，並優先補上首頁、主要產品頁、以及流量較高頁面的圖片。這樣就能拿到大部分的效益。