Select Page

用 Impeccable 改善 AI 網站設計：告別模板感與 AI 味

by | 6 月 14, 2026 | Agent, AI, Hermes, OpenClaw, Prompt

當我們開始用 AI 寫網站、做 Landing Page、產生前端介面時，常常會遇到一個問題

畫面看起來很快就完成了，但總覺得「哪裡怪怪的」。

按鈕很像、卡片很多、漸層很浮誇、字級沒有層次、留白不夠精準，甚至每個 AI 產生的網站都像是同一套模板改出來的。這種「可以用，但不高級」的設計感，就是許多 AI 前端作品容易落入的平庸陷阱。

而 Impeccable 官方網站 想解決的，正是這個問題。

什麼是 Impeccable？

Impeccable 是一套專為 AI Coding Agent 設計的前端設計輔助工具，它不是單純幫你產生漂亮畫面的 AI 設計工具，而是提供一套「設計語彙」與「設計指令」，讓你可以更精準地指揮 AI 改善網站畫面。

簡單說，Impeccable 讓 AI 不只是會寫程式，也更懂設計。

它可以協助 AI 理解網站中的層級、對比、留白、色彩、字體、動畫、產品脈絡與品牌調性，讓 AI 產生的前端畫面不再只是堆滿卡片、套上漸層、加一點陰影，而是更接近真正設計師會思考的介面。

你可以把 Impeccable 想像成：

一套給 AI 前端工程師使用的設計總監指令集。

為什麼 AI 做出來的網站常常很平庸？

現在很多人會用 AI 幫忙做網站，例如請 Claude Code、Cursor、Codex CLI 或 Gemini CLI 產生頁面。AI 很擅長快速完成版型，但如果沒有足夠清楚的設計方向，它很容易產生幾種常見問題：

  1. 每個區塊都用卡片包起來，看起來很模板化
  2. 喜歡使用過度常見的紫色漸層、玻璃擬態、發光陰影
  3. 字體大小與層級不夠精準，主標、副標、內文沒有明確節奏
  4. 留白太平均，缺乏視覺重點
  5. 按鈕、表單、導覽列看起來功能正確，但沒有品牌感
  6. Landing Page 和後台 Dashboard 使用同一種設計邏輯
  7. 作品看起來像 AI 產物，而不是成熟產品

Impeccable 的價值就在於，它不是只叫 AI「設計得漂亮一點」，而是提供更具體的設計方向，例如讓畫面更有層次、更安靜、更大膽、更精煉、更符合產品情境。

Impeccable 的核心特色

1. 提供 AI 可理解的設計語言

Impeccable 的官方介紹中提到，它補上了 AI Agent 缺少的設計語彙，這代表你可以用更接近設計師的方式指揮 AI，例如改善排版、調整顏色、強化視覺層次、降低過度設計、整理產品脈絡。

這對不熟設計術語的人很有幫助，因為你不需要長篇大論解釋「我要更高級、更有質感、更像品牌網站」，而是可以透過 Impeccable 的指令，把設計意圖轉成 AI 比較能執行的動作。

2. 支援多種 AI Coding 工具

Impeccable 可以搭配多種主流 AI Coding 工具使用，例如 Cursor、Claude Code、GitHub Copilot、Gemini CLI、Codex CLI 等。

這代表它不是只服務單一平台，而是比較像一套可以帶進不同開發流程的設計輔助層。對於已經習慣用 AI 寫前端的開發者來說，Impeccable 可以直接加入現有工作流程，不需要重新學一套完整設計軟體。

3. 透過指令改善網站設計

Impeccable 提供多個設計指令，讓你可以針對不同設計任務下達命令。例如：

/impeccable init
用來初始化專案，建立產品脈絡與設計方向。

/impeccable shape
在寫程式前先規劃 UX / UI，避免一開始就產生雜亂版型。

/impeccable critique
針對畫面的層級、清楚度、情緒感與設計品質做評論。

/impeccable audit
檢查技術品質，例如可及性、效能與響應式設計。

/impeccable polish
進行最後修飾，讓畫面更接近可上線品質。

/impeccable bolder
讓太保守、太無聊的畫面更有張力。

/impeccable quieter
讓太吵、太過度設計的畫面更穩重。

/impeccable distill
把畫面精煉到最核心的內容與視覺重點。

