{"id":417185,"date":"2025-01-06T08:00:00","date_gmt":"2025-01-06T08:00:00","guid":{"rendered":"https:\/\/www.weixiaoduo.com\/plugins\/edge-images\/"},"modified":"2025-06-29T18:56:00","modified_gmt":"2025-06-29T18:56:00","slug":"edge-images","status":"publish","type":"post","link":"https:\/\/www.weixiaoduo.com\/plugins\/edge-images\/","title":{"rendered":"Edge Images"},"content":{"rendered":"<p>Edge Images automatically uses your edge transformation service (e.g., Cloudflare, Accelerated Domains, Imgix, etc.) to apply performance optimizations to <code><img><\/code> markup.<\/p>\n<p>\u26a0\ufe0f <strong>Important<\/strong>: This plugin requires a supported edge provider with image transformation features enabled (e.g., Cloudflare Pro, BunnyCDN, etc). See the Requirements section for details.<\/p>\n<h4>\ud83d\ude80 Why should I use Edge Images?<\/h4>\n<ul>\n<li><strong>Instant Performance Boost<\/strong>: Automatically optimize and serve images in modern formats (WebP\/AVIF) through your existing CDN<\/li>\n<li><strong>Zero Configuration<\/strong>: Works out of the box with your existing images and themes<\/li>\n<li><strong>No Local Processing<\/strong>: All transformations happen at the edge \u2013 no server load or storage overhead<\/li>\n<li><strong>Perfectly Sized Images<\/strong>: Automatically generates the exact image dimensions needed for every device and viewport<\/li>\n<li><strong>Cost Effective<\/strong>: No need for expensive image optimization services or additional storage<\/li>\n<\/ul>\n<h4>\ud83c\udfaf Perfect For<\/h4>\n<ul>\n<li>Sites with lots of images that need optimization<\/li>\n<li>Performance-focused developers and site owners<\/li>\n<li>Anyone using Cloudflare, BunnyCDN, or similar services<\/li>\n<li>Sites that want modern image formats without the complexity<\/li>\n<li>Developers tired of managing multiple image sizes<\/li>\n<\/ul>\n<h4>\ud83d\udca1 How It Works<\/h4>\n<p>WordPress typically creates multiple copies of each uploaded image in different sizes. This approach is inefficient and often results in:<\/p>\n<ul>\n<li>Images that are too large or small for their display size<\/li>\n<li>Unnecessary storage usage<\/li>\n<li>Missing sizes for modern responsive designs<\/li>\n<li>Lack of modern format support (WebP\/AVIF)<\/li>\n<\/ul>\n<p>Edge Images solves these problems by:<\/p>\n<ol>\n<li>Intercepting image requests<\/li>\n<li>Determining the optimal size and format needed<\/li>\n<li>Using your CDN to transform the image on-demand<\/li>\n<li>Caching the result for future requests<\/li>\n<\/ol>\n<h4>\u26a1\ufe0f Features<\/h4>\n<p><strong>Core Features<\/strong><\/p>\n<ul>\n<li>Automatic WebP\/AVIF conversion<\/li>\n<li>Intelligent responsive image handling<\/li>\n<li>Smart <code>srcset<\/code> generation<\/li>\n<li>Automatic image optimization<\/li>\n<li>Optional <code><picture><\/code> element wrapping<\/li>\n<li>Zero local processing<\/li>\n<li>Maintains original images<\/li>\n<\/ul>\n<p><strong>Advanced Features<\/strong><\/p>\n<ul>\n<li>Fine-grained transformation control<\/li>\n<li>Multiple CDN provider support<\/li>\n<li>Developer-friendly filters<\/li>\n<li>Yoast SEO & Rank Math integrations<\/li>\n<li>Bricks integration<\/li>\n<li>Gutenberg compatibility<\/li>\n<\/ul>\n<h4>\ud83d\udd0c Supported Providers<\/h4>\n<ul>\n<li><strong>Cloudflare<\/strong> (Pro plan or higher)<\/li>\n<li><strong>Accelerated Domains<\/strong><\/li>\n<li><strong>BunnyCDN<\/strong><\/li>\n<li><strong>Imgix<\/strong><\/li>\n<\/ul>\n<h4>\ud83d\udee0\ufe0f Technical Example<\/h4>\n<p><strong>Your Code<\/strong><\/p>\n<pre><code>echo wp_get_attachment_image(1, [640,400], false, ['fit' => 'contain']);\n<\/code><\/pre>\n<p><strong>What WordPress Usually Outputs<\/strong><\/p>\n<pre><code><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"400\" \n     src=\"\/uploads\/2024\/11\/1.jpg\" \n     class=\"attachment-640x400 size-640x400 wp-image-123\" \n     srcset=\"\/uploads\/2024\/11\/1.jpg 400w, \/uploads\/2024\/11\/1-285x300.jpg 285w\" \n     sizes=\"auto, (max-width: 640px) 100vw, 640px\">\n<\/code><\/pre>\n<p>That\u2019s multiple different images files, none of which are the right size!<\/p>\n<p><strong>What Edge Images Outputs<\/strong><\/p>\n<pre><code><picture class=\"edge-images-container\" style=\"--max-width: 640px;\">\n  <img loading=\"lazy\" decoding=\"async\" \n       class=\"attachment-1140x600 size-640x400 wp-image-123 edge-images-processed\"\n       width=\"640\" height=\"400\" \n       src=\"\/cdn-cgi\/image\/f=auto,fit=contain,w=640,h=400\/uploads\/2024\/11\/1.jpg\" \n       srcset=\"\/cdn-cgi\/image\/f=auto,w=320,h=188\/uploads\/2024\/11\/1.jpg 320w,\n               \/cdn-cgi\/image\/f=auto,w=640,h=400\/uploads\/2024\/11\/1.jpg 640w,\n               \/cdn-cgi\/image\/f=auto,w=1280,h=800\/uploads\/2024\/11\/1.jpg 1280w\"\n       sizes=\"auto, (max-width: 640px) 100vw, 640px\">\n<\/picture>\n<\/code><\/pre>\n<p>That\u2019s 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.<\/p>\n<h4>\ud83c\udfa8 Customization<\/h4>\n<p><strong>Transform Parameters<\/strong><br \/>\nControl every aspect of image transformation with attributes like:<br \/>\n* <code>width<\/code>\/<code>height<\/code>: Exact dimensions<br \/>\n* <code>fit<\/code>: Resizing behavior (contain, cover, crop)<br \/>\n* <code>quality<\/code>: Compression level<br \/>\n* <code>format<\/code>: Output format (auto, webp, avif)<\/p>\n<p><strong>Filtering<\/strong><br \/>\nDisable transformations globally or selectively:<\/p>\n<pre><code>\/\/ Disable all transformations\nadd_filter('edge_images_disable', '__return_true');\n\n\/\/ Disable for specific images\nadd_filter('edge_images_disable_transform', function($should_disable, $html) {\n    if (strpos($html, 'example.jpg') !== false) {\n        return true;\n    }\n    return $should_disable;\n}, 10, 2);\n\n\/\/ Override max width for constrained content\nadd_filter('edge_images_max_width', function($max_width) {\n    \/\/ Example: Use a different max width for single posts\n    if (is_single()) {\n        return 800;\n    }\n    return $max_width;\n});\n\n\/\/ Customize srcset width multipliers\nadd_filter('edge_images_width_multipliers', function($multipliers) {\n    \/\/ Add more granular steps between sizes\n    return [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];\n});\n<\/code><\/pre>\n<h4>\ud83d\udd27 Requirements<\/h4>\n<p><strong>Essential<\/strong><\/p>\n<ul>\n<li>A supported edge provider with image transformation features enabled:\n<ul>\n<li>Cloudflare Pro plan or higher with Image Resizing enabled<\/li>\n<li>Accelerated Domains with Image Resizing enabled<\/li>\n<li>BunnyCDN with Image Processing enabled<\/li>\n<li>Imgix with a configured source<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Technical<\/strong><\/p>\n<ul>\n<li>PHP 7.4 or higher<\/li>\n<li>WordPress 5.9 or higher<\/li>\n<\/ul>\n<h4>\u2705 Getting Started<\/h4>\n<ol>\n<li>Install and activate the plugin<\/li>\n<li>Go to Settings > Edge Images<\/li>\n<li>Select your CDN provider<\/li>\n<li>That\u2019s it! Your images will now be automatically optimized<\/li>\n<\/ol>\n<h4>\ud83e\udd1d Integrations<\/h4>\n<p><strong>Yoast SEO<\/strong><br \/>\nAutomatically optimizes images in:<\/p>\n<ul>\n<li>Meta tags (og:image, etc.)<\/li>\n<li>Schema.org output<\/li>\n<li>XML sitemaps<\/li>\n<\/ul>\n<h4>\ud83d\udd12 Privacy<\/h4>\n<p>Edge Images processes images through third-party edge providers. Here\u2019s what you need to know about privacy:<\/p>\n<p><strong>Data Processing<\/strong><\/p>\n<ul>\n<li>Images are processed through your chosen edge provider (Cloudflare, Accelerated Domains, etc.)<\/li>\n<li>No personal data is collected or stored by the plugin itself<\/li>\n<li>Image URLs are passed to the edge provider for transformation<\/li>\n<li>Original images remain on your server; only public URLs are processed<\/li>\n<\/ul>\n<p><strong>Edge Provider Privacy<\/strong><br \/>\nDifferent providers have different privacy implications:<\/p>\n<ul>\n<li>Cloudflare: Images are processed according to <a href=\"https:\/\/www.cloudflare.com\/privacypolicy\/\" rel=\"nofollow ugc\">Cloudflare\u2019s Privacy Policy<\/a><\/li>\n<li>Accelerated Domains: Images are processed according to <a href=\"https:\/\/accelerateddomains.com\/privacy\/\" rel=\"nofollow ugc\">Accelerated Domains\u2019 Privacy Policy<\/a><\/li>\n<li>BunnyCDN: Images are processed according to <a href=\"https:\/\/bunny.net\/privacy\/\" rel=\"nofollow ugc\">BunnyCDN\u2019s Privacy Policy<\/a><\/li>\n<\/ul>\n<p><strong>Data Storage<\/strong><\/p>\n<ul>\n<li>The plugin stores your selected settings in your WordPress database<\/li>\n<li>No user data is collected or stored<\/li>\n<li>No analytics or tracking is performed<\/li>\n<li>Cache files may be created in your uploads directory for optimization<\/li>\n<\/ul>\n<p><strong>GDPR Compliance<\/strong><\/p>\n<ul>\n<li>The plugin is GDPR-compliant as it does not collect, store, or process personal data<\/li>\n<li>Users should review their chosen edge provider\u2019s privacy policy and data processing terms<\/li>\n<li>Site owners should update their privacy policy to reflect their use of third-party image processing services<\/li>\n<\/ul>\n<h3>Development<\/h3>\n<ul>\n<li><a href=\"https:\/\/github.com\/jonoalderson\/edge-images\" rel=\"nofollow ugc\">GitHub Repository<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/jonoalderson\/edge-images\/issues\" rel=\"nofollow ugc\">Report Issues<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Turbocharge your WordPress images by using an edge provider (like Cloudflare or Accelerated Domains) and optimizing your HTML markup.<\/p>\n","protected":false},"author":65,"featured_media":417186,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"Edge Images - \u8587\u6653\u6735\u63d2\u4ef6\u76ee\u5f55","description":"Turbocharge your WordPress images by using an edge provider (like Cloudflare or Accelerated Domains) and optimizing your HTML markup."},"footnotes":""},"categories":[1],"tags":[514,5475,378,517,64],"class_list":["post-417185","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-cdn","tag-cloudflare","tag-images","tag-optimization","tag-performance"],"_links":{"self":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/417185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/comments?post=417185"}],"version-history":[{"count":0,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/417185\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media\/417186"}],"wp:attachment":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media?parent=417185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/categories?post=417185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/tags?post=417185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}