Cloudflare Image Resizing [Xenforo Addons]

  • Response times may be somewhat delayed over certain days over the holiday period. Apologies if you experience any wait times and all inquiries are being addressed.
  • Our SEO addon did not make Christmas even release as was hoped, but is quickly being finalized for its first public release! Please stay tuned for the official launch here at the store, or by following the sneak preview thread at Xenforo.com.
  • Our new powerful addon, SEO & Index Tools is almost released for Early Access! Early customers will be able to beta test the addon at a lower, locked-in license price. Stay tuned for announcements!
Cloudflare Image Resizing
Integrates Cloudflare Image Resizing into Xenforo. WEBP & AVIF support, resize images and more

Overview Releases (4) Discussion

Nulumia

Nulumia

Administrator
Staff member
Messages
1,445
Reaction score
618
Points
113
A new product by Nulumia is available: Cloudflare Image Resizing 1.0.0 Release Candidate 7 - Integrates Cloudflare Image Resizing into Xenforo. WEBP & AVIF support, resize images and more


Cloudflare Image Resizing 1.0.0 Release Candidate 7

Description

A game-changing addition to Xenforo, leverage the power of Cloudflare Image Resizing to optimize your site. Cloudflare Image Resizing is a paid feature available to Cloudflare Professional plans. However, the benefits and savings are unmatched to deliver responsive images on demand in next gen formats.

Requires:
  • Cloudflare Professional Plan ($20 USD/mo)
  • Cloudflare Image Resizing ($9 USD per 50k requests)

product-header-overview.jpg


The case for image resizing​

When users upload attachments to your forum, visitors will always view these attachments in their original, unoptimized form. That could mean quite massive resolutions (up to 4k) and heavy file sizes if you're not careful with allowances.

This results in a one-image-for-everybody rule, with no respect to visitor device type or screen size. Effectively, a visitor on 4G mobile data will have to download the same ultra-res image enjoyed by desktop users.

This can not only strain server resources, but also causes slow pages for your visitors - and can even harm your speed scores and rankings in Google!

Other market solutions​

Some platforms, such as Wordpress, avoid this issue by generating a set of size variations for uploaded images (S/M/L/XL). This is similar to how Xenforo stores different sizes of avatars. While this means Wordpress can deliver the right image for most situations, it can also bloat your file system exponentially! Imaging having five different copies of every attachment on your site.

Is there a dynamic solution?​

There are several enterprise-level platforms such as Hubspot, which allow dynamic image resizing - without ever needing to create or store different image variations. Sadly, this does not exist in Xenforo.

..until now, with Cloudflare Image Resizing.

product-header-title.jpg


This addon, along with Cloudflare's Image Resizing plan, allows on demand replacement with optimized, resized and device-specific images across Xenforo.

Optimize your attachments with next-gen formats such as WEBP and AVIF. Resize attachments dynamically with max image dimensions, set quality limits, sharpness, crop fitting and more.

This means your desktop users will get to see their favorite attachment in stunning 4K, tablet browsers will receive an optimized 600-700px image, and mobile browsers will receive a 320px image at ultra low file size (up to 99.9% savings).

And what's best, it all happens dynamically in the cloud - nothing is replaced, added to, or stored on your server. That's the magic of Cloudflare!

xenforo-2-addon-cloudflare-image-resizing-features.jpg

xenforo-2-addon-cloudflare-image-resizing-compare.jpg

** The above example is a real test and did result in a 99.9% reduction in mobile image size **
xenforo-2-addon-cloudflare-image-resizing-how-it-works.jpg


product-header-tests.jpg


After extensive use on both production and testing servers, the results are clear - the benefits from Cloudflare Image Resizing are unmatched.

Here's some examples of the addon at work on some terribly unoptimized pages:

xenforo-2-addon-cloudflare-image-resizing-test1.jpg

Example #2​

xenforo-2-addon-cloudflare-image-resizing-test2.jpg


Example #3: Image Resizing + XFOptimize​

xenforo-2-addon-cloudflare-image-resizing-test3.jpg


Public test thread #1

Desktop:

Page size​

Cloudflare Image Resizing page size​

12,195 KiB2,599 KiB
Savings: 78.69% (-9.6Mb!)

Mobile:

Page size​

Cloudflare Image Resizing page size​

12,195 KiB1,211 KiB
Savings: 90.07% (-10.7Mb!)

product-header-compatibility.jpg


Works with the following content:
  • Xenforo thread attachments
  • Active style primary logo & 2x logo
  • Resource Manager attachments
  • Media Gallery thumbnails and full media items
  • Article Management System (AMS) article attachments
  • User Blog System (UBS) blog entry attachments

product-header-faq.jpg


Q: I don't have Cloudflare Pro or understand Image Resizing. How hard is it to set up?
A:
After upgrading to Cloudflare Pro (It only takes a few moments), simply switch on Image Resizing from within your dashboard and install this addon. To test the ease of this addon, an entire test copy of Xenforo and Cloudflare Pro account was set up from scratch - and had resized images showing within minutes!

Q: I enabled Cloudflare Pro and Image Resizing. What do I do now in Xenforo?
A:
After installing this addon, just check "Enable WEBP/AVIF" for your logo and attachments, along with any optional settings such as image quality or metadata.
Admin -> Settings -> Cloudflare Image Resizing

