Configuring Cloudflare Mirage

Learn how configure Cloudflare Mirage.

• Overview
• Image formats compatible with Mirage
• Enable Mirage
• Test Mirage

---

Overview

Mirage image optimization is currently available for Pro, Business, and Enterprise level domains.

It accelerates image loading by:

• Automatically resizing images using Javascript (by analyzing visitor connection and device type)
• Virtualizing images, so visitors on poor connections get a smaller version at a lower resolution until they can access a higher bandwidth connection
• Streamlining image requests, so visitors can see optimized images immediately
• Acting as a lazy loader, turning all images into load on demand

Mirage, like Rocket Loader, is a feature that is applied to a customer's website through client-side javascript. This means we modify the HTML response and insert the javascript code for the browser to execute, which is how the optimization is applied. This also means disabling Mirage is not done by disabling the feature by the path of the image (we don't apply any optimization on the server-side), rather it is done by disabling by the path of the page that loads the image (stopping the script from being inserted in the first page).

Read our blog post for more information on Mirage.

---

Image formats compatible with Mirage

Mirage will work with the following image formats:

• *.jpg
• *.jpeg
• *.png
• *.gif
• *.img

---

Enable Mirage

To enable Mirage image optimization for your domain,

1. Log in to your Cloudflare account.
2. Navigate to the Speed tab. 
3. Click the Optimization tab.
4. Scroll down to the Optimized Delivery section.
5. Toggle the Mirage switch to On.

If you send a CSP (content security policy) header that restricts where scripts can be loaded, you'll need to ensure ajax.cloudflare.com is enabled. For example, to allow scripts from your own domain and ajax.cloudflare.com enter the following: script-src 'self' ajax.cloudflare.com;

Once enabled Mirage will be active on the entire website.

You can use Cloudflare Page Rules to apply Mirage to specific pages or URLs only on your site. To access and configure your page rules, go to the Rules > Page Rules in the Cloudflare dashboard. 

---

Test Mirage

Mirage's features for Mobile Browser optimization are triggered based on high latency and poor network connections. You can test Mirage by making a request to your domain using a mobile user-agent string and one of the following flags with your domain in your mobile browser:

EXAMPLE.COM/?forcepreload

To run the pre-loader only and serve degraded images on the page enter:

EXAMPLE.COM/?forcepreloadonly

Here is an example where Mirage 2 is triggered by a ?forcepreloadonly flag. The notable image degradation is a sign that Mirage is working: