[WordPress] 外掛分享： Edge Images

WordPress 外掛 Edge Images 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Edge Images」是 2025-01-05 上架。
  • 目前有 20 個安裝啟用數。
  • 上一次更新是 2025-04-23，距離現在已有 11 天。
  • 外掛最低要求 WordPress 5.6 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
  • 有 5 人給過評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

jonoaldersonwp |

外掛標籤

cdn | images | cloudflare | performance | optimization |

內容簡介

### 總結:
Edge Images 外掛能夠自動使用您的邊緣轉換服務（例如 Cloudflare、Accelerated Domains、Imgix 等）來對 <img> 標記應用性能優化。

### 問題與答案:

1. 什麼是 Edge Images 外掛的重點？
- Edge Images 外掛需要支援影像轉換功能的服務提供者（例如 Cloudflare Pro、BunnyCDN 等）。

2. 使用 Edge Images 有哪些好處？
- 自動優化和提供現代格式的圖像（WebP/AVIF）通過現有的 CDN 來提高性能。
- 可以直接使用現有的圖像和主題，零配置。
- 所有轉換在邊緣進行，沒有伺服器負載或存儲開銷。
- 為每個設備和視口自動生成所需的準確圖像尺寸。
- 經濟實惠，無需昂貴的圖像優化服務或額外的存儲空間。

3. Edge Images 適用於哪些情況？
- 需要優化許多圖像的網站。
- 注重性能的開發者和網站擁有者。
- 使用 Cloudflare、BunnyCDN 或類似服務的任何人。
- 希望使用現代圖像格式而又不要複雜性的網站。
- 不想管理多個圖像尺寸的開發者。

以上是使用 Edge Images 外掛的總結和相關問題與答案。

原文外掛簡介

Edge Images automatically uses your edge transformation service (e.g., Cloudflare, Accelerated Domains, Imgix, etc.) to apply performance optimizations to markup.
⚠️ Important: This plugin requires a supported edge provider with image transformation features enabled (e.g., Cloudflare Pro, BunnyCDN, etc). See the Requirements section for details.
🚀 Why should I use Edge Images?

Instant Performance Boost: Automatically optimize and serve images in modern formats (WebP/AVIF) through your existing CDN
Zero Configuration: Works out of the box with your existing images and themes
No Local Processing: All transformations happen at the edge – no server load or storage overhead
Perfectly Sized Images: Automatically generates the exact image dimensions needed for every device and viewport
Cost Effective: No need for expensive image optimization services or additional storage

🎯 Perfect For

Sites with lots of images that need optimization
Performance-focused developers and site owners
Anyone using Cloudflare, BunnyCDN, or similar services
Sites that want modern image formats without the complexity
Developers tired of managing multiple image sizes

💡 How It Works
WordPress typically creates multiple copies of each uploaded image in different sizes. This approach is inefficient and often results in:

Images that are too large or small for their display size
Unnecessary storage usage
Missing sizes for modern responsive designs
Lack of modern format support (WebP/AVIF)

Edge Images solves these problems by:

Intercepting image requests
Determining the optimal size and format needed
Using your CDN to transform the image on-demand
Caching the result for future requests

⚡️ Features
Core Features

Automatic WebP/AVIF conversion
Intelligent responsive image handling
Smart srcset generation
Automatic image optimization
Optional element wrapping
Zero local processing
Maintains original images

Advanced Features

Fine-grained transformation control
Multiple CDN provider support
Developer-friendly filters
Yoast SEO & Rank Math integrations
Bricks integration
Gutenberg compatibility

🔌 Supported Providers

Cloudflare (Pro plan or higher)
Accelerated Domains
BunnyCDN
Imgix

🛠️ Technical Example
Your Code
echo wp_get_attachment_image(1, [640,400], false, ['fit' => 'contain']);

What WordPress Usually Outputs

That’s multiple different images files, none of which are the right size!
What Edge Images Outputs

That’s a range of perfectly sized options for different devices and viewports, automatically optimized images in modern formats, served from your CDN, futureproofed for supporting next-generation capabilities, and with no storage overheads.
🎨 Customization
Transform Parameters
Control every aspect of image transformation with attributes like:
* width/height: Exact dimensions
* fit: Resizing behavior (contain, cover, crop)
* quality: Compression level
* format: Output format (auto, webp, avif)
Filtering
Disable transformations globally or selectively:
// Disable all transformations
add_filter('edge_images_disable', '__return_true');

// Disable for specific images
add_filter('edge_images_disable_transform', function($should_disable, $html) {
if (strpos($html, 'example.jpg') !== false) {
return true;
}
return $should_disable;
}, 10, 2);

// Override max width for constrained content
add_filter('edge_images_max_width', function($max_width) {
// Example: Use a different max width for single posts
if (is_single()) {
return 800;
}
return $max_width;
});

// Customize srcset width multipliers
add_filter('edge_images_width_multipliers', function($multipliers) {
// Add more granular steps between sizes
return [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
});

🔧 Requirements
Essential

A supported edge provider with image transformation features enabled:

Cloudflare Pro plan or higher with Image Resizing enabled
Accelerated Domains with Image Resizing enabled
BunnyCDN with Image Processing enabled
Imgix with a configured source

Technical

PHP 7.4 or higher
WordPress 5.9 or higher

✅ Getting Started

Install and activate the plugin
Go to Settings > Edge Images
Select your CDN provider
That’s it! Your images will now be automatically optimized

🤝 Integrations
Yoast SEO
Automatically optimizes images in:

Meta tags (og:image, etc.)
Schema.org output
XML sitemaps

🔒 Privacy
Edge Images processes images through third-party edge providers. Here’s what you need to know about privacy:
Data Processing

Images are processed through your chosen edge provider (Cloudflare, Accelerated Domains, etc.)
No personal data is collected or stored by the plugin itself
Image URLs are passed to the edge provider for transformation
Original images remain on your server; only public URLs are processed

Edge Provider Privacy
Different providers have different privacy implications:

Cloudflare: Images are processed according to Cloudflare’s Privacy Policy
Accelerated Domains: Images are processed according to Accelerated Domains’ Privacy Policy
BunnyCDN: Images are processed according to BunnyCDN’s Privacy Policy

Data Storage

The plugin stores your selected settings in your WordPress database
No user data is collected or stored
No analytics or tracking is performed
Cache files may be created in your uploads directory for optimization

GDPR Compliance

The plugin is GDPR-compliant as it does not collect, store, or process personal data
Users should review their chosen edge provider’s privacy policy and data processing terms
Site owners should update their privacy policy to reflect their use of third-party image processing services

Development

GitHub Repository
Report Issues

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Edge Images」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

5.4 | 5.5 | 5.2.1 | 5.2.2 | 5.2.3 | 5.2.4 | 5.2.5 | 5.2.6 | 5.2.7 | 5.2.8 | 5.2.9 | 5.3.0 | 5.3.1 | 5.3.2 | 5.3.3 | 5.3.4 | 5.3.5 | 5.5.1 | 5.5.2 | trunk | 5.2.10 | 5.2.11 | 5.2.12 | 5.2.13 | 5.2.14 | 5.2.15 | 5.2.17 | 5.2.18 | 5.2.19 |

延伸相關外掛（你可能也想知道）

  • LiteSpeed Cache 》LiteSpeed Cache for WordPress（LSCWP）是一種全方位的網站加速外掛，包括獨家的伺服器層快取和一系列的優化功能。, LSCWP 支援 WordPress Multisite 及大多...。
  • Jetpack – WP Security, Backup, Speed, & Growth 》search engines, and grow your traffic with Jetpack. It’s the ultimate toolkit for WordPress professionals and beginners alike., , Customize and des...。
  • Image Optimizer – Optimize Images and Convert to WebP or AVIF 》外掛總結：, , - Image Optimizer 是一個易於使用的 WordPress 外掛，透過壓縮和調整大小的技術來減少圖像大小，同時保留最高的圖像品質。, - Image Optimize...。
  • WP Super Cache 》本外掛可以從您的動態 WordPress 部落格生成靜態 HTML 檔案。在產生 HTML 檔案後，您的網頁伺服器會傳送該檔案，而不是處理比較沉重、耗費更多資源的 WordPre...。
  • WP Fastest Cache 》han PNG or JPEG, which means faster downloads and less data consumption for your visitors, Database Cleanup – Detect and delete unnecessary d...。
  • ManageWP Worker 》, Want to clone or migrate your WordPress website to a new host or domain? No problem! With ManageWP, you can easily clone or migrate your website ...。
  • W3 Total Cache 》W3 Total Cache (W3TC) 透過整合內容傳遞網絡 (CDN) 和最新最佳實踐等功能，提高網站性能、減少加載時間，增進 SEO、核心 Web 主要指標和整體用戶體驗。W3TC ...。
  • Speed Optimizer – The All-In-One Performance-Boosting Plugin 》SiteGround Optimizer 插件是由 SiteGround 開發的，可以大幅提高任何托管環境下的 WordPress 網站性能。, 最初設計用於 SiteGround 的服務器，現在已經有近 ...。
  • Autoptimize 》Autoptimize 能夠輕鬆優化您的網站。它可以整合、縮小和快取腳本和樣式表，在默認情況下向頁面 head 中注入 CSS，但也可以內嵌關鍵 CSS 並延遲整合的完整 CSS...。
  • AMP 》「Page Experience」（PX）是一組排名訊號，包括「核心網頁素質」（Core Web Vitals，CWV），用來測量使用者與網頁互動的使用體驗。AMP 是一個強大的工具，能...。
  • WebP Express 》ch means less bandwidth usage and faster page load times., Easy to use - with little effort, WordPress site admins can have their site serving auto...。
  • Breeze – WordPress Cache Plugin 》Breeze是由Cloudways團隊開發的一款免費、簡單（卻功能強大）且使用者友好的WordPress快取外掛。它提供不同層級的WordPress效能優化選項，在WordPress、搭配W...。
  • Jetpack Boost – Website Speed, Performance and Critical CSS 》使用 Jetpack Boost 優化網頁性能加速你的 WordPress 網站。輕鬆啟用一鍵優化，提升核心 Web 重要指標。, 你是否知道，更快的網站可以：, , 在 Google 搜尋排...。
  • Custom Fonts – Host Your Fonts Locally 》此外掛能協助您輕鬆地在 WordPress 網站中嵌入自定義字型檔案 (woff2、woff、ttf、svg、eot、otf)。, 目前能與以下主題和外掛一起使用：, , Astra 主題, Beav...。
  • Redis Object Cache 》一個由 Redis 提供支援的持久化物件快取後端。支援 Predis、PhpRedis (PECL)、Relay、複寫、哨兵、叢集化和 WP-CLI。, 若要調整連線參數、前綴的快取鍵或設定...。

文章
Filter
Apply Filters
Close
Mastodon