Image Resizing (Cloudflare)

It’s possible top setup your own account in Cloudflare and take advantage of dynamic image resizing and optimisation. This will then allow you to serve images from your own domain rather than the TProfile default of https://cdn.tprofile.com. It allows for images to be served from a sub domain or even more SEO friendly a sub directory. this means if your frontend website is hosted on TProfile with the domain https://www.tprofile.com you could setup images to be served from either of the two following example URL’s:

• https://images.tprofile.com

• https://www.tprofile.com/images

You can read about the all of the image resizing possibilities here on Cloudflare but the below guide will setup a worker to dynamically resize images based on query string params called width and height. The served images will maintain their aspect ration as well be served in a WebP format

Pricing

Our Plans | Pricing | Cloudflare A pro plan is required at a minimum. Below is a screenshot from that page detailing the amount of images you get for free each month. FAQ · Cloudflare Image Optimization docs Also states that – “Image Resizing - Cloudflare charges when there are cache misses, and for some request errors.”

The caching section on this page Troubleshoot Image Resizing problems – Cloudflare Help Center also states that images are cached for an hour at minimum unless the cache-control header allows longer. By default cdn.tprofile.com images set the cache-control header for 1 year.

Open

Configuration

To take advantage of this you will need the following:

1. A Cloudflare account

2. The domain you wish to use setup in Cloudflare under Websites on a Pro plan

3. A Worker to handle the image resizing (we’ll setup this below)

Once you have a Cloudflare account and your domain added here's how to configure the website and worker in Cloudflare

1. Firstly enable Image Resizing on the Website by going to Speed > Optimisation > Image Resizing and toggling the enable button. Make sure the checkbox for “Resize images from any origin” is checked.

   Open

   

2. Now go to the dashboard and click Workers, create a new Service, give the service a name and select the HTTP handler starter.

3. Now select “Quick Edit“

4. Paste the following snippet of code into the window on the left as in the below screenshot. Important! Replace https://images.tprofile.co with your domain if using a subdomain and https://www.tprofile.co/images with the domain and sub directory if using this method. resizingOptions allow you set any other resizing options as defined here.

   addEventListener("fetch", event => { event.respondWith(handleRequest(event.request)) }) async function handleRequest(request) { let hiddenImageOrigin = "https://cdn.tprofile.com" const url = new URL(request.url) const resizingOptions = { format: "webp", fit: 'contain', quality: 100 } if (url.searchParams.has("fit")) resizingOptions.fit = url.searchParams.get("fit") if (url.searchParams.has("width")) resizingOptions.width = url.searchParams.get("width") if (url.searchParams.has("height")) resizingOptions.height = url.searchParams.get("height") if (url.searchParams.has("quality")) resizingOptions.quality = url.searchParams.get("quality") if (url.searchParams.has("format")) resizingOptions.format = url.searchParams.get("format") if (url.searchParams.has("anim")) resizingOptions.anim = url.searchParams.get("anim") if (url.searchParams.has("background")) resizingOptions.background = url.searchParams.get("background") if (url.searchParams.has("blur")) resizingOptions.blur = url.searchParams.get("blur") if (url.searchParams.has("brightness")) resizingOptions.brightness = url.searchParams.get("brightness") if (url.searchParams.has("compression")) resizingOptions.compression = url.searchParams.get("compression") if (url.searchParams.has("contrast")) resizingOptions.contrast = url.searchParams.get("contrast") if (url.searchParams.has("dpr")) resizingOptions.dpr = url.searchParams.get("dpr") if (url.searchParams.has("gamma")) resizingOptions.gamma = url.searchParams.get("gamma") if (url.searchParams.has("gravity")) resizingOptions.gravity = url.searchParams.get("gravity") if (url.searchParams.has("metadata")) resizingOptions.metadata = url.searchParams.get("metadata") if (url.searchParams.has("onerror")) resizingOptions.onerror = url.searchParams.get("onerror") if (url.searchParams.has("rotate")) resizingOptions.rotate = url.searchParams.get("rotate") let path = ""; if (request.url.indexOf("https://images.tprofile.co") > -1) { path = request.url.replace("https://images.tprofile.co", "") } else if (request.url.indexOf("https://www.tprofile.co/images/widgety") > -1) { path = request.url.replace("https://www.tprofile.co/images/widgety", "") hiddenImageOrigin = "https://widgety-assets.s3.amazonaws.com" } else if (request.url.indexOf("https://www.tprofile.co/images") > -1) { path = request.url.replace("https://www.tprofile.co/images", "") } const imageURL = hiddenImageOrigin + path return fetch(imageURL, { cf: { image:resizingOptions } }); }

5. Once you have this setup we need to configure the domain/URL you want to use. Do this on the website by going to Worker Routes > Add Route and setting the desired URL. In our example that would be either images.tprofile.co/* or www.tprofile.co/images/* select the service created earlier.

6. Once you have this configured let TProfile know (if they haven't completed this work for you) and they will assign the custom domain to your account. You will then be able to specify width and height on the images e.g. https://www.tprofile.com/images/<url here>/image.jpg?width=100