網頁設計免費素材，大致分成七類：圖片圖庫、影片素材、Icon 圖示、字型、3D 與插畫、配色、設計靈感。每一類都有幾個長年穩定、明確可商用的網站，這篇把 RAB 團隊實際在用、也推薦給客戶的清單整理成一頁，並補上兩件多數素材懶人包不會講的事：怎麼判斷一份素材能不能商用，以及素材放上網站前該做的處理——這兩點沒顧好，網站不是有版權風險，就是被一堆沒壓縮的大圖拖慢。
這篇能幫你
- 快速找到各類型可商用的免費素材網站
- 看懂 CC0、需署名、免費版限制、AI 生成圖這四種授權情況
- 知道素材下載後、放進網站前要做哪些事（壓縮、轉檔、命名、Alt）
| 素材類型 | 推薦起手式 | 授權要看 | 深入文章 |
|---|---|---|---|
| 圖片圖庫 | Pexels、Pixabay、Unsplash | 接近 CC0，免標註來源 | 5 個免費圖片素材網站 |
| 影片素材 | 無版權影片站＋AI 影片工具 | 多為 CC0，注意背景音樂 | 5 個免費影片素材網站 |
| Icon 圖示 | SVG 檔或 icon font；Taiwan Icon Font | Flaticon 等免費版多需標註 | Taiwan Icon Font |
| 字型 | 思源黑體、jf open 粉圓、Noto Sans TC | 中文字型多數僅個人非商用 | justfont 字型案例 |
| 3D／插畫 | 扁平插畫、isometric 物件庫 | 免費版常需署名 | 免費和付費 3D 資源 |
| 配色 | 配色工具＋Pantone 年度色 | 工具產出可自由用 | Pantone 2023 年度色 |
| 設計靈感 | 靈感網站看結構、不抄視覺 | 不下載素材，無授權問題 | 13 個設計靈感網站 |
| 上站前處理 | 壓縮轉 WebP → 裁切 → 英文檔名 → Alt | — | 3 款線上圖片壓縮工具 |
先搞懂授權：免費素材的四種情況
免費設計素材的授權分成四種：CC0／公有領域、需標註出處、免費版有限制、AI 生成圖。把素材放到商業網站前，先確認它落在哪一種，再決定能不能用、要不要註明出處。
CC0／公有領域——限制最少
Pexels、Pixabay、Unsplash 這類網站的主力授權接近 CC0：可商用、可修改、不需要標註來源、不需要署名作者。這是做網站最省事的一種，但仍有兩個常見例外要留意：
- 照片裡如果有可辨識的人臉、商標、藝術品、建築物，肖像權與商標權是另一回事，授權涵蓋的是「照片本身」不是「照片裡的內容」。用在廣告、代言情境中要特別小心。
- 不能把原封不動的素材拿去當成自己的素材再散布或販售。
需要標註出處（署名）
部分圖庫、Icon 或插畫採 CC BY，可免費商用，但必須在頁面或頁尾標註作者與來源。網站上常見的做法是在頁尾放一句「Icons by ○○」。漏標在法律上就是未授權使用。
免費版有額度或功能限制
Flaticon、Freepik、Iconfinder 這類「免費＋付費」混合的平台，免費帳號通常有這些限制：每日下載次數上限、需要標註來源、不能用在「可下載或轉售的成品」裡（例如你做的網站模板要拿去賣）。單純做一個自用網站多半沒問題，但務必點進該素材的授權頁看清楚，不同素材規則可能不一樣。
AI 生成圖片——授權還在灰色地帶
用 Midjourney、DALL·E 這類工具生成的圖，各家服務條款不同，有的把商用權利給付費用戶、有的對「生成內容能否受著作權保護」保留態度。目前實務上的保守做法：AI 生成圖可以用在自己的網站，但不要當作品牌識別的核心資產（例如 Logo），也不要宣稱擁有其著作權。涉及品牌註冊、對外授權時，優先用人類創作或有明確商用授權的素材。
一句話判斷：素材頁上找得到「Free for commercial use」而且沒有「Attribution required」，通常可以直接用；只要看到 Premium、Pro、Attribution、Editorial use only 這些字，就停下來讀完整段授權說明。
免費圖片圖庫：可商用的口袋名單
做網站最常用的三個可商用免費圖庫是 Pexels、Pixabay、Unsplash，都免費、可商用、不需標註來源，差別在風格與搜尋方式：
- Pexels——支援中文搜尋，風格偏乾淨明亮的生活與商業情境，同時有免費影片。
- Pixabay——量最大，除了照片還有向量圖、插畫、去背 PNG。
- Unsplash——解析度與攝影質感最好，題材偏風景、自然、氛圍照，商業情境照相對少。
實務上的用法是三個一起搜，挑構圖與色調最合的。想要更完整的清單與各站特色比較，看這幾篇：
- 2026更新推薦！5 個設計網頁圖片素材的免費網站——精選 5 個，含每站適合的用途
- 8 個網頁設計素材網站報你知——涵蓋照片、向量、mockup
- 提升網頁設計效率：6個好用的網站設計資源——比較少見、但很實用的幾個
什麼時候該用付費圖庫
當網站需要風格一致的整組視覺（例如整站都要同一位攝影師的色調），或是特定產業的專業情境照（醫療、工業、金融），免費圖庫容易找不齊。這時一次性買付費圖庫的點數會比東拼西湊有效率。選擇比較看這篇：圖庫推薦！6 個最佳付費圖庫網站推薦。
免費影片素材：背景影片與動態 Hero
免費可商用的無版權影片素材網站不少，適合拿來做首頁 Hero 的背景循環影片。來源清單加上近期的 AI 影片生成工具，整理在這篇：【2026精選】5 個免費影片素材網站＋AI 影片工具（可商用唷！）。
放影片到網站前有三個重點：檔案要壓到 5MB 以下、去掉聲音軌、行動版改用靜態圖，否則會嚴重拖慢載入。影片本身的處理跟圖片壓縮同一個道理，下面「素材上站前處理」會一起講。
Icon 圖示與圖示字型
網站上的小圖示有兩種做法：圖片檔（PNG／SVG）適合彩色、複雜的圖示，圖示字型（icon font）適合 UI 裡大量重複的單色圖示。
- 圖片檔（PNG／SVG）：適合彩色、複雜的圖示。SVG 可縮放不失真、檔案小，是網頁首選；PNG 只在需要點陣效果時用。
- 圖示字型（icon font）：像文字一樣用 CSS 控制大小顏色，一次載入整套。適合 UI 裡大量重複的功能性圖示（選單、箭頭、社群連結）。缺點是整套載入、單色為主。
台灣設計師做的一套免費中文情境圖示字型，看這篇：台灣專屬圖示字型：免費的 Taiwan Icon Font 由雙設計師精心打造。國際的 Icon 平台（Flaticon、Iconfinder 等）多為免費＋付費混合，套用前記得確認是否需要標註來源。
字型資源：中文授權要特別小心
網站字型的授權，英文字型可商用選擇很多（Google Fonts 一整櫃），中文字型則要特別小心：多數「看起來免費」的中文字型其實只授權個人非商用，用在商業網站要付費授權。
安全的做法是用明確開源的中文字型（思源黑體／思源宋體、jf open 粉圓、Noto Sans TC 等），或直接用 Google Fonts 上有繁體的字型。字型相關的內容與一個有趣的案例：justfont 在愚人節推出新字型：就是不錯字（吧）。
3D 素材與插畫
扁平插畫、3D 物件、等角視覺（isometric）這幾年在 landing page 很吃香，能在不用攝影的情況下做出品牌感。免費與付費的 3D／插畫資源整理在這篇：實用！免費和付費的 3D 網頁設計資源。
插畫類素材特別容易有「免費版需署名、商用要付費」的限制，下載前務必確認。
配色與年度代表色
配色卡關時，除了配色工具，看看每年的趨勢色也是一個起點。Pantone 公布 2023年度代表色！Viva Magenta 萬歲洋紅記錄了 Pantone 年度色的脈絡與用色思路。想直接用現成配色方案，可延伸看6 個網站配色範例。
設計靈感網站：卡關時去哪找方向
不知道版型怎麼排、整體風格要往哪走的時候，去看別人做好的網站是最快的。精選的靈感網站清單（含 RAB 對「什麼情況參考哪一種」的建議）：2026 網頁設計推薦：13 個網頁設計靈感網站＋架設公司推薦！。
看靈感網站的正確方式是拆解結構（它的資訊層級、留白、CTA 位置），不是整頁照抄視覺。
社群與各版位圖片尺寸
同一張主視覺要出現在官網、Facebook、Instagram、LINE，每個版位的裁切比例都不一樣。一份會隨平台改版更新的尺寸對照表：2026更新！社群圖文尺寸全整理＋靈感包。
素材找到之後：放上網站前的四個處理步驟
素材下載後、放上網站前要做四件事：壓縮並轉 WebP、裁到顯示尺寸、改成英文語意化檔名、補上 Alt 文字。這一段是多數素材懶人包不會講、但最影響網站表現的部分。圖片是拖慢網站的頭號原因（詳見網站速度慢的 5 個原因），一張沒處理的原圖動輒 3～5MB，放十張首頁就爆了。
壓縮並轉成 WebP
下載回來的 JPG／PNG 先過一次壓縮，並轉成 WebP（同畫質下檔案比 JPG 小 25～35%）。線上工具的實測比較看這篇：2026 最推薦的 3 款線上圖片壓縮工具：支援 WebP/PNG。WordPress 站可以用外掛在上傳時自動壓縮轉檔。
先裁到實際顯示尺寸
網頁上寬度只會顯示到 1200px 的圖，就不要上傳 4000px 的原檔。先在圖片編輯器裁到接近實際顯示的尺寸（再乘上 1.5～2 倍給高解析螢幕），可以省下大量檔案體積。
檔名用有意義的英文
IMG_20260101.jpg 改成 taipei-office-meeting.webp。搜尋引擎會讀檔名判斷圖片內容，中文與空白檔名在不同伺服器上還可能出現編碼問題。做法見WordPress 新手必看！英文檔名的重要性及最佳命名技巧。
補上 Alt 文字
每張有資訊意義的圖都要寫 Alt：描述圖片內容，一句話、不堆關鍵字。這同時是無障礙需求與圖片 SEO 的基礎。
找不到合適素材、或想要一致的視覺語言時
如果只是需要一個過渡用的 LOGO，線上工具能應急，看品牌LOGO設計難產？讓 Placeit 幫你，但模板化的成果容易跟別人撞名，不適合當作長期品牌識別。
免費素材的極限是「堪用」。當網站需要的是一整套服務於品牌的視覺——主視覺、插畫風格、Icon 系統、版型都講同一種語言——拼湊免費素材會看得出接縫。
這種時候，找專業團隊從品牌定位往下做設計會比較有效率。RAB 瑞布科技提供 網頁與品牌視覺設計服務，從視覺規劃、版型設計到上站後的效能與 SEO 一起處理，適合已經有明確品牌方向、想要一次到位的中小企業。需要評估的話，可以跟我們聊聊。
網頁設計免費素材的常見問題
免費圖庫（Pexels、Pixabay、Unsplash）的圖需要標註來源嗎？
不需要。這三個網站的授權接近 CC0，可商用、可修改，不必署名作者或標註來源。但如果照片裡有可辨識的人物、商標或藝術品，那部分的肖像權與商標權不在授權範圍內，用在廣告情境要另外確認。
Flaticon、Freepik 的免費版可以商用嗎？
多數情況下可以，但通常要求標註來源，而且不能用在「會被下載或轉售的成品」裡（例如你要販售的網站模板）。單一素材的規則以它自己的授權頁為準，同一個平台不同素材可能不一樣。
AI 生成的圖片可以用在商業網站嗎？
可以用在自己的網站，但建議不要當品牌識別核心（例如 Logo），也不要主張擁有著作權。涉及商標註冊或對外授權時，優先用人類創作或有明確商用授權的素材。
網站圖片一定要壓縮嗎？用哪個工具？
要。未壓縮的圖片是拖慢網站最常見的原因。下載回來的圖先壓縮並轉成 WebP，線上工具的比較見最推薦的 3 款線上圖片壓縮工具；WordPress 站可用外掛在上傳時自動處理。
中文字型可以自由用在網站上嗎？
不一定。多數「免費」中文字型只授權個人非商用。商業網站請用明確開源的中文字型（思源黑體、jf open 粉圓、Noto Sans TC 等），或 Google Fonts 上的繁體字型。
可以直接用 Google 圖片搜尋到的圖嗎？
不行。Google 圖片是搜尋結果，不是圖庫，絕大多數圖片有著作權。要用可商用素材，請到本文列的圖庫網站，或在 Google 圖片的「工具 → 使用權」篩選後，仍需逐一確認來源授權。
網頁設計的圖片建議用多大的尺寸？
以實際顯示尺寸的 1.5～2 倍為原則。全寬主視覺約 1920～2400px 寬、內容區圖片約 1200～1600px、縮圖約 600～800px，全部轉 WebP 並壓縮。
延伸閱讀
- 網站速度慢的 5 個原因——素材沒處理好最直接的後果
- WordPress 新手必看！英文檔名的重要性——素材命名的細節
- 2026 網頁設計推薦：13 個網頁設計靈感網站——找方向用