這些指令的好處是，你可以更像在跟設計師溝通，而不是一直對 AI 說：「再漂亮一點」、「再高級一點」、「不要這麼普通」。

4. 幫你減少 AI 生成網站的套路感

很多 AI 產生的網站會有明顯套路，例如紫色漸層、大量圓角卡片、發光邊框、過度一致的版面節奏。Impeccable 內建反套路的設計檢查，可以幫助你找出這些容易讓網站看起來廉價、模板化或過度 AI 感的元素。

這對品牌網站、形象頁、SaaS Landing Page、產品頁、作品集網站尤其重要。因為這些頁面的重點不只是功能完成，而是要讓使用者在第一眼感覺到專業、信任與差異化。

5. 保留你的設計系統，不是硬套新風格

Impeccable 的另一個優點是，它不是粗暴地把你的網站改成另一種風格，而是會盡量尊重既有的設計系統，例如顏色、字體、元件、間距、按鈕樣式與品牌規則。

這對已經有產品雛形或既有網站的人很重要。你不一定想要整個重做，而是希望 AI 幫你把現有介面整理得更成熟、更一致、更像一個真正的產品。

Impeccable 適合誰使用？

Impeccable 特別適合以下幾種人：

1. 用 AI 寫前端的開發者

如果你常用 Cursor、Claude Code、Codex CLI、GitHub Copilot 來產生 React、Next.js、Astro、Tailwind CSS 或其他前端頁面，Impeccable 可以幫你補上 AI 在設計判斷上的不足。

2. 想快速做出高質感 Landing Page 的創業者

很多創業者會用 AI 快速做 MVP，但 Landing Page 如果太普通，會影響使用者信任感，Impeccable 可以幫助你把「能用的頁面」推進到「比較有品牌感的頁面」。

3. 會寫程式但不擅長設計的人

你可能知道功能怎麼做，但不知道為什麼畫面不夠好看。Impeccable 可以用指令化的方式協助你檢查排版、層級、色彩與互動細節。

4. 想降低 AI 生成感的網站製作者

如果你的網站看起來太像 AI 產物，Impeccable 可以幫你找出常見的 AI 設計套路，讓畫面更有辨識度。

如何安裝 Impeccable？

你可以到 GitHub 下載與查看 Impeccable 專案：

Impeccable GitHub 下載頁

官方建議可以在專案根目錄執行：

npx impeccable skills install

接著在你的 AI Coding 工具中執行：

/impeccable init

如果之後要更新，可以執行：

npx impeccable skills update

官方網站也提供更多說明與範例：

Impeccable 官方網站

使用 Impeccable 的工作流程建議

如果你正在做一個網站或前端產品，可以用以下流程開始：

第一步，先用 AI 產生基本頁面結構。
例如首頁、產品介紹、價格表、登入頁、後台儀表板。

第二步，執行 /impeccable init。
讓 Impeccable 了解你的產品定位、使用者、品牌語氣與設計方向。

第三步，用 /impeccable shape 先整理畫面架構。
這一步可以避免一開始就把版面做得太滿、太亂。

第四步，用 /impeccable critique 檢查設計問題。
讓 AI 幫你指出畫面層級、訊息清楚度與互動細節的問題。

第五步，用 /impeccable polish 做上線前修飾。
這一步可以讓網站更一致、更乾淨，也更接近可交付品質。

第六步，必要時使用 /impeccable audit。
檢查響應式、可及性、效能與技術層面的品質。

對 WordPress 網站製作者有什麼幫助？

雖然 Impeccable 本身比較偏向 AI Coding Agent 與前端開發流程，但對 WordPress 網站製作者也很有參考價值。

如果你使用 WordPress 搭配自訂佈景主題、區塊編輯器、Elementor、Bricks、Breakdance 或自製前端元件，你可以先在本機或開發環境中，用 AI 建立前端區塊，再透過 Impeccable 改善設計品質。

例如：

  • 首頁 Hero 區塊不夠有記憶點
  • 服務介紹區塊太像模板
  • 價格表太普通
  • Call to Action 不夠明確
  • 部落格列表頁缺乏層次
  • 後台管理介面太陽春
  • 品牌網站缺乏高級感

這些都可以透過 Impeccable 的設計指令進行調整，再整合回 WordPress 佈景主題或頁面模板中。

結論：Impeccable 讓 AI 網站設計從「能用」走向「有質感」

