xF2 Add-on [OzzModz] Cloudflare Image Resizing - On Demand Responsive Images 2.0.0 Patch Level 1

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)

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.




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!





** The above example is a real test and did result in a 99.9% reduction in mobile image size **






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:

Example #2​

Example #3: Image Resizing + XFOptimize​

Public test thread #1

Desktop:


Mobile:





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

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 / 50000 * $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.