nx6 / cloudflare
Magento 2 module that offloads product and CMS image resizing, compression and reformatting to Cloudflare Image Resizing, and adds responsive mobile srcsets to the product gallery.
Maintainers
Package info
github.com/tinchodev/magento2-cloudflare-image-offload
Type:magento2-module
pkg:composer/nx6/cloudflare
Requires
- php: ^8.3
- magento/framework: >=103.0
- magento/module-catalog: >=104.0
- magento/module-config: >=101.2
- magento/module-configurable-product: >=100.4
- magento/module-media-storage: >=100.4
- magento/module-store: >=101.1
- magento/module-widget: >=101.3
README
Offloads Magento 2 product and CMS image processing to
Cloudflare Image Resizing,
rewriting image URLs so Cloudflare resizes, compresses and reformats them on the
fly instead of Magento's PHP image processor. It also adds responsive mobile
srcsets to the product gallery on the PDP and PLP.
| Package | nx6/cloudflare |
| Module | Nx6_CloudFlare |
| Version | 0.1.0 |
Requirements
- Magento 2.4.x (Open Source / Commerce), PHP 8.3+
- A Cloudflare zone in front of the store with Image Resizing enabled (Cloudflare dashboard → Speed → Optimization → Image Resizing)
Installation
composer require nx6/cloudflare
bin/magento module:enable Nx6_CloudFlare
bin/magento setup:upgrade
bin/magento setup:di:compile # production mode only
bin/magento cache:flush
What it does
- Rewrites catalog product image URLs (
Magento\Catalog\Model\View\Asset\Image,Magento\Catalog\Model\Product\Image,Magento\Catalog\Block\Product\ImageFactory) to go through Cloudflare's/cdn-cgi/image/resizing endpoint instead of Magento's local image cache. - Plugs into the WYSIWYG template filter (
Magento\Widget\Model\Template\Filter) to optionally optimize images referenced in CMS content. - Overrides the product gallery block (
Magento\Catalog\Block\Product\View\Gallery) to attach optimized image URLs and, when enabled, a set of extra mobile image sizes (srcset) for the product details page and listing pages. - Exposes per-image optimization parameters (compression, quality, format, fit)
appended as Cloudflare resizing URL params. Setting a field to
None/Originalomits that parameter and lets Cloudflare use its own default.
Configuration
Stores → Configuration → Nx6 → CloudFlare
General
| Field | Description |
|---|---|
| API Key | Cloudflare API key (stored encrypted). |
Image Optimization
| Field | Description |
|---|---|
| Enable Image Optimization | Master switch for routing catalog images through Cloudflare. |
| CMS image optimization | Also apply optimization to images referenced in CMS/WYSIWYG content. |
| Compression | None or Fast — see Cloudflare docs. |
| Format | Output format (only when Compression is None) — docs. |
| Fitment | Resize fit mode — docs. |
| Quality | Original or 50–95 — docs. |
Mobile Images
| Field | Description |
|---|---|
| Enable for PDP | Generate an extra srcset for the product details page gallery. |
| Size list (PDP) | Comma-separated widths, e.g. 320,640,960,1280,2560. |
| Enable for PLP | Same, for product listing pages. |
| Size list (PLP) | Comma-separated widths. |
Compression, Format, Fitment and Quality are website/store-view scoped, so
different stores can apply different optimization settings. The enable/disable
toggles are default-scope only.
Compatibility
Magento 2.4.x, PHP 8.3+.
Structure
.
├── Block/Product/
│ ├── ImageFactory.php
│ └── View/Gallery.php
├── Helper/Image.php
├── Model/
│ ├── Config.php
│ ├── Config/Source/{Compression,Fit,Format,Quality}.php
│ ├── Product/Image.php
│ └── View/Asset/Image.php
├── Plugin/Template/FilterPlugin.php
├── etc/
│ ├── acl.xml
│ ├── config.xml
│ ├── module.xml
│ ├── adminhtml/system.xml
│ └── frontend/di.xml
├── view/frontend/…
├── registration.php
├── composer.json
├── LICENSE
└── README.md
License
MIT — see LICENSE.