mecanik / cloudflare-image-resizing-worker

Cloudflare Image Resizing worker for WordPress

#about#	#data#
Gamer, developer, business entrepreneur. Converts at lof of coffee into code Plays multiplayer games like TitanFall 2 Doesn't like to be told "it's not possible" Writes futuristic code to solve problems Protects animals of all kind (especially cats 😺)

cloudflare-image-resizing-worker's Issues

Any way to exclude RSS Images and Social Sharing Images from Yoast?

Hey, i love your worker. It works perfect. Just 2 wishes ;)

1. Maybe an LazyLoading Animation and that the first Image is not LazyLoaded
2. When i share my posts, there is no image. Same for RSS Feed. Thats not a problem normally, but with that worker.

It looks like it doesn't work with flatsome image slider

It looks like it doesn't work with flatsome image slider

https://vapesocietysupplies.com/products/glazed-donut-by-loaded-e-liquid-120ml/

Problems with Menus and Fonts

Hi Norbert,
Finally got a chance to try this out but seeing a couple of issues with fonts and menus. Maybe clashing with autoptimize? Some of the logs below:

{
"outcome": "ok",
"scriptName": "img",
"exceptions": [],
"logs": [
{
"message": [
"Invalid Content Type: application/json; charset=UTF-8"
],
"level": "error",
"timestamp": 1675895974501
}
],
"eventTimestamp": 1675895974327,
"event": {
"request": {
"url": "https://staging.kumoco.com/wp-json/contact-form-7/v1/contact-forms/138/feedback/schema",
"method": "GET",
"headers": {
"accept": "application/json, /;q=0.1",
"accept-encoding": "gzip",
"accept-language": "en-US,en;q=0.5",
"cache-control": "no-cache",

{
"outcome": "canceled",
"scriptName": "img",
"exceptions": [],
"logs": [
{
"message": [
"Invalid Origin HTTP Status: 206"
],
"level": "error",
"timestamp": 1675895974291
}
],
"eventTimestamp": 1675895974282,
"event": {
"request": {
"url": "https://staging.kumoco.com/kumoco.mp4",
"method": "GET",
"headers": {
"accept": "video/webm,video/ogg,video/;q=0.9,application/ogg;q=0.7,audio/;q=0.6,/;q=0.5",
"accept-encoding": "gzip",
"accept-language": "en-US,en;q=0.5",
"cache-control": "no-cache",

{
"outcome": "ok",
"scriptName": "img",
"exceptions": [],
"logs": [
{
"message": [
"Invalid Content Type: application/javascript; charset=UTF-8"
],
"level": "error",
"timestamp": 1675895973979
}
],
"eventTimestamp": 1675895973971,
"event": {
"request": {
"url": "https://staging.kumoco.com/wp-content/cache/autoptimize/js/autoptimize_1b6feac3c6e04cbeb13becdaeef2d0e4.js",
"method": "GET",
"headers": {
"accept": "/",
"accept-encoding": "gzip",
"accept-language": "en-US,en;q=0.5",
"cache-control": "no-cache",

{
"outcome": "ok",
"scriptName": "img",
"exceptions": [],
"logs": [
{
"message": [
"Invalid Content Type: application/javascript; charset=UTF-8"
],
"level": "error",
"timestamp": 1675895973983
}
],
"eventTimestamp": 1675895973963,
"event": {
"request": {
"url": "https://staging.kumoco.com/wp-includes/js/jquery/jquery.min.js",
"method": "GET",
"headers": {
"accept": "/",
"accept-encoding": "gzip",
"accept-language": "en-US,en;q=0.5",
"cache-control": "no-cache",

{
"outcome": "ok",
"scriptName": "img",
"exceptions": [],
"logs": [
{
"message": [
"Invalid Content Type: application/javascript; charset=UTF-8"
],
"level": "error",
"timestamp": 1675895973978
}
],
"eventTimestamp": 1675895973970,
"event": {
"request": {
"url": "https://staging.kumoco.com/wp-content/cache/autoptimize/js/autoptimize_single_1a8e0c5a2c777f63163809b92ff95004.js",
"method": "GET",
"headers": {
"accept": "/",
"accept-encoding": "gzip",
"accept-language": "en-US,en;q=0.5",
"cache-control": "no-cache",

{
"outcome": "ok",
"scriptName": "img",
"exceptions": [],
"logs": [
{
"message": [
"Invalid Content Type: application/octet-stream"
],
"level": "error",
"timestamp": 1675895973970
}
],
"eventTimestamp": 1675895973962,
"event": {
"request": {
"url": "https://staging.kumoco.com/wp-content/themes/kumoco/fonts/manrope/Manrope-VariableFont_wght.ttf",
"method": "GET",
"headers": {
"accept": "application/font-woff2;q=1.0,application/font-woff;q=0.9,/;q=0.8",
"accept-encoding": "gzip",
"accept-language": "en-US,en;q=0.5",
"cache-control": "no-cache",

{
"outcome": "ok",
"scriptName": "img",
"exceptions": [],
"logs": [],
"eventTimestamp": 1675895973956,
"event": {
"request": {
"url": "https://staging.kumoco.com/wp-content/cache/autoptimize/css/autoptimize_081ee1e1b7acb8f875175d16d51e06ac.css",
"method": "GET",
"headers": {
"accept": "text/css,/;q=0.1",
"accept-encoding": "gzip",
"accept-language": "en-US,en;q=0.5",
"cache-control": "no-cache",
"cf-connecting-ip": "80.4.133.158",
"cf-ipcountry": "GB",
"cf-ray": "7967dcad3bf57744",
"cf-visitor": "{"scheme":"https"}",
"connection": "Keep-Alive",
"cookie": "REDACTED",
"dnt": "1",
"host": "staging.kumoco.com",
"pragma": "no-cache",

{
"outcome": "ok",
"scriptName": "img",
"exceptions": [],
"logs": [
{
"message": [
"Invalid Content Type: application/octet-stream"
],
"level": "error",
"timestamp": 1675895973970
}
],
"eventTimestamp": 1675895973962,
"event": {
"request": {
"url": "https://staging.kumoco.com/wp-content/themes/kumoco/fonts/manrope/Manrope-VariableFont_wght.ttf",
"method": "GET",
"headers": {
"accept": "application/font-woff2;q=1.0,application/font-woff;q=0.9,/;q=0.8",
"accept-encoding": "gzip",
"accept-language": "en-US,en;q=0.5",
"cache-control": "no-cache",

onerror=redirect relative URL

Hi @Mecanik,
firstly thank you so much for this worker code, I've been using it to great success on a WordPress website I manage.

However I've noticed a few line in my server error logs that look like this:

2023/11/01 00:16:43 [error] 48664#48664: *449359 open() "/www/xucobuce_886/public/resources/guides/mobile-self-checkout-benefits/onerror=redirect/wp-content/uploads/2021/03/Yuka-scanning-app-cheerios.png" failed (2: No such file or directory), client: 52.167.144.136, server: www.scandit.com, request: "GET /resources/guides/mobile-self-checkout-benefits/onerror=redirect/wp-content/uploads/2021/03/Yuka-scanning-app-cheerios.png HTTP/2.0", host: "www.scandit.com:64972"

Any idea what maybe causing these errors? It looks like the onerror redirect is a relative URL instead of an absolute URL. Probably some config I may have missed, but I can't see where. Thanks!

How to deal with multiple workers?

First off I want to thank you for releasing the worker open source! I've been using the cloudflare-image-resizing plugin with great success but I'm excited to use a worker instead.

Can you give any guidance on how the worker script could co-exist with other workers?
I'm not super familiar with how the workers function, but I've already got Edge Cache HTML via Cloudflare Workers enabled and if I try to add a wildcard route for the domain (example.com/*) I get the following error: workers.api.error.duplicate_route

How to ignore certain image for lazy load

Hello,

I am wondering if there is an option to ignore lazy load on certain images (above the fold or first 2–3 images).

Thank you
Chandan

Maybe add some new functions

Hey, did you saw this post here https://blog.cloudflare.com/speeding-up-your-website-in-a-few-clicks/
They added a Worker for better LCP, maybe something you can add to your Script ;)

Best Kevin

Will it work with Cloudflare Images?

Hey, do you think the script will work, if the images are hosted on Cloudflare Images?

Icons gone missing

Hi,

first of all, thank you for your effort and the worker configuration. After copying it and routing it, the icons are gone missing and i really do not know how to fix this.

Any help is much appreciated.

Cheers,
Philipp

Multisite Support -> explain

Hey, could you please explain to me the Multisite setup a little bit more. How a Setup would look for a site like this, where we use MultilingualPress, so each subsite is a language:

example.com/en
example.com/fr

The next question is about performance. I think the images need too much time to be visible. Sometimes just then when they are in the viewport. Yould you check if there is an "Preload critical images" supoort possible so leading images are not lazy loaded and then there is a Threshold for lazy loading images, so they are ready before they are visible?

Thank you

Images not resizing on mobile

Hi there,

Thank you for making this available for everyone.

I'm currently testing it on https://tinyurl.com/staging-site and it's working as expected on desktop. But on mobile the image urls are not being rewritten and so Cloudflare is not serving a resized image.

Any ideas why that might be?

Images not loading when a wildcard is used in Route

Hey, firstly - thank you for taking the time to write this and share!

I'm having an issue formatting the URL in the Trigger for the Worker. I'm trying to set this up on the site https://blog.bigorangeheart.org/. In the Route for the Worker, I initially set the URL to blog.bigorangeheart.org/*, but this returned no images on the site.

Having tried several variations of the URLs in the Route, I found that if I set the Route to a specific URL, such as blog.bigorangeheart.org/2020/04/mental-illness with no wildcard, and no trailing /, then the images are resized and delivered as expected on that specific page. As can be seen here https://blog.bigorangeheart.org/2020/04/mental-illness/. Are you able to advise on how I can set this on the subdomain using a wildcard?

Variations I've tried:

• blog.bigorangeheart.org/*
• blog.bigorangeheart.org*
• *.blog.bigorangeheart.org/*
• *blog.bigorangeheart.org/*
• bigorangeheart.org/*
• bigorangeheart.org*
• *.bigorangeheart.org/*
• *bigorangeheart.org/*

Edit:

I can see a known issue in relation to route specificity, but in my case, I'm only running one worker. So this may not be an issue.

Seems to break sites

Hey, awesome work on the worker, I've been using your plugin with great success! I'm having some issues when trying to use the worker, I can see that the worker is running, and verified on the CF side the logs are seeing requests, when I view the code on any of the pages on my site I can see the rewrite is happening, but it seems to break all images. I've enabled the worker, set the mode to production, made it run unbound, and then set the correct worker rules when to execute.

Any thoughts or ideas about what I might be doing wrong? As soon as I disable the worker, images load again with no problem.

Add documentation about Domain configuration setting

This could simply be an additional comment line in the script, something like:

Domain must be base URL (no https://) with no trailing slash. For example: www.example.com and not https://example.com/

Inline markup changed from url() to url(url))

Because of the double nesting going on, most images with Elementor are not loading. Some are (the ones using srcset attributes are fine), but we had to disable the worker because the current scripted solution is breaking the site.

Any idea on how we could tweak this to work more generically for most WordPress sites? I'll admit I'm new to workers with Cloudflare, and your solution looks robust, but we just couldn't continue with it in its current state 🫠

Font-URL in woocommerce.css replaced after Autoptimize css aggregation

First, thank you for this great piece of code! Amazing work and runs like a charm. I would have never managed to approach CF image resizing without this.

In our setup however the worker replaces a URL of the "star.eot" and "woocommerce.eot" (originally loaded in woocommerce.css) after the css files have been aggregated and optimized by the Autoptimze Wordpress Plugin. This breaks the display of the star rating in the shop and causes 404 errors in the logs like

404 | GET /wp-content/plugins/woocommerce/assets/fonts/star.eot);src:url(/example.com/wp-content/plugins/woocommerce/assets/fonts/star.eot HTTP/1.0

How to reproduce:

1. woocommerce.css default loads the font

@font-face{
	font-family:star;
	src:url(../fonts/star.eot); [...]

2. Autoptimize rewrites this during aggregation to

@font-face{
	font-family:star;
	src:url(//example.com/wp-content/plugins/woocommerce/assets/css/../fonts/star.eot); [...]

3. CF Worker picks up the URL, rewrites and breaks

@font-face{
	font-family:star;
	src:url('//example.com/cdn-cgi/image/quality=80,format=auto,onerror=redirect,metadata=none/wp-content/plugins/woocommerce/assets/css/../fonts/star.eot); [...]

How I fixed it (not sure if this breaks other worker functions in turn...):

I have surrounded line 435 of the worker with this if clause

if(originalBody.indexOf("woocommerce/assets/") === -1) { 
    let result = originalBody.replace(rgxCss, `url('$1${CDN}$2$3')`);
}

But I assume it would be better to adjust the original regular expression to not pick up this path rather than to prevent the worker code from doing its magic.

Hope this information is clear enough and can be reproduced

Inline CSS overwritten by Worker

Hey Norbert, I've run into an issue with a site that's using the Kadence Block plugin. The plugin adds inline CSS to each of its blocks. When I point the Route in CF to the site, the images resize and are served as expected. However, the Worker re-writes the > character within the inline CSS to >. Resulting in CSS borking.

The image below displays the resulting CSS - on the left is without the Worker, on the right is with the Worker. Are you able to provide any support with adjusting this?

Invalid Content Type: image/jpeg

getting this on all of my worker logs:

"logs": [
{
"message": [
"Invalid Content Type: image/jpeg"
],
"level": "error",
"timestamp": 1691289441837
}

what could be wrong?

also how does this work using a subdomain like your plugin? Im only using cloudflare for images using WP offload media to serve them...

Issue loading some images

Having an issue with loading images on one of my sites: https://www.dabdoors.com/products

Any ideas why?

Some image thumbnails not going through image resize

I'm having an issue with WooCommerce thumbnails not passing through the Cloudflare image resizing. It seems it may be an issue with the theme Salient we're using on a few sites. The image thumbnails have 140x140 appended to them. Happy to pay some $$ to get this fixed if need be.