Configuring Cloudflare Mirage


Overview

Mirage image optimization is currently available for Pro, Business, and Enterprise level domains. It helps speed up image loading four key attributes:

1. Mirage analyzes your site visitor's connection and device type to automatically resize images on your site using JavaScript.

2. Mirage virtualizes the images, so a visitor on a poor connection will get a smaller version at a lower resolution until they can access a higher bandwidth connection. 

3. Mirage streamlines image requests so visitors can see optimized images immediately.

4. Mirage acts as a lazy loader and automatically turns all images into load-on-demand. Images on your site, including images from third party links, are not loaded until your site's visitor scrolls to their location. 

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

mirage_on.png

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 Mirage is enabled, you can use Cloudflare Page Rules to apply Mirage to specific pages or URLs on your site. To access and configure your page rules, go to the Page Rules app 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:

forcepreloadonly.png

Not finding what you need?

95% of questions can be answered using the search tool. This is the quickest way to get a response.

Powered by Zendesk