Cloudflare Image Resizing - On Demand Responsive Images

Cloudflare Image Resizing - On Demand Responsive Images [Paid] 1.0.0 Release Candidate 8

No permission to buy ($30.00)

Nulumia

Well-known member
Nulumia submitted a new resource:

Cloudflare Image Resizing - Integrates Cloudflare Image Resizing into Xenforo. WEBP & AVIF support, resize images and more

View attachment 268401

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)
...

Read more about this resource...
 

Anatoliy

Well-known member
Cool! Will it serve 2x images to retina devices and 1x to old ones?
And also will it process a thumbnail img to display a thumbnail or you crated a template modification and it will take an original img, process it accordingly to a visitor device and show a thumbnail?
 

Nulumia

Well-known member
Cool! Will it serve 2x images to retina devices and 1x to old ones?
And also will it process a thumbnail img to display a thumbnail or you crated a template modification and it will take an original img, process it accordingly to a visitor device and show a thumbnail?
It does create a range of different sizes of images based on device size, but not a twice-large set of every version. With research and testing it may be practical enough to produce such a comprehensive set (tablet, tablet retina; mobile, mobile retina etc). In fact, allow me to double check browser behavior on that as I believe most browsers will take a larger copy from srcset for retina anyways, making this unnecessary :)

For right now it uses srcset to supply a range from 4k down to 320px. It will automatically cap responsive sizes below the total width of the source image - so it's not wasting time & requests producing resized images when the device is already close enough :)
And also will it process a thumbnail img to display a thumbnail or you crated a template modification and it will take an original img, process it accordingly to a visitor device and show a thumbnail?
Thumbnail images are currently not affected - just the full attachments.

As I just realized the FAQ does not mention this, this addon does not affect external images, even if they're added via the BBCode img tag. The current line of thinking is that we should not have our Cloudflare caching images which we don't own or hold on our servers.
 

Nulumia

Well-known member
@Anatoliy

This public test thread shows the savings for one attachment example.

Check this thread to see the full device-specific range being applied to several attachments using the srcset method. You can see this by either resizing your browser and refreshing the page, then opening the attachments in another tab to see they are indeed resized. Or, you can inspect the attachments in your browser console to examine the srcset range.
 

Nulumia

Well-known member
Double checked and yes this is directly from Cloudflare:
There is no need to specify screen density here (2x, etc.), because the browser automatically takes it into account and picks a higher-resolution image when necessary.
So the srcset feature specifying the device sizes will also work for retina as the browser will select the larger image from the range :)
 

Nulumia

Well-known member
Very embarrassing but the pricing estimate in the FAQ was incorrect! The correct way is to divide your attachments by 50000 first:
X attachments * 0.8 / 50000 * $9 = monthly billing

The original FAQ would have resulted in a rediculously high estimate 😯
 

briansol

Well-known member
Any way to leverage this without cloudflare? I've hooked up with Kraken.io in the past as a cheaper alternative. But, the xf integration piece was always lacking (srcset/etc)
 

Faust

Well-known member
Any way to leverage this without cloudflare? I've hooked up with Kraken.io in the past as a cheaper alternative. But, the xf integration piece was always lacking (srcset/etc)

That’s what I’m using at the moments. This addon is promising, but expensive, plus I have to pay to cloudflare. I would consider it, at cheaper price.
 

briansol

Well-known member
The one-time addon cost is not a big deal - i think it's fair. but cloudflare pro is not something i can afford on an on-going basis, so a service that only charges for the transformation only is what i'm after.
 

Nulumia

Well-known member
Any way to leverage this without cloudflare? I've hooked up with Kraken.io in the past as a cheaper alternative. But, the xf integration piece was always lacking (srcset/etc)
That’s what I’m using at the moments. This addon is promising, but expensive, plus I have to pay to cloudflare. I would consider it, at cheaper price.
Providing matched functionality for another image service is completely doable, especially now that the proof of concept is there with this addon (and tested).
 

Frode789

Well-known member
Agreed. This functionality is just awesome and the price for the addon itself is completely just, but it's a substantial cost to Cloudfare. I have no use for Pro, other than for the image resize part, and I have to pay extra on top for that as well. I wish there were some other alternatives with similar feature set. :\
 