Q: C'mon, the big question - much should I expect to pay each month with Cloudflare Image Resizing?
A:
Image Resizing is billed at $9 USD / 50k requests. You can estimate your billed usage by first going to:
Admin -> Content -> Attachments

Then, find the "Showing 20 of X items" at the bottom of the page. That's how many attachments are stored at your site. A good ballpark is to estimate around 80% of these attachments will be requested by Cloudflare (due to some being hidden behind permissions). You can then calculate by the following:
X attachments * 0.8 * $9 = monthly billing

Q: Will attachments get exposed or cached by Cloudflare from private forums or threads?
A:
No. This addon only works with attachments which are viewable by guests. That is because Cloudflare must be able to "see" the attachment (think unregistered users) to convert images. Attachments in private threads, categories, nodes etc will not be affected.

Q: Anything special I need to do in my Cloudflare? Workers? Zones?
A:
Nope! Just enable Image Resizing at your Cloudflare, then install this addon. This addon uses the URL Format method of implementing Image Resizing, not Workers. While Workers may be added in a future version, the URL Format method takes care of everything automatically.
Read more about this at the Image Resizing Developer Docs

Q: How can I tell it's working?
A:
There's two ways to check the addon is performing correctly, and you should do both.

View Billable Usage:
Cloudflare Dashboard -> Speed -> Optimization -> Image Resizing -> View Billable Usage
You should begin to see requests in the WEBP or AVIF format.

Inspect source code:
Right click on any attachment image and open your browser Inspector. After finding the image HTML, you should notice image URL's have been prefixed with the following:
/cgi-cdn/image/width=x,format=auto/data/attachments/image.jpg

This is the special format which instructs Cloudflare to optimize the image.

Q: I thought you already made XFOptimize? Why do I need to pay for two addons?
A:
XFOptimize is a very different addon, which optimizes and compresses things like HTML, CSS & JS. It does not, nor cannot, affect images on your site. Only Cloudflare has the power to do this. However, using XFOptimize is highly recommended - and compatible! - alongside this addon.

Q: I can only afford one addon - this or XFOptimize. Which should I buy?
A:
Although XFOptimize is available for a terrific low price, you may get substantially more benefit with Cloudflare Image Resizing, if your site contains many large attachments.

product-header-links.jpg


1. Cloudflare Signup
2. Cloudflare Image Resizing Developer docs
3. Public test thread
4. Examples of attachments with comparisons


Extended Product Information




Read more about this product...
 
Nulumia

Nulumia

Administrator
Staff member
Messages
1,445
Reaction score
618
Points
113
A new update is available for Cloudflare Image Resizing by Nulumia.


Cloudflare Image Resizing 1.0.0 Release Candidate 8

Update highlights

To update your theme, please download the latest version at:
https://www.nulumia.com/shop/my-downloads/

You must select "Overwrite files during install/upgrade" when upgrading to this version.

Overview

This release updates the addon's quicklinks while viewing the Admin -> Addons list


Complete Change Log

  • Updated the addon's quicklinks while viewing the Admin -> Addons list


Read more about this product...
 
V

VersoBit

New member
Messages
1
Reaction score
0
Points
1
Are there plans to add avatar support?

Currently, its possible to edit the `externalDataUrl` to include the cdn-cgi, however it breaks the support for sections of the forum that already have cdn-cgi enabled.

We've done a temporary workaround by adding the cdn-cgi url prefix as such:
`XF/Entity/User.php`
PHP:
public function getAvatarUrl($sizeCode, $forceType = null, $canonical = false)
         {
                 $app = $this->app();

                 $sizeMap = $app->container('avatarSizeMap');
                 if (!isset($sizeMap[$sizeCode]))
                 {
                         // Always fallback to 's' in the event of an unknown size (e.g. 'xs', 'xxs' etc.)
                         $sizeCode = 's';
                 }

                 if ($this->gravatar && $forceType != 'custom')
                 {
                         return $this->getGravatarUrl($sizeCode);
                 }
                 else if ($this->avatar_date)
                 {
                         $group = floor($this->user_id / 1000);
                         return "https://cdn.ourdomain.com/cdn-cgi/image/format=auto/avatars/{$sizeCode}/{$group}/{$this->user_id}.jpg?{$this->avatar_date}";
                         //return $app->applyExternalDataUrl(
                         //      "avatars/{$sizeCode}/{$group}/{$this->user_id}.jpg?{$this->avatar_date}",
                         //      $canonical
                         //);
                 }
                 else
                 {
                         return null;
                 }
         }

This same for `addons/XFRM/Entity/ResourceItem.php`
PHP:
public function getIconUrl($sizeCode = null, $canonical = false)
         {
                 $app = $this->app();

                 if ($this->icon_date)
                 {
                         $group = floor($this->resource_id / 1000);
                         return "https://cdn.ourdomain.com/cdn-cgi/image/format=auto/resource_icons/{$group}/{$this->resource_id}.jpg?{$this->icon_date}";
                         //return $app->applyExternalDataUrl(
                         //      "resource_icons/{$group}/{$this->resource_id}.jpg?{$this->icon_date}",
                         //      $canonical
                         //);
                 }
                else
                 {
                         return null;
                 }
         }

Covers support would also be great!
 
Last edited:

Product Information

Seller
Nulumia
Release date
Last update
Branding
None
0% 0.00 star(s) 0 ratings

Pricing information

Lifetime
$40.00
My Downloads Product Documentation
Top