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 page for installation instructions.
Install from Dashboard
Follow the steps below to install the worker.
Demo Video
Steps
- 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.
- Create a new worker
- Click the
Create Worker
button. - Replace the script in the new worker with our Worker Script.
- Click the
Save and Deploy
button towards the button of the screen. - Navigate back to the newly created worker's setting page.
- Click the
- 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
.
- Click the
- Optionally, rename the worker.
- Click the
Rename Worker
button. - Enter a new name.
- Click the
- Scroll down and review the
Usage Models
sections.- Most likely, you'll need to switch to
Pay-as-you-go
. - Workers are relatively affordable.
- Most likely, you'll need to switch to
- 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. support for help.
Imagizer Domain
Using Imagizer's provided domain is the easiest option. See our documentation for generating an Imagizer Source Domain here.
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 here.
Then reach out to our support 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