Lottie 動畫完全指南：告別 GIF，用更輕量的方式為網站注入動態特效

Lottie 是 Airbnb 在 2017 年開源的動畫技術，本體是一份 JSON 檔，記錄的是向量圖形的動畫資料而非逐格像素，因此同一支動畫的檔案大小可壓縮到 GIF 的數百分之一，放大也不失真。要在 WordPress 嵌入它，關鍵不是「要不要用 Lottie」，而是「用哪一種嵌入方式」：免費版用 HTML 小工具貼一段代碼就夠，付費的 Elementor Pro 或 Divi Supreme 才能在編輯器內調播放速度與滾動觸發。選對方法，才不會為了動畫效果犧牲網站速度 [來源：〈Lottie〉〈https://airbnb.io/lottie/〉〈2017〉；〈LottieFiles〉〈https://lottiefiles.com/〉〈2026〉]。

重點先看：Lottie 檔案可比 GIF 小到數百分之一、放大不失真，免費版 Elementor 用 HTML 小工具貼代碼就能嵌入，不必為了動畫花錢升級 [來源：〈LottieFiles Documentation〉〈https://lottiefiles.com/〉〈2026〉]。

為什麼有人改用它取代 GIF

Lottie 是 Airbnb 開源的動畫技術，常被稱為 LottieFiles，播放器函式庫支援網頁、iOS、Android。它本質上是一份 JSON 檔，存的是向量圖形的動畫資料，而不是 GIF 那種逐格像素。就是這個差別，讓它檔案極小、可無限放大不失真、跨網頁與 App 都能播放，這三點正是它逐步取代 GIF 的原因。Apple、Google、Uber 等大型產品都採用，顯示它在效能與跨平台上已經相當成熟 [來源：〈Lottie — Open-source animation tool〉〈https://airbnb.io/lottie/〉〈2017〉；〈LottieFiles〉〈https://lottiefiles.com/〉〈2026〉]。

很多人第一次聽到 Lottie，會直覺聯想到 GIF 動圖。兩者擺在一起其實是不同世代的東西。GIF 是 1987 年誕生的點陣格式，色彩被限制在 256 色；Lottie 則是 2017 年才開源的向量動畫格式，靠的是數學運算來描述形狀與動作。講白了，一個把每一格畫面都存下來，一個只存「怎麼畫、怎麼動」。這也是為什麼同樣一支動畫，Lottie 能小到 GIF 的數百分之一。

如果你剛接觸 WordPress 架站，或還在比較 WordPress 頁面編輯器，這些背景知識夠你判斷要不要採用了。馬上來看它跟 GIF 在檔案大小與畫質上實際差多少。

• 開源成熟，2017 年由 Airbnb 開源，播放器涵蓋網頁、iOS、Android，生態穩定 [來源：〈Lottie on GitHub〉〈https://github.com/airbnb/lottie〉〈2017〉]。
• 存的是向量動畫資料而非逐格像素，所以無限放大不模糊，解析度問題基本不存在。
• 同一支動畫可壓到 GIF 的數百分之一，對載入速度與 Core Web Vitals 都更友善。
• 輸出格式涵蓋 JSON、dotLottie、GIF、MP4、WebM，官方最推薦體積最小的 Lottie／dotLottie。
• Apple、Google、Uber 都在產品內使用，跨平台成熟度夠 [來源：〈LottieFiles〉〈https://lottiefiles.com/〉〈2026〉]。

Lottie vs GIF 檔案大小與畫質實際比較

在同樣動畫內容下，Lottie 的檔案大小可壓到 GIF 的數百分之一，而且因為是向量格式，放大後依然清晰，不會出現 GIF 常見的鋸齒與雜點。換句話說，它是檔案更小、畫質通常更好的選擇。但要注意，來源常引述「Lottie 最高可縮小到 GIF 的 600 分之一」這類極端倍數，這屬於案例級數據，實際壓縮比依動畫複雜度而定，方向很明確、數字別照單全收 [來源：〈LottieFiles — Why Lottie?〉〈https://lottiefiles.com/〉〈2026〉]。

說到底，檔案小直接帶動載入速度提升，對行動版與 SEO 的 Core Web Vitals 都更友善。Lottie 還能在播放器內調播放速度、迴圈、背景色、觸發條件，這些互動控制 GIF 根本做不到。不過話說回來，若你只是要一段靜態循環圖、又完全不需要互動，GIF 仍可以用；但只要涉及網頁動態或響應式，Lottie 幾乎全面勝出。想深入了解網站速度，可參考網站速度優化全攻略。動畫會不會被搜尋引擎收錄也值得留意，若某些過渡頁或測試頁不想被索引，先搞懂哪些頁面該設 noindex再上線比較穩。

比較項目	Lottie（向量動畫）	GIF（點陣動圖）
檔案大小	可小到 GIF 的數百分之一（案例級數據，依複雜度浮動）[來源：〈LottieFiles〉〈https://lottiefiles.com/〉〈2026〉]	逐格像素，檔案偏大
色彩支援	不受 256 色限制	僅 256 色
放大表現	向量運算，無限放大不失真	放大即出現鋸齒雜點
互動控制	可調速度、迴圈、觸發條件	僅能迴圈播放
跨平台	網頁、iOS、Android 通用	通用但無法客製播放
適用情境	網頁動態、響應式、互動 UI	簡單靜態循環、無互動需求

順帶一提，檔案格式的選擇也會影響效能，Lottie 之外若要處理靜態圖片，可參考這篇 WebP JPG PNG 圖片格式比較。

不只是 GIF 替代品：Lottie 與 SVG、CSS、MP4 動畫的選擇邊界

把 Lottie 只當成「更小的 GIF」會低估它的定位。實際做網頁動態時，設計師手上的選項還有純 CSS 動畫、SVG 動畫、MP4／WebM 影片，每一種都有自己擅長的場景，硬要用同一種打天下反而會踩雷。判斷的關鍵在動畫的「複雜度」與「是否需要互動」這兩個維度。

動畫類型	最適合的內容	主要限制	與 Lottie 的關係
CSS 動畫	位移、旋轉、淡入淡出、按鈕 hover 等規則動作	無法描述複雜形變與路徑動畫	簡單效果用 CSS 更輕，不必動用 Lottie
SVG 動畫（含 SMIL／JS 驅動）	圖示描邊、形狀變形、資料視覺化	需手寫或搭配 GSAP，產出門檻高	Lottie 可視為 SVG 動畫的標準化封裝
MP4／WebM 影片	真實影像、實拍素材、大量漸層與粒子	檔案大、放大會糊、無向量	影像類內容 Lottie 取代不了影片
Lottie	向量插畫、角色動畫、載入動畫、UI 過場	不支援太複雜的特效與點陣合成	向量動畫的最佳解

一個實用的判斷原則：動畫內容是「畫出來的」就優先考慮 Lottie，是「拍出來的」就交給影片，是「幾何規則動作」就用 CSS。把一支只有按鈕變色的簡單效果做成 Lottie，反而多載一個播放器函式庫，得不償失。反之，硬要用 CSS keyframes 寫一段角色走路動畫，會寫到難以維護。先想清楚動畫本質，再決定工具，這比糾結哪種技術「最強」更實際。

若你常用向量工具，Figma 載入動畫教學、Figma 動態按鈕設計與Figma 視差互動效果能補上設計端的操作細節，搭配這裡的嵌入邏輯一起看會更完整。

什麼情況不該用 Lottie：反向決策清單

多數 Lottie 教學只談「怎麼用」，卻很少談「什麼時候收手」。實務上，把 Lottie 套進不適合的場景，反而比完全不動畫更糟。以下幾種情境，把 Lottie 換成更簡單的做法會得到更好的結果。

• 動畫只為了「讓畫面有動」而存在、沒有承載任何訊息時，這類純裝飾動畫往往拖慢載入又不提升體驗，拿掉或換成一張精選靜態圖反而俐落。
• 需要表現真實質感與光影的內容，例如人物膚色、布料反光、自然漸層與粒子特效，向量運算難以逼真重現，這時 MP4 或 WebM 影片才是正解。
• 動畫邏輯高度依賴資料即時變動，例如折線圖隨數值更新、計時器精準到毫秒，這類由程式驅動的視覺化交給 Chart.js、D3 這類函式庫處理更可靠。
• 頁面已經放了多支 Lottie、首屏 LCP 開始惡化時，優先做減量，把次要動畫改成靜態或移到非首屏，勝過再增加一支。
• 團隊完全沒有維護 After Effects 與 JSON 的能力，日後動畫需要頻繁改色、改節奏卻無人可改，外連官方素材會比自製更省事。

把這張反向清單與前面的「畫出來、拍出來、幾何規則」判斷法搭配，等於有了完整的兩面決策：先確認該不該動，再決定用哪種技術動。設計品味可以很主觀，但「不必要的動畫會吃掉效能」這點相當客觀。

Lottie 動畫哪裡下載？免費可商用的取得流程

LottieFiles 官網是取得免費 Lottie 動畫的主要來源，登入後可在站上搜尋、預覽並下載，多數動畫允許個人與商業專案使用；下載後能進入工作檯調配色、背景與播放速度，再輸出 JSON、dotLottie 或直接複製嵌入代碼。整個流程不需要寫程式，接案設計師自己就能跑完。

這裡有個限制要先講清楚：免費版工作檯通常有儲存數量上限，約只能存 10 個動畫 [來源：〈LottieFiles Pricing〉〈https://lottiefiles.com/pricing〉〈2026〉]。對一般品牌官網點綴一兩支動畫絕對夠用，但若你要大量素材或團隊協作，才需要考慮付費升級，實際方案以官網為準。想找其他免費素材資源，商用免費圖庫網站總整理與免費 Icon 圖示網站推薦也整理好了。

1. 在 LottieFiles 搜尋喜歡的動畫，點開預覽效果。
2. 點右上角 Download，再選 Save to workspace，動畫會先存進你的後台工作檯。
3. 進入工作檯即時預覽，調整配色、加背景、調速度，確認效果。
4. 輸出方式兩種：下載檔案（JSON / dotLottie / GIF / MP4 / WebM），或複製 Asset Link 網址與 Embed HTML 代碼。
5. 官方推薦優先使用 dotLottie，體積比 JSON 更小、載入更快 [來源：〈dotLottie — Open animation file format〉〈https://dotlottie.io/〉〈2026〉]。

老實說，90% 的情境你不需要把整包檔案下載回來。只要在右方工具列找到 Handoff & Embed，開啟 Enable Asset Link，複製 Asset Link 網址或 Embed HTML 代碼就好，外連更省伺服器容量，日後在 Lottie 後台更新動畫，網頁那邊也會同步。如果你設計的是品牌官網，這個做法特別划算。

Lottie 的 HTML 代碼還提供更多客製功能，點 Customize 就能調播放速度、動畫大小、背景色、倒轉播放、自動播放或循環播放，甚至設定滑鼠懸浮觸發播放。設定完直接複製下方的客製 HTML 代碼，就能貼進網站。

WordPress 嵌入 Lottie 的 3 種方法（含免費做法）

把 Lottie 嵌進 WordPress 有三條路：用任何頁面編輯器內建的 HTML 小工具直接貼代碼（免費、最通用）、用 Elementor Pro 的 Lottie 元件（付費、設定最完整）、用 Divi 搭配 Divi Supreme 外掛的 Supreme Lottie 小元件（外掛免費版即可用）。沒買 Elementor Pro 一樣能嵌入，這是很多人誤會的地方。

我會建議你先想清楚自己的需求再選方法。只想快速放一個動畫、不在意細調，HTML 代碼法就夠；要在編輯器內設滾動觸發、播放速度，才回頭考慮付費方案。別為了 Lottie 去買 Elementor Pro，除非你本來就打算用它的彈跳視窗、頁首頁尾設計這些進階功能。以下三種方法的選擇邏輯，可對照你目前的 WordPress 架站費用與工具配置。

方法	費用	適合誰	觸發與播放控制
HTML 小工具貼代碼	免費	任何編輯器、只求快速上線	只能改 Lottie 端客製參數
Elementor Pro Lottie 元件	付費	已在用 Elementor Pro、要細調	編輯器內調速度、滾動、懸浮觸發
Divi Supreme Lottie	外掛免費版	Divi 使用者	迴圈、延遲、速度、觸發皆可設

三種方法都支援兩種來源：本機檔案上傳、或 Asset Link 外連網址。外連更省容量，也方便日後統一更新。還沒決定用哪套編輯器的人，可以先看Elementor 完整入門教學與Divi 主題終極指南。

Elementor 的兩種嵌入做法

免費 Elementor 透過 HTML 小工具貼代碼就能嵌入 Lottie，但播放設定只能改 Lottie 那一端的客製參數；買了 Elementor Pro 則有專屬 Lottie 元件，可直接在編輯器內調播放速度、開始結束時間，並設定點擊、懸浮、滾動等觸發條件，不用再回 Lottie 後台改代碼。差別就在「能不能在編輯器內調」這一件事。

先講免費版做法。進入 Elementor 編輯器後，在左方工具列的元素搜尋 HTML，就能快速找到 HTML 元件，把它拖曳到你想放 Lottie 動畫的位置。回到 Lottie 的 HTML 客製頁面，下方會有 dotLottie 和 Lottie JSON 兩種代碼，任選一種一鍵複製（官方推薦 dotLottie [來源：〈dotLottie〉〈https://dotlottie.io/〉〈2026〉]）。貼回 Elementor 的 HTML 小工具，動畫就嵌進去了。真的有這麼簡單，我第一次試的時候也懷疑是不是少了什麼步驟。

若要客製播放（速度、背景、迴圈），先在 Lottie 的 Customize 頁面調好再複製代碼，因為免費版沒辦法在 Elementor 內改這些。接著看 Pro 版。有購買 Elementor 進階方案的話，直接在右方工具列搜尋 Lottie 動畫元件，拖曳到定位，選擇上傳 JSON 或貼 Asset Link 網址。

• 觸發方式是 Pro 版最明顯的差別：點擊、滑鼠懸浮、隨頁面滾動播放，都能直接在面板裡指定。
• 播放細節方面，速度、動畫開始與結束時間、反轉動畫都可調。
• 來源建議走 Asset Link 外連，不要上傳整包檔案，省下網站容量，日後在 Lottie 後台更新也會同步。

用 Asset Link 外連，可省下網站容量，也方便日後在 Lottie 後台更新動畫。如果你正在做滿版輪播 Hero 區塊、圖片輪播或作品集展示，把 Lottie 當點綴動畫嵌進去，視覺層次會立刻不一樣。其他像文章列表客製化、表單設計也都能搭配。想擴充 Elementor 功能，可參考Elementor 外掛推薦清單與 Ultimate Addons for Elementor 擴充模組。

Divi 嵌入 Lottie：用 Divi Supreme 外掛免費搞定

Divi 本體沒有內建 Lottie 元件，但只要安裝免費的 Divi Supreme 外掛，就能在 Divi 編輯器找到 Supreme Lottie 小元件，透過上傳 JSON 或貼 Asset Link 網址嵌入動畫，並在編輯器內調迴圈、延遲、速度與觸發方式，免費版即夠用。所以 Divi 使用者完全不用另外花錢。

第一步是安裝 Divi Supreme Modules 外掛。這款外掛的免費版就含 Lottie 動畫元件，連同其他約二十多個實用模組都能直接用 [來源：〈Divi Supreme Pro〉〈https://divisupreme.com/〉〈2026〉]。對預算有限的接案設計師來說，這幾乎是把 Divi 戰力直接補齊。裝好外掛後，進入 Divi 頁面編輯器，找到 Supreme Lottie 小元件並加入。更多背景可參考Divi 主題架站全攻略。

1. 安裝 Divi Supreme Modules 外掛（免費版即含 Lottie 元件與其他模組）。
2. 進入 Divi 頁面編輯器，找到 Supreme Lottie 小元件並加入。
3. 嵌入來源兩種：上傳 Lottie JSON 檔，或貼上 Lottie 後台的 Asset Link 網址。
4. 調播放設定：迴圈播放、延遲播放、播放速度、播放次數。
5. 設觸發方式：點擊、滑鼠懸浮、隨滾動播放；懸浮還能設定是播放還是停止動畫。

嵌入後可在 Divi 編輯器調循環播放或延遲播放，也能調播放速度或設定播放次數。觸發方式支援點擊、滑鼠懸浮、隨滾動播放，其中懸浮還能選擇是播放還是停止動畫，玩法相當多。進階版 Divi Supreme Pro 增加更多模組（總計約五十多個，如彈跳視窗、聯絡表單、社群分享等），但單純放 Lottie 用免費版即可 [來源：〈Divi Supreme Pro Features〉〈https://divisupreme.com/〉〈2026〉]。

如果你在做更複雜的 Divi 版面，像是圖片懸停特效、視差滾動效果或輪播外掛，把 Lottie 動畫當互動元素加進去，會比純圖片更有記憶點。頁首設計套版、子主題、Divi 5 新介面也都能搭配使用。想找更多 Divi 工具，看必裝 Divi 外掛推薦與Divi Supreme 模塊擴充評價。

用 Gutenberg 區塊編輯器嵌入 Lottie 的做法

前面談的多是 Elementor 與 Divi，但 WordPress 預設的 Gutenberg 區塊編輯器一樣能嵌 Lottie，而且完全免費。最直接的方式是使用「自訂 HTML」區塊，把 Lottie 後台複製來的 dotLottie 或 JSON 嵌入代碼整段貼進去，發布後動畫就會出現在文章或頁面裡。這條路完全不依賴任何付費外掛，也不挑主題，是成本最低的方案。

「自訂 HTML」區塊的代碼不會被 Gutenberg 自動轉譯或過濾，所以貼進去的腳本標籤會原樣保留，這正是它適合嵌 Lottie 的原因。需要注意一點：若你的站啟用了會過濾 iframe 或 script 的安全外掛，貼入的播放器腳本可能被擋下，導致動畫空白。遇到這種狀況，先把該腳本網域加入白名單再測一次。

若覺得貼代碼太陽春，也有免費的 Lottie 專用區塊外掛可選，安裝後會在區塊選單多出一個 Lottie 元件，提供上傳 JSON、貼網址、調迴圈與速度的圖形介面，操作邏輯與 Elementor Pro 的 Lottie 元件接近。這類外掛適合不願碰代碼、又想要可視化設定的編輯者。無論選哪種，來源都建議走 Asset Link 外連，理由和前面一樣：省容量、好更新。對 Gutenberg 操作還不熟的人，可先看區塊小工具設定教學打底。

效能與觸發設定

Lottie 檔案本身比 GIF 小很多，但若一頁放太多支、又全部設成自動播放與無限迴圈，仍會吃掉 CPU 與首屏載入時間。正確做法是控制數量、改用滾動或懸浮才觸發播放、並優先用外連 Asset Link 而非上傳整包檔案。檔案小不代表零成本，播放方式才是真正的效能開關。

這是我看過最多人踩的坑。很多人以為「Lottie 比 GIF 小 600 倍，所以怎麼放都不會慢」，於是首頁塞了五六支動畫全部自動無限迴圈，結果行動版的 LCP 反而變差。真正決定網站會不會變慢、動畫會不會白跑的，從來不是檔案大小而是嵌入方式：你是把整包 JSON 上傳、還是用 Asset Link 外連、有沒有設「滾動才播放」。效能與 SEO 往往要一起抓，若想系統性打通技術 SEO 與工具操作，跟一輪搭配 Ahrefs 實作的 SEO 陪跑班會比單看文章更快建立整體判斷。

• 數量要控制，單頁重點區塊放一兩支點綴就夠，別為了熱鬧堆滿動畫。
• 把自動播放改成「滾動到視窗才播放」或「滑鼠懸浮才觸發」，別讓動畫在背景白白消耗資源。
• 來源優先用 dotLottie 與 Asset Link 外連，檔案更小，也方便在 Lottie 後台統一更新。
• 記得搭配網站快取與延遲載入機制，把 Lottie 對 Core Web Vitals 的影響壓低。
• 行動版要留意：複雜向量動畫在舊手機上運算成本不低，寧可精簡也不要過度裝飾。

效能這件事值得單獨認真看待。向量動畫雖然檔案小，但播放時是靠瀏覽器即時運算每一幀的形狀變化，這代表 CPU 用量會隨動畫複雜度與同時播放數量線性上升。一頁放十支簡單載入動畫，跟一頁放一支複雜粒子動畫，後者可能更吃資源。所以與其糾結「Lottie 會不會讓網站變慢」，更該盤點的是：這頁同時跑了幾支、每支多複雜、有沒有設觸發條件。這三項盤點做完，效能大致不會失控。

想搭配整體效能策略，可看WordPress 加速效能外掛推薦、WP Rocket 快取外掛設定、WordPress 快取外掛比較，以及Lazy Loading 延遲載入教學。涉及 SEO 指標，參考Core Web Vitals SEO 指標優化，搭配 CDN 網站加速原理與快取 Cache 是什麼會更完整。想檢測現況，用網站速度測試工具推薦跑一次。若懷疑是圖片拖慢，看圖片壓縮與延遲載入、圖片優化指南、圖片壓縮工具實測推薦，或從網站速度慢的診斷與解法下手。

進階觸發控制：滾動播放與減少動態效果的底層邏輯

Elementor Pro 與 Divi Supreme 雖然提供圖形化的滾動觸發選項，背後其實都封裝了兩個瀏覽器原生能力：IntersectionObserver 與 prefers-reduced-motion。理解這兩個能力的運作原理，能在沒有付費編輯器、或需要更細微控制時，自己用少量 JavaScript 達成一樣的效果。

IntersectionObserver 的作用是讓瀏覽器在目標元素「進入視窗範圍」時才通知腳本，相較於傳統的 scroll 事件監聽，它不會在每次捲動都觸發運算，CPU 成本低很多。把 Lottie 動畫接上這個觀察器，就能做到「動畫滑進視窗才開始播放、滑出視窗就暫停」，避免畫面外的動畫白白消耗主執行緒。這正是把首屏以外動畫對效能影響降到最低的核心手法。

另一個常被忽略的是 prefers-reduced-motion。這組媒體查詢讀取的是使用者作業系統層級的「減少動態效果」設定，前庭功能失調、容易暈眩或對閃爍敏感的讀者會主動開啟它。尊重這個偏好是基本的無障礙責任，做法很直接：偵測到該偏好時，把 Lottie 停在第一幀或完全替換成靜態圖，讓動畫在那群使用者眼前變成靜止畫面。忽視這點，等於對需要安靜瀏覽環境的讀者不友善。

• 首屏動畫：盡量精簡，必要時才自動播放一次並停止，避免無限迴圈佔住主執行緒。
• 非首屏動畫：套用 IntersectionObserver，進入視窗才播放、離開就暫停，省下背景運算。
• 全站動畫：統一加上 prefers-reduced-motion 判斷，讓需要減少動態的使用者自動看到靜態版本。
• 複雜動畫：行動版評估後可降級為靜態首幀，桌面版才啟用完整播放。

把這三層控制想成「能不播就不播、要播才精準播、誰不能播就靜止」的遞進策略，比單純把動畫全設成自動迴圈穩健得多。這也是免費 HTML 代碼法想追上付費編輯器控制力時，最值得補上的一段能力。

Lottie 對 Core Web Vitals 與 SEO 的真實影響

把 Lottie 放進網頁，到底會怎麼影響 Google 用來衡量體驗的 Core Web Vitals？拆開三個指標來看會比較清楚。LCP（最大內容繪製）看的是首屏最大元素完成的時間，若你把一支 Lottie 動畫放在 Hero 區當主視覺、又設成自動播放，播放器腳本載入與第一幀算繪都會算進 LCP，這時動畫越複雜、LCP 越容易惡化。CLP（互動延遲，現稱 INP）的風險在於：多支向量動畫同時跑會佔住主執行緒，使用者點按鈕時的回應變慢。CLS（版面位移）則相對可控，只要在容器先固定好寬高，動畫載入前後就不會跳版。

速度之所以值得投資，是因為它已經是實實在在的排名訊號與營收變數。Google 在 2018 年正式把網頁速度列入行動搜尋的排名因素，並在 2021 年把 Core Web Vitals 整進頁面體驗訊號 [來源：Google Search Central Blog〈Using page speed in mobile search〉〈developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search〉〈2018-01-17〉；〈Evaluating page experience〉〈developers.google.com/search/blog/2020/05/evaluating-page-experience〉〈2020-05-28〉]。而速度與商業成果的連結也有公開案例佐證：Vodafone 把 LCP 改善約 31% 後，銷售增加 8%；redBus 改善 INP 後銷售增加 7%；Rakuten 24 投入 Core Web Vitals 優化，每位訪客營收提升 53.37%、轉換率提升 33.13% [來源：web.dev〈Why does speed matter?〉〈https://web.dev/articles/why-speed-matters〉〈2026〉]。這些數字說明，Lottie 帶來的「一點點額外載入」若不控制，吃掉的不只是分數，還可能是轉換。

把上述邏輯收斂成可執行的原則：首屏可見的 Lottie 盡量精簡、關掉自動無限迴圈、改用滾動觸發；非首屏的動畫一律延後載入；容器先佔好寬高避免 CLS。做到這三點，Lottie 對 Core Web Vitals 的拖累就能壓到很低。想建立自己的 Core Web Vitals 優化節奏，可搭配Core Web Vitals SEO 指標優化與網站速度測試工具推薦實測。

無障礙與降級：Lottie 不支援時怎麼辦

Lottie 動畫播放仰賴 JavaScript，這代表幾種情境會讓它「不動」：使用者關閉瀏覽器 JavaScript、使用純文字閱讀模式、或輔助科技讀取頁面時。一份負責任的網頁不該把關鍵資訊藏在動畫裡，因為動畫跑不出來時，這些資訊就消失了。判斷標準很簡單：若拿掉這支 Lottie，使用者還能不能完成任務、看懂訊息？答案是要能。

• 動畫容器加上合適的替代文字或 aria-label，讓螢幕閱讀器能描述動畫用途，而不是把整段 JSON 念出來。
• 純裝飾用的動畫標記為 aria-hidden，避免干擾輔助科技的朗讀順序。
• 關鍵流程（如載入中、成功、錯誤提示）不要只靠動畫表達，同時給文字狀態，確保關閉 JS 時訊息仍在。
• 尊重使用者的「減少動態效果」系統偏好，可用 media query（prefers-reduced-motion）讓動畫自動停止或改為靜態首幀。

降級方案不需要很複雜。最常見的做法是給容器一張靜態首幀圖當背景，動畫腳本載入並播放後會蓋過它；腳本沒跑時，使用者至少看到一張合理的圖，版面不會破。這張靜態圖通常就是 Lottie 動畫的第一幀，可從 LottieFiles 工作檯直接匯出 PNG。把無障礙與降級當成嵌入流程的預設步驟，而不是事後補丁，網站體質會穩得多。設計層面的可及性原則，可參考UIUX 設計差異解析與網頁設計關鍵元素。

把自製動畫變成 Lottie：After Effects 匯出流程與常見錯誤

不想只靠 LottieFiles 現成素材、想用自己設計的動畫，就得走 After Effects 匯出這條路。核心工具是 LottieFiles 提供的免費外掛 Bodymovin（現稱 LottieFiles plugin for After Effects），它能把 AE 的合成轉譯成 Lottie 能讀的 JSON。整個流程可以拆成幾個明確步驟。

1. 在 Adobe After Effects 完成動畫合成，盡量只用形狀圖層、路徑、變形等向量屬性。
2. 安裝 LottieFiles 外掛（Bodymovin），在 AE 的「延伸功能」面板找到它。
3. 選擇要匯出的合成，設定輸出為 Lottie JSON 或 dotLottie，並選擇匯出資料夾。
4. 勾選需要的選項（如包含在 HTML 中預覽），按下渲染匯出檔案。
5. 把匯出的 JSON 或 dotLottie 上傳到 LottieFiles 工作檯或自己的伺服器，再依前面的嵌入方法貼進 WordPress。

匯出後常見的問題是「動畫在 AE 裡正常、匯出成 Lottie 後卻變形或缺東西」。這通常是因為用到了 Lottie 尚未完整支援的效果。Lottie 原生支援的是向量屬性，遇到點陣圖、粒子、部分模糊與陰影特效、第三方外掛效果時，匯出結果會與預覽不一致。幾個降低出錯率的原則：優先用形狀圖層取代點陣素材、用 trim path 取代複雜遮罩、把文字先轉成外框、避免依賴 expressions 的進階寫法。匯出前先用外掛內建的預覽功能檢查一遍，能少跑很多來回。

症狀	常見原因	處理方向
動畫缺影格或停在第一幀	用到了不支援的效果或 expressions	移除該效果，改用向量屬性重做
顏色或漸層跑掉	漸層或遮罩設定過於複雜	簡化漸層、拆成多層形狀
文字變空白	文字圖層未轉外框	把文字 Create Outlines 後再匯出
檔案異常變大	混入點陣圖或粒子效果	改用向量素材與形狀圖層

把自製動畫顧到能穩定匯出，是接案設計師差異化的能力之一。若你還在累積設計工具與流程，Figma 載入動畫教學、免費 3D 素材資源與把 2D 圖片變 3D 動畫的工具都能當作素材來源。

Lottie 嵌入疑難排解清單

實際把 Lottie 嵌進 WordPress 後，難免遇到動畫不顯示、播放卡頓或觸發失效等狀況。與其在論壇大海撈針，直接照一份檢查清單從最常見的原因往下排查，多半能在幾分鐘內定位問題。以下清單涵蓋了大多數人會踩到的點。

1. 動畫完全空白：先確認 Asset Link 網址或上傳的 JSON 路徑正確，再檢查是否有安全外掛擋下播放器腳本。
2. 只在前測正常、上線後消失：檢查快取外掛或 CDN 是否快取了舊代碼，清除快取後重看。
3. 動畫播放卡頓：檢查同頁是否放了過多支動畫、是否全部自動無限迴圈，先改滾動觸發再測。
4. 行動版特別慢：評估動畫複雜度，把粒子或大量形變的動畫換成精簡版，或行動版直接用靜態首幀。
5. 觸發條件無效：確認使用的嵌入方式是否支援該觸發類型，純 HTML 代碼法需回 Lottie 的 Customize 頁面設定參數。
6. 動畫跑版或超出容器：在容器固定寬高，並確認 Lottie 的播放尺寸設定與版面相符。
7. 主題或外掛更新後失效：重新檢查自訂 HTML 區塊的代碼是否被過濾，必要時重新貼入。

照這個順序走一遍，超過八成的 Lottie 嵌入問題都能自己解決，不必求助開發者。若問題出在更底層的網站效能，可再回到網站速度慢的診斷與解法與WordPress 快取外掛比較做系統性排查。

Lottie 常見問題與使用限制總整理

Lottie 動畫大多可免費使用，但免費帳號有儲存數量上限；你可以用 After Effects 的 LottieFiles 外掛把自製動畫匯出成 JSON；就算只裝免費 Elementor，也能用 HTML 小工具嵌入 Lottie，不必為了動畫升級付費方案。以下把幾個最常被問的疑問一次釐清。

授權方面，LottieFiles 站上多數動畫開放個人與商業設計使用，但每一支的條款不盡相同，使用前回官網逐件確認最保險。免費帳號的工作檯有儲存額度，大約能擺十支動畫 [來源：〈LottieFiles Pricing〉〈https://lottiefiles.com/pricing〉〈2026〉]，品牌官網點綴幾支綽綽有餘，要養素材庫或多人協作才需要再談付費。想用自己的動畫也行，Adobe After Effects 加裝 LottieFiles 外掛就能匯出 JSON。至於嵌入，沒買 Elementor 進階方案一樣能用 HTML 小工具貼代碼解決，格式上 dotLottie 與 JSON 都吃，官方傾向 dotLottie，因為體積再壓更小 [來源：〈dotLottie〉〈https://dotlottie.io/〉〈2026〉]。

如果你在規劃整體網站資源，WordPress 外掛安裝教學、WordPress 必裝外掛清單、區塊小工具設定教學會用得上。設計面可參考最新網頁設計趨勢、網頁設計趨勢與 AI 應用、網頁設計關鍵元素，搭配UIUX 設計差異解析與CTA 行動呼籲按鈕設計。其他素材如免費 3D 素材資源、Figma 載入動畫教學、Figma 動態按鈕設計、Figma 視差互動效果、把 2D 圖片變 3D 動畫的工具也能互補。

回顧一下，選對嵌入方式比追問那個「600 倍」數字實際得多。想快速放一個動畫，HTML 代碼法免費搞定；要細調觸發與播放，再回頭看 Elementor Pro 或 Divi Supreme。如果還在選平台，30 分鐘架好 WordPress、WordPress 部落格架站教學、Landing Page 銷售頁製作教學、網頁設計公司推薦，以及 Bricks Builder 視覺化編輯器教學都能幫忙把基礎打好。網站上線只是起點，後續每隔一段時間回頭檢修文章與素材、補上新資訊，才能穩住排名，想掌握節奏可參考這份SEO 年度內容更新清單。

FAQ：Lottie 動畫常見疑問

Lottie 動畫是什麼？跟一般 GIF 動圖差在哪？

Lottie 是 Airbnb 開源的向量動畫格式，以 JSON 描述動畫資料；GIF 則是逐格點陣圖。前者檔案更小、可無限放大不失真，後者受 256 色與解析度限制。

Lottie 檔案真的比 GIF 小很多嗎？小多少？

同一支動畫，Lottie 可壓縮到 GIF 的數百分之一，但極端倍數屬案例級數據、會隨動畫複雜度浮動，方向是「更小且更清晰」，不必執著於單一精確倍數。

Lottie 動畫可以免費商用嗎？

LottieFiles 上多數動畫允許個人與商業使用，免費版工作檯約可存 10 個動畫，授權細節仍以官網各動畫標示為準。

沒有買 Elementor Pro 可以嵌入 Lottie 動畫嗎？

可以。免費 Elementor 用 HTML 小工具貼一段 dotLottie 或 JSON 代碼就能嵌入，只有需要編輯器內調滾動觸發、播放速度時，才需要 Pro 版。

要怎麼把 Lottie 動畫嵌入 WordPress 網頁？

三種方式：HTML 小工具貼代碼（免費）、Elementor Pro Lottie 元件（付費）、Divi Supreme 的 Supreme Lottie 小元件（外掛免費版）。來源皆可選上傳檔案或 Asset Link 外連。使用 Gutenberg 預設編輯器的人，則可用「自訂 HTML」區塊貼代碼，或裝免費的 Lottie 區塊外掛。

Lottie 的 dotLottie 跟 JSON 格式有什麼差別？

兩者都記錄向量動畫資料，dotLottie 是壓縮封裝格式，體積比 JSON 更小、載入更快，官方建議優先採用。

可以把自己設計的動畫轉成 Lottie 檔嗎？

可以。在 Adobe After Effects 完成動畫後，用 LottieFiles 外掛（Bodymovin）匯出成 Lottie JSON 或 dotLottie 檔即可，建議盡量只用形狀圖層等向量屬性，避免用到不支援的特效導致匯出結果變形。

Lottie 動畫可以設定滾動才播放或點擊才觸發嗎？

可以。Elementor Pro 與 Divi Supreme 都能在編輯器內設點擊、滑鼠懸浮、隨頁面滾動等觸發條件；純 HTML 代碼法則需在 Lottie 的 Customize 頁面先設好參數。

用 Lottie 會不會讓網站變慢？

單支適量使用不會。但若一頁堆滿動畫又全部自動無限迴圈，仍會拖慢首屏載入。控制數量、改用滾動或懸浮觸發、優先 Asset Link 外連，是降低影響的三個關鍵。

Divi 要怎麼嵌入 Lottie 動畫？需要裝外掛嗎？

Divi 本體無內建元件，需安裝免費的 Divi Supreme 外掛，裝好後在編輯器找到 Supreme Lottie 小元件，上傳 JSON 或貼 Asset Link 網址即可嵌入。

Lottie 動畫在無障礙與關閉 JavaScript 時會怎樣？

Lottie 仰賴 JavaScript 播放，關閉 JS 或用閱讀模式時動畫不會出現。穩妥做法是給容器一張靜態首幀圖當背景、加上替代文字，並把純裝飾動畫標記為 aria-hidden，關鍵訊息不要只藏在動畫裡。

Lottie 動畫會影響 Core Web Vitals 嗎？

會，主要影響 LCP 與 INP。首屏自動播放的複雜動畫會拖慢 LCP，多支動畫同時跑會佔住主執行緒影響 INP。把首屏動畫精簡、改滾動觸發、容器先佔好寬高避免 CLS，就能把影響壓低。Core Web Vitals 已是 Google 排名訊號之一，值得認真看待。