image-service

Service that takes an image, resizes it and caches it.

Requires to query parameters:

• imageOrigin
• imageSize: size of the resulting resized image

Optional query parameter (only when imageOrigin is .svg):

• format (available options: "png")

What it does:

• Validates it's a valid image using Cloudflare image service
• Checks the images is smaller than 10MB
• I've set the minimum resolution to 64 and maximum to 1024 (can be any combination in between)
• Caches the image in Clouflare for 30 days
• Does not cache error responses
• Resizing keeps the image ratio (can be changed)
• There's some hardcoded token to minimally protect it from anyone calling it and adding a ton of stuff to our Cloudflare cache DISABLED TO MAKE TESTING IN A BROWSER EASIER

Cloudflare Image service

To make it work, besides the worker, you need to:

• Use a custom domain for the worker https://dash.cloudflare.com/2dc2850dd405f616ae143bed685061f1/workers/services/view/worker-aws/production/triggers?just-added-dns-route=image-service-dev.extratools.works
• Enable Image resizing on the domains (Speed/Optimization) https://dash.cloudflare.com/2dc2850dd405f616ae143bed685061f1/extratools.works/speed/optimization

This uses Cloudflare Workers for Image processing. More information here.

• Formats and limitations

Image property configuration

Available options:

• Resize with Cloudflare Workers

Add/update relevant properties: https://github.com/radixdlt/image-caching/blob/main/index.js#L51

Cost

Images are priced at $5 per 100,000 images stored and $1 per 100,000 images delivered — with no egress costs or additional charges for resizing and optimization.

Demo environment

https://image-service-dev.extratools.works?imageOrigin=IMAGE_URL&imageSize=WIDTHxHEIGHT

Example: https://image-service-dev.extratools.works/?imageOrigin=https://c4.wallpaperflare.com/wallpaper/817/534/563/ave-bosque-fantasia-fenix-wallpaper-preview.jpg&imageSize=1024x512

With curl:

# Display headers, but not image
 curl -H "Authorization: SECRET" -D - https://image-service-dev.extratools.works/\?imageOrigin\=https://c4.wallpaperflare.com/wallpaper/817/534/563/ave-bosque-fantasia-fenix-wallpaper-preview.jpg\&imageSize\=1024x512 -o /dev/null


date: Fri, 24 Mar 2023 20:44:09 GMT
content-type: image/jpeg
content-length: 98933
cf-ray: 7ad1c01d4dff2fbf-MAD
accept-ranges: bytes
cache-control: max-age=2592000
etag: "cf4xjWJTTumjv_WseOLXGRDxX9z7Nl3A7eaw_wpzMIDQ:5c22ee81-1a299"
last-modified: Wed, 26 Dec 2018 02:59:13 GMT
vary: Accept
cf-cache-status: HIT
cf-bgj: imgq:85,h2pri
cf-resized: internal=ok/h q=0 n=25+0 c=6+100 v=2023.3.5 l=98933
content-security-policy: default-src 'none'; navigate-to 'none'; form-action 'none'
x-content-type-options: nosniff
server: cloudflare

100 98933  100 98933    0     0   551k      0 --:--:-- --:--:-- --:--:--  578k

Setup

Install Cloudflare Wrangler CLI. See the wrangler documentation for more information.

Install packages:

npm install

Run in dev mode

npx wrangler dev

Publish

This will deploy the Cloudflare worker with the code. (You need to be loged in).

npx wrangler publish