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

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/g787543/azure-blob-media-offload/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
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