AI 讓網站製作變快，但速度不代表品質。真正影響使用者感受的，往往是那些細節：字體層級、留白、對比、色彩、互動節奏、品牌一致性，以及畫面是否有明確的設計意圖。

Impeccable 的重點不是取代設計師，而是讓 AI 更容易理解設計師的語言，也讓開發者可以用更精準的方式指揮 AI 做出不平庸的網站。

如果你正在用 AI 製作網站，卻覺得畫面總是差一點質感，那麼 Impeccable 很值得加入你的前端工作流程。

官方網站：
https://impeccable.style/

GitHub 下載：
https://github.com/pbakaus/impeccable

HeyGen HyperFrames 介紹：用 HTML 寫影片，讓 AI Agent 自動剪輯

雲端現代化：如何將 WordPress 部署至 Cloud Run、Cloud SQL 與 Cloud Storage

by | 3 月 12, 2026 | Docker, google, wordpress

在管理多個 WordPress 專案時，傳統 VM 加架構往往面臨擴展性與維護成本的挑戰。透過 Google Cloud Run (Serverless)、Cloud SQL (代管資料庫) 與 Cloud Storage (雲端儲存) 的組合，我們可以建立一個自動縮放、安全且高效率的網站環境。

一、 架構預覽

  • 計算節點：Google Cloud Run (Docker 容器化運行)。
  • 資料庫：Google Cloud SQL (MySQL 8.0)。
  • 靜態檔案：Google Cloud Storage (GCS)。
  • 流量分配：Google Cloud Load Balancing (HTTPS 負載平衡器)。

二、 準備 Docker 鏡像與環境排除

在打包之前，請務必設定 .dockerignore 以優化鏡像體積並保護敏感資訊 。

my-wp-site/
├── Dockerfile           # 自動化打包腳本
├── wp-config.php        # 修改為讀取環境變數的版本
├── .dockerignore        # 排除不需要打包的檔案 (如 .git, local backups)
└── wp-content/
    ├── plugins/         # 放置您自定義的外掛
    └── themes/          # 放置您自定義的主題

建立 標準化 Dockerfile 範本

# 使用官方 PHP-Apache 映像檔，穩定且相容性高
FROM wordpress:php8.2-apache

# 1. 設定環境變數 (Cloud Run 預設監聽 8080，但官方 WP 鏡像預設是 80)
# 這裡我們讓 Apache 監聽 Cloud Run 指定的 PORT
RUN sed -i 's/Listen 80/Listen ${PORT}/g' /etc/apache2/ports.conf
RUN sed -i 's/:80/:${PORT}/g' /etc/apache2/sites-available/000-default.conf

# 2. 安裝必要的系統套件 (如有需要自訂 PHP 擴展可在這加)
RUN apt-get update && apt-get install -y \
    libpng-dev \
    libjpeg-dev \
    && docker-php-ext-configure gd --with-jpeg \
    && docker-php-ext-install gd

# 3. 複製現有的自定義檔案進入容器
# 建議只複製 plugins 和 themes，核心檔案由官方鏡像提供
COPY ./wp-content/plugins/ /var/www/html/wp-content/plugins/
COPY ./wp-content/themes/ /var/www/html/wp-content/themes/
COPY ./wp-config.php /var/www/html/wp-config.php

# 4. 設定正確的檔案權限 (對 WordPress 運行至關重要)
RUN chown -R www-data:www-data /var/www/html

# 5. 設定預設環境變數 (可在部署時被 gcloud 指令覆蓋)
ENV PORT=8080
ENV DB_HOST=127.0.0.1
ENV DB_USER=root
ENV DB_PASSWORD=password

# 暴露埠號
EXPOSE 8080

1. 建立 .dockerignore

Plaintext

.git
.gitignore
.dockerignore
Dockerfile
*.sql
*.zip
.vscode/
wp-config-sample.php

2. 打包與推送鏡像

PowerShell

# 編譯鏡像
docker build -t asia-east1-docker.pkg.dev/[PROJECT_ID]/wp-repo/[docker_name]:latest .

# 推送到 Artifact Registry
docker push asia-east1-docker.pkg.dev/[PROJECT_ID]/wp-repo/[docker_name]:latest

三、 資料庫遷移與設定

1. 匯入 SQL 腳本

將 .sql 檔案上傳至 Google Cloud Storage (GCS) 後執行匯入 。

注意：請確保 SQL 檔案中不含 CREATE DATABASE 或 USE 語句，以免匯入失敗或指向錯誤的資料庫。

PowerShell

gcloud sql import sql [INSTANCE_NAME] gs://[BUCKET_NAME]/[docker_name].sql --database=[docker_name]_db

2. 設定 wp-config.php 智慧判斷

為了同時支援本地開發與雲端環境，建議在 wp-config.php 加入連線判斷邏輯 ：

PHP

// 偵測是否在 Cloud Run 環境 (透過 Unix Socket 連線)
if (getenv('INSTANCE_CONNECTION_NAME')) {
    define( 'DB_HOST', ':/cloudsql/' . getenv('INSTANCE_CONNECTION_NAME') );
} else {
    define( 'DB_HOST', getenv('DB_HOST') ?: '127.0.0.1' );
}

// 負載平衡器 HTTPS 辨識
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
    $_SERVER['HTTPS'] = 'on';
}

四、 部署至 Cloud Run

部署時需指定 Cloud SQL 連線名稱，這會自動建立加密隧道 。

PowerShell

gcloud run deploy [docker_name] `
  --image asia-east1-docker.pkg.dev/[PROJECT_ID]/wp-repo/[docker_name]:latest `
  --region asia-east1 `
  --allow-unauthenticated `
  --add-cloudsql-instances [PROJECT_ID]:asia-east1:[INSTANCE_NAME] `
  --set-env-vars="INSTANCE_CONNECTION_NAME=[PROJECT_ID]:asia-east1:[INSTANCE_NAME],DB_NAME=[docker_name]_db,DB_USER=root,DB_PASSWORD=[PASSWORD]"

五、 設定負載平衡器 (GCLB) 與自訂網域

為了使用自有的網域（如 blog.rain.tips），建議使用 HTTPS 負載平衡器 。

  1. 建立 Serverless NEG：讓負載平衡器找到 Cloud Run 。
  2. 設定前端 IP：保留一個靜態全域 IP。
  3. Google 管理憑證：在前端設定中新增網域，Google 會自動處理 SSL 簽發與續期 。
  4. DNS 設定：將您的網域 A 紀錄 指向負載平衡器的靜態 IP 。

六、 故障排除 (Troubleshooting)

  • Error establishing a database connection：
    • 檢查 Cloud Run 服務帳戶是否擁有 「Cloud SQL Client」 角色 。
    • 確認 DB_HOST 在雲端環境是否正確指向 :/cloudsql/... 。
  • 503 Service Unavailable：
    • 確認 Cloud Run 服務已設定為 「允許未經驗證的叫用」 。
    • 檢查負載平衡器的憑證是否已變為綠色的 Active 狀態 。
  • IPv6 連線問題：
    • 若使用 Nginx 反向代理遇到 Network is unreachable，請強制 Nginx 優先使用 IPv4 或修改系統 /etc/hosts 。

參考資料

NVIDIA Spark 如何啟用 VNC：使用 Vino 與 RealVNC 遠端桌面完整教學

WordPress 效能翻倍：手把手教你將媒體資源遷移至 Google Cloud Storage (GCS)

by | 3 月 3, 2026 | wordpress

當你的 WordPress 網站發展到多站點規模時，伺服器硬碟空間與流量往往成為瓶頸，我們透過 wp-content/uploads 遷移到 Google Cloud Storage (GCS) 並搭配 Cloud CDN，不僅能節省主機成本，還能大幅提升全球存取速度。

一、 為什麼選擇 GCS + CDN 而非 Filestore？

在 GCP 上有兩種主流方案：

  1. Filestore (NFS)：適合需要完全同步 wp-content（含外掛與主題）的架構，但成本較高（1TB 起跳約 $160/月）。
  2. GCS + Cloud CDN：按量計費，且能透過邊緣節點加速圖片，是多數 WordPress 站長的性價比首選。

二、 核心架構建立：GCS 與權限設定

1. 建立儲存桶與開放權限

在 GCS 建立儲存桶後，務必處理 CORS 與公開存取問題，否則圖片會出現 AccessDenied。

  • 公開讀取：在儲存桶權限中加入 allUsers 為「儲存空間物件檢視者」。
  • 解決字體 CORS 報錯：若使用 Elementor，必須透過 gcloud 指令設定 CORS 規則，允許您的網域存取字體檔 (.woff2)。

2. 服務帳戶 (IAM) 設定

為您的 WordPress 建立專屬服務帳戶，並指派 「儲存空間管理員 (Storage Admin)」 角色。這能確保 WP-Stateless 等外掛有權限執行同步與驗證儲存桶狀態。

三、 WordPress 插件配置：WP-Stateless

為了讓多站點井然有序，建議在 WP-Stateless 設定中自定義路徑：

  • Mode：選擇 Stateless（上傳後刪除本地檔案，釋放 VM 空間）。
  • Folder：手動輸入站點名稱，例如 demo-1/%date_year/date_month%。
  • Service Account JSON：貼入從 GCP 下載的 JSON 金鑰以完成對接。

四、 Nginx 層級的自動化重定向

為了確保舊文章不破圖，且能自動導向 GCS，我們在 Nginx 加入了變數化的重定向規則。

最佳實踐：排除 Elementor 以避開錯誤

Elementor 的 CSS 與字體檔案若放在 GCS 容易產生 CORS 阻擋或 404，建議將其留在本地 SSD：

Nginx

# 1. 優先處理 Elementor (留在本地)
location ^~ /xxx/wp-content/uploads/elementor/ {
    include /etc/nginx/sites-available/gcp_web_pool.conf;
}

# 2. 其他媒體檔案重定向至 GCS
location ~* ^/xxx/wp-content/uploads/(.*)$ {
    add_header 'Access-Control-Allow-Origin' 'https://yourdomain.com' always;
    return 301 https://storage.googleapis.com/your-bucket/sites-name/$1;
}

注意：將重定向規則放在單獨的 location 塊中，可以有效避免嵌套導致的 504 Gateway Timeout。

五、 舊檔案遷移與同步

對於已經存在 VM 上的數 GB 舊圖片，使用 gcloud storage rsync 是最快的方法：

Bash

# 同步指令 (遞迴處理所有子目錄)
gcloud storage rsync /var/www/html/wp-content/uploads gs://your-bucket/demo-1 -r

傳輸完成後，別忘了使用 WP-CLI 批次取代資料庫中的網址：

Bash

# 加入 --skip-plugins 避免 cron 相關的 PHP Fatal error
wp search-replace 'https://old-url.com/uploads' 'https://storage.googleapis.com/bucket/demo-1' --all-tables --skip-plugins --skip-themes

WordPress 多站點環境設計的同步教學：

1. 基本同步指令

如果您要將 VM 上的 uploads 資料夾同步到 GCS，請執行：

Bash

gcloud storage rsync /var/www/html/wp-content/uploads gs://[您的儲存桶名稱]/[站點目錄] --recursive
  • 參數說明：
    • /var/www/...：來源路徑（本地 VM）。
    • gs://...：目標路徑（GCS 儲存桶）。
    • --recursive (或 -r)：遞迴處理所有子目錄。

2. 進階同步技巧

A. 鏡像同步（刪除 GCS 上多餘的檔案）

如果您希望 GCS 的內容與本地完全一致（本地刪除，雲端也跟著刪除），請加上 --delete-unmatched-destination-objects：

Bash

gcloud storage rsync [來源] [目標] -r --delete-unmatched-destination-objects

警告：此操作不可逆，請確認目標路徑無誤再執行。

B. 僅同步特定類型的檔案

如果您只想同步圖片，排除備份檔（如 .zip 或 .sql）：

Bash

gcloud storage rsync [來源] [目標] -r --include-regex=".*\\.(jpg|jpeg|png|gif)$"

C. 大量檔案平行加速

當您有數萬張圖片需要同步時，使用多執行緒可以大幅縮短時間：

Bash

gcloud storage rsync [來源] [目標] -r --parallel

3. 多站點組織化同步建議

既然您有多個站點（如 demo-1, blaupunkt），建議分別執行同步以保持目錄整潔：

  • 同步站點 A： gcloud storage rsync /mnt/webs/demo-1/wp-content/uploads gs://ai-websites-uploads/demo-1 -r
  • 同步站點 B： gcloud storage rsync /mnt/webs/blaupunkt/wp-content/uploads gs://ai-websites-uploads/blaupunkt -r

4. 權限排錯

如果您在同步時遇到「Permission Denied」，請檢查以下兩點：

  1. IAM 角色：確保服務帳戶擁有 「儲存空間物件管理員 (Storage Object Admin)」 角色。
  2. VM 存取範圍：確認 VM 的 Cloud API access scopes 已設定為「Allow full access to all Cloud APIs」。

下一步驗證

同步完成後，您可以執行以下指令查看 GCS 上的檔案數量，確保與本地一致：

Bash

gcloud storage ls -r gs://[您的儲存桶]/[站點目錄] | wc -l

七、 常見疑難排解 (FAQ)

  • Q: 出現 403 Forbidden？ A: 檢查 IAM 角色是否為 Storage Admin，並確認儲存桶是否已加入 allUsers。
  • Q: Nginx 出現 504 Timeout？ A: 檢查是否有嵌套迴圈。建議將 301 return 移出 include 所在的區塊。
  • Q: 字體無法載入？ A: 這是 CORS 問題。請檢查 GCS 儲存桶是否已套用包含您的網域的 JSON CORS 設定檔。

如何檢查 wordpress 網站被誰存取和攻擊

by | 12 月 31, 2025 | wordpress

目前正在處理的 request

編輯 php-fpm pool（www）






啟用下面的這幾行










重啟服務










檢查服務





curl 127.0.0.1/fpm-status?full





會看到的資訊










慢查詢-外掛定位





查詢





tail -f /var/log/php-fpm/slow.log

# 或是
tail -n 50 /var/log/php-fpm/slow.log





針對慢查詢，精準的找出問題





慢站點 Top：





sudo awk -F'= ' '/^script_filename/ {print $2}' /var/log/www-slow.log \
| awk -F'/' '{print $4}' | sort | uniq -c | sort -nr | head -20






入口 Top：





sudo awk -F'= ' '/^script_filename/ {print $2}' /var/log/www-slow.log \
| awk -F'/' '{print $NF}' | sort | uniq -c | sort -nr | head -20






外掛 Top：










多站的正確架構










每站一個 pool：










Nginx 的對應：











				
					

			
					


				
															
在Nginx中支援 WordPress 的 Webp,Avif 圖檔

					
					
 by  | 12 月 19, 2024 | Nginx, SERVER, wordpress


大前提你要先安裝有支援 webp, avif 的外掛，例如EWWW, Convert Media等等





在 Nginx 配置中加 map 指令：





    

  • 在 Nginx 的主配置文件，通常在 /etc/nginx/nginx.conf。
    • 




  • 在 http {} 内、server {} 之前，加入以下内容：
    • 






map $http_accept $avif_suffix {
    default "";
    "~*avif" ".avif";
}
map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}





    

  • 配置客户端的 Accept ，來定義 $avif_suffix 和 $webp_suffix 變量，確認是否支持 AVIF 或 WebP 格式。
    • 






Nginx 讀取 AVIF 和 WebP 的 MIME Type：





找到 /etc/nginx/ 的 mime.types 





image/avif  avif;
image/webp  webp;





在站點配置中設定重導向：





    

  • 找到 /etc/nginx/sites-available/yourdomain。
    • 




  • 在 server {} ，加入以下内容：
    • 






location ~* ^/wp-content/.+\.(jpe?g|png|gif)$ {
    add_header Vary Accept;
    add_header Cache-Control "private";
    expires 365d;
    try_files $uri$avif_suffix $uri$webp_suffix $uri =404;
}





作用是：





    

  • 匹配所有請求的 .jpg、.jpeg、.png 和 .gif 文件。
    • 




  •  Vary: Accept ，告訴缓存系統按照 Accept 來區分不同的響應。
    • 




  • 缓存控制和過期時間。
    • 




  • 使用 try_files 指令，會先試提供的 .avif 文件，如果不存在，則提供 .webp 文件，若仍不存在，則提供原始文件。
    • 






測試並且重新加載 Nginx 配置：





sudo nginx -t
sudo systemctl reload nginx





這些配置假設您的 .avif 和 .webp 文件與原始圖片文件位於相同的目錄，並具有相同的文件名，只是副檔名不同（例如，image.jpg 對應 image.jpg.avif 和 image.jpg.webp）。





此外，請確保您的伺服器上已經存在對應的 .avif 和 .webp 文件，否則 Nginx 將返回 404 錯誤。





有關更多詳細資訊，您可以參考以下資源：







Nginx 啟用 Brotli 壓縮模組







網站圖片無縫兼容 WebP/AVIF





在 Nginx 上提供 WebP 和 AVIF 圖片





圖片優化新選擇！WebP、AVIF 如何提升網站速度