z3r010

Active member
I've just installed and my logs are filling with these errors. (Server IIS10, PHP 8.1.5).

  • ErrorException: Template error: [E_WARNING] Undefined variable $srcset
  • src\addons\Nulumia\CFImageResizing\Callback\AttachmentFormatter.php:39
  • Generated by: Unknown account
  • May 31, 2022 at 16:06
Code:
#0 src\addons\Nulumia\CFImageResizing\Callback\AttachmentFormatter.php(39): XF\Template\Templater->handleTemplateError(2, '[E_WARNING] Und...', 'C:\\root\\Forums\\...', 39)
#1 src\XF\Template\Templater.php(1695): Nulumia\CFImageResizing\Callback\AttachmentFormatter::renderSrcset('', Array, Object(SV\StandardLib\XF\Template\Templater))
#2 internal_data\code_cache\templates\l1\s12\public\lightbox_macros.php(110): XF\Template\Templater->callback('Nulumia\\CFImage...', 'renderSrcset', '', Array)
#3 src\XF\Template\Templater.php(824): XF\Template\Templater->{closure}(Object(SV\StandardLib\XF\Template\Templater), Array, NULL)
#4 internal_data\code_cache\templates\l1\s12\public\bb_code_tag_attach.php(73): XF\Template\Templater->callMacro('lightbox_macros', 'single_image', Array, Array)
#5 src\XF\Template\Templater.php(1651): XF\Template\Templater->{closure}(Object(SV\StandardLib\XF\Template\Templater), Array, NULL)
#6 src\XF\BbCode\Renderer\Html.php(528): XF\Template\Templater->renderTemplate('bb_code_tag_att...', Array)
#7 src\XF\BbCode\Renderer\Html.php(523): XF\BbCode\Renderer\Html->getRenderedAttachment(Object(ThemeHouse\AttachmentsPlus\XF\Entity\Attachment), Array)
#8 src\addons\EAEAddons\ConversationTools\XF\BbCode\Renderer\Html.php(27): XF\BbCode\Renderer\Html->renderTagAttach(Array, Array, Array, Array)
#9 src\XF\BbCode\Renderer\Html.php(310): EAEAddons\ConversationTools\XF\BbCode\Renderer\Html->renderTagAttach(Array, Array, Array, Array, Object(EAEAddons\ConversationTools\XF\BbCode\Renderer\Html))
#10 src\XF\BbCode\Traverser.php(63): XF\BbCode\Renderer\Html->renderTag(Array, Array)
#11 src\XF\BbCode\Traverser.php(39): XF\BbCode\Traverser->renderSubTree(Array, Array)
#12 src\XF\BbCode\Traverser.php(22): XF\BbCode\Traverser->renderAst(Array, Object(SV\SignupAbuseBlocking\XF\BbCode\RuleSet), Array)
#13 src\XF\SubContainer\BbCode.php(222): XF\BbCode\Traverser->render('[ATTACH type="f...', Object(XF\BbCode\Parser), Object(SV\SignupAbuseBlocking\XF\BbCode\RuleSet), Array)
#14 src\XF\Template\Templater.php(2379): XF\SubContainer\BbCode->render('[ATTACH type="f...', 'html', 'post', Object(XFES\XF\Entity\Post), Array)
#15 src\XF\Template\Templater.php(1128): XF\Template\Templater->fnBbCode(Object(SV\StandardLib\XF\Template\Templater), false, '[ATTACH type="f...', 'post', Object(XFES\XF\Entity\Post))
#16 internal_data\code_cache\templates\l1\s12\public\post_macros.php(557): XF\Template\Templater->func('bb_code', Array, false)
#17 src\XF\Template\Templater.php(824): XF\Template\Templater->{closure}(Object(SV\StandardLib\XF\Template\Templater), Array, NULL)
#18 internal_data\code_cache\templates\l1\s12\public\post_article_macros.php(96): XF\Template\Templater->callMacro('post_macros', 'post_user_conte...', Array, Array)
#19 src\XF\Template\Templater.php(824): XF\Template\Templater->{closure}(Object(SV\StandardLib\XF\Template\Templater), Array, NULL)
#20 internal_data\code_cache\templates\l1\s12\public\thread_view.php(497): XF\Template\Templater->callMacro('post_article_ma...', 'article', Array, Array)
#21 src\XF\Template\Templater.php(987): XF\Template\Templater->{closure}(Object(SV\StandardLib\XF\Template\Templater), Array, Object(XF\Template\ExtensionSet))
#22 src\XF\Template\Templater.php(923): XF\Template\Templater->renderExtensionInternal('pinned_body', Array, Array, Object(XF\Template\ExtensionSet))
#23 internal_data\code_cache\templates\l1\s12\public\thread_view.php(882): XF\Template\Templater->renderExtension('pinned_body', Array, Object(XF\Template\ExtensionSet))
#24 src\XF\Template\Templater.php(1651): XF\Template\Templater->{closure}(Object(SV\StandardLib\XF\Template\Templater), Array, Object(XF\Template\ExtensionSet))
#25 src\XF\Template\Templater.php(1642): XF\Template\Templater->renderTemplate('thread_view', Array, true, NULL)
#26 src\XF\Template\Template.php(24): XF\Template\Templater->renderTemplate('thread_view_typ...', Array)
#27 src\XF\Mvc\Renderer\Html.php(50): XF\Template\Template->render()
#28 src\XF\Mvc\Dispatcher.php(460): XF\Mvc\Renderer\Html->renderView('XF:Thread\\ViewT...', 'public:thread_v...', Array)
#29 src\XF\Mvc\Dispatcher.php(442): XF\Mvc\Dispatcher->renderView(Object(XF\Mvc\Renderer\Html), Object(XF\Mvc\Reply\View))
#30 src\XF\Mvc\Dispatcher.php(402): XF\Mvc\Dispatcher->renderReply(Object(XF\Mvc\Renderer\Html), Object(XF\Mvc\Reply\View))
#31 src\XF\Mvc\Dispatcher.php(60): XF\Mvc\Dispatcher->render(Object(XF\Mvc\Reply\View), 'html')
#32 src\XF\App.php(2352): XF\Mvc\Dispatcher->run()
#33 src\XF.php(524): XF\App->run()
#34 index.php(20): XF::runApp('XF\\Pub\\App')
#35 {main}

