WP Manifestindependent plugin directory
manifest / media / azure-blob-media-offload

Azure Blob Media Offload (Reliable Queue)

將 WordPress 媒體檔案可靠地上傳到 Azure Blob Storage，支援多尺寸圖片、可選 WebP、可選 CDN / 自訂網域、前台 URL 重寫與完整成功後刪除本機檔案。

by Hans · github.com/g787543/azure-blob-media-offload

★ 1stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/g787543/azure-blob-media-offload/archive/refs/heads/main.zip
Readme github.com/g787543/azure-blob-media-offload ↗

Azure Blob Media Offload for WordPress

將 WordPress 媒體檔案自動上傳至 Azure Blob Storage，並由 Azure 提供圖片與檔案服務，減少主機負擔並提升載入速度。

此 plugin 支援：

  • 自動上傳圖片至 Azure Blob
  • WordPress 多尺寸圖片（srcset）
  • WebP 自動生成
  • 非圖片媒體（MP4 / MP3 / PDF）
  • 可選 Azure CDN / 自訂網域
  • 前台自動改寫 URL
  • 媒體庫正常顯示
  • 中文設定頁

功能特色

1. 自動上傳 Azure Blob

WordPress 上傳媒體時：

上傳 → 本機暫存
     → WordPress 產生多尺寸
     → Plugin 上傳 Azure
     → （可選）刪除本機

Azure 會儲存例如：

image.jpg
image-300x200.jpg
image-768x512.jpg
image-1024x683.jpg

2. WebP 自動生成

當啟用 WebP：

image.jpg
image.webp
image-300x200.webp
image-768x512.webp

前台可搭配 <picture> 輸出，讓瀏覽器優先使用 WebP。

3. Responsive Images

WordPress 原生 srcset 會被保留：

<img
  src="image-1024.jpg"
  srcset="
    image-300.jpg 300w,
    image-768.jpg 768w,
    image-1024.jpg 1024w
  "
>

瀏覽器會自動選擇適合尺寸。

支援媒體格式

類型 Azure Offload 多尺寸 WebP
JPG / JPEG ✔ ✔ ✔
PNG ✔ ✔ ✔
GIF ✔ ✖ ✖
WebP ✔ ✔ -
MP4 ✔ ✖ ✖
MP3 ✔ ✖ ✖
PDF ✔ ✖ ✖

安裝方式

  1. 將 plugin 放入：
wp-content/plugins/azure_blob_media_offload/

  1. 於 WordPress 後台啟用 plugin。

  2. 前往：

設定 → Azure Blob Media
  1. 填入 Azure 設定。

Azure 設定

需要以下資訊：

Storage Account 名稱
Storage Account Key
Container 名稱

例如：

Storage Account: mystorage
Container: uploads

Azure URL 會是：

https://mystorage.blob.core.windows.net/uploads

Azure CORS 設定

Blob Storage 必須允許網站讀取圖片。

建議設定：

Allowed origins

http://localhost:8881
http://127.0.0.1:8881
https://yourdomain.com
https://www.yourdomain.com

Allowed methods

GET
HEAD
OPTIONS

Allowed headers

*

Exposed headers

*

Max age

3600

CDN / 自訂網域（可選）

可以使用 Azure CDN 或自訂網域。

例如：

cdn.yourdomain.com

設定後圖片 URL 會變成：

https://cdn.yourdomain.com/2026/04/image.jpg

而不是：

https://storage.blob.core.windows.net/...

刪除本機檔案（可選）

啟用後：

上傳 Azure 成功
→ 自動刪除本機 uploads

適合：

  • 小容量 VPS
  • 多台 Web Server

建議先測試再啟用。

媒體庫顯示

媒體庫仍會正常顯示縮圖。

若媒體庫顯示灰框，通常是 Azure CORS 未設定完整。

架構

WordPress Upload
      │
      ▼
生成圖片尺寸
      │
      ▼
Azure Blob Upload
      │
      ▼
Rewrite URL
      │
      ▼
Frontend / Media Library

效能優勢

使用 Azure Blob + WebP + CDN：

項目 改善
圖片載入速度 ↑
主機 I/O ↓
儲存空間 ↓
頻寬使用 ↓

常見問題

1. 媒體庫圖片顯示灰色

通常是 Azure CORS 未設定。

2. 圖片可以前台顯示但媒體庫不行

常見原因是後台圖片元素帶有：

crossorigin="anonymous"

此時 Azure Blob 需要正確回傳 CORS header。

3. WebP 沒生效

請確認以下選項已啟用：

產生 WebP
前台使用 <picture> 輸出 WebP

建議設定

推薦組合：

WebP：開啟
刪除本機：關閉
CDN：開啟

如果你的站點已穩定運作，再考慮開啟刪除本機。

版本資訊

v1.0.0

  • Azure Blob Offload
  • WebP 支援
  • 多尺寸圖片
  • CDN / 自訂網域支援
  • Media Library 修正
  • 中文設定頁

License

MIT License