CloudFlare Integration

There are a few ways to integrate Imagizer with a website using Cloudflare. The first method is to install a Worker on your Cloudflare account, which automatically forwards all images to the Imagizer Service. There's no need for any modification to the site. This method is the easiest to set up.

The second method, which will reduce costs by migrating all image traffic away from Cloudflare, and take advantage of Imagizer's partner CDN, involves modifying the website. This method is the most affordable but more involved.

CloudFlare Worker Method

We provide a quick installation using a command-line tool. We recommend this method if you have an understanding of the command line. However, if you do not feel comfortable using the command line, the worker may be installed through the Cloudflare Dashboard.

Install from Command Line

Please visit the Imagizer Cloudflare Worker Github pageopen in new window for installation instructions.

Install from Dashboard

Follow the steps below to install the worker.

Demo Video

Steps

  1. From your Cloudflare Dashboard, navigate to the Workers page.
    • Choose your site.
    • Click the Workers icon towards the top of the page.
    • Click the Manage Workers button.
  2. Create a new worker
    • Click the Create Worker button.
    • Replace the script in the new worker with our Worker Scriptopen in new window.
    • Click the Save and Deploy button towards the button of the screen.
    • Navigate back to the newly created worker's setting page.
  3. Add your Imagizer Source Domain.
    • Click the Add Binding button.
    • Enter the variable name IMAGIZER_ENDPOINT.
    • Add your Imagizer source endpoint in the value field. (ex: https://example.imagizer.com)
    • Click Save.
  4. Optionally, rename the worker.
    • Click the Rename Worker button.
    • Enter a new name.
  5. Scroll down and review the Usage Models sections.
    • Most likely, you'll need to switch to Pay-as-you-go.
    • Workers are relatively affordable.
  6. Add a route to the new work.
    • Navigate back to the initial Workers page from the main dashboard.
    • Click the Add Route button.
    • Enter a route that matches your images. (ex: *example.com/product-images/*)
    • Select the worker you just created from the dropdown box and press save.

Congratulations! Your images are now optimized through Imagizer.

Modify Website Method

This method requires the changing of image links on your website. For example, if your images are served from https://example.com:

  • https://example.com/images/flower1.jpg
  • https://example.com/images/flower2.png
  • https://example.com/images/flower3.gif

You will need to replace all the image domains with either the given Imagizer Source domain or a custom domain of your own. The process of modifying websites vary depending on the website platform or framework. Reach out to our support for help. supportopen in new window for help.

Imagizer Domain

Using Imagizer's provided domain is the easiest option. See our documentation for generating an Imagizer Source Domain hereopen in new window.

Example image links using Imagizer domain

  • https://9j1xqrop.imagizer.com/images/flower1.jpg
  • https://9j1xqrop.imagizer.com/images/flower2.png
  • https://9j1xqrop.imagizer.com/images/flower3.gif

Custom Domain

Using a custom domain is desirable for appearance.

Currently, CloudFlare does not support custom domains pointing outside their services. However, we can set up a custom domain of your choosing on our end. First, set up an Imagizer Source by following the docs hereopen in new window.

Then reach out to our supportopen in new window and provide us with your newly created Imagizer Source domain and the custom domain you wish to use. We'll take care of the rest.

Example image links using a custom domain

  • https://images.example.com/images/flower1.jpg
  • https://images.example.com/images/flower2.png
  • https://images.example.com/images/flower3.gif
Last Updated:
Contributors: Nicholas Pettas