Also, the addons options section headers are not showing (I had to check the page source to see what each lot of options was referring to).

1654010698004.png
 

ShinLim

Active member
Very embarrassing but the pricing estimate in the FAQ was incorrect! The correct way is to divide your attachments by 50000 first:
X attachments * 0.8 / 50000 * $9 = monthly billing

The original FAQ would have resulted in a rediculously high estimate 😯
I don't think this calculate correct, it said 50k request, that's mean a user can request multiple times per images (let's say a user browse an image and re-visit after 1 month, still count 2 requests) and multiple images in multiple threads/topics, that's mean:
X attachments * x users (and/or guests) * times each user browse / 50000 request * 9 = huge amount of bucks
Let's say I have 50k users, these users browse a page has images, that's mean 50k request for all of these users which mean cost already $9, and of course these users don't browse only one page, they browse multiple pages and multiple images, so you can imagine that this would be extremely expensive and lead to not efficiently, I'm not sure but if this is true I would be sad because you took alot of time to build an addon like this, have you tested this addon on large site?
 
Last edited:

Faust

Well-known member
I don't think this calculate correct, it said 50k request, that's mean a user can request multiple times per images (let's say a user browse an image and re-visit after 1 month, still count 2 requests) and multiple images, that's mean:
X attachments * x users (and/or guests) * times each user browse / 50000 request * 9 = huge amount of bucks
Let's say I have 50k users, these users browse a page has images, that's mean 50k request for all of these users which mean cost already $9, and of course these users don't browse only one page, they browse multiple pages and multiple images, so you can imagine that this would be extremely expensive and lead to not efficiently, I'm not sure but if this is true I would be sad because you took alot of time to build an addon like this, have you tested this addon on large site?
Means this addon is definitely not worth for a photography forum.
 

VersoBit

Well-known member
Means this addon is definitely not worth for a photography forum.
It's a rather poor implementation of Cloudflare Image Resizing; an ideal solution would be a Cloudflare Worker overtop of the request URL that cache's the responses in an R2 bucket for re-serving.
 
Top