vCore Digital
Back to blog
Cloudflare Images plugin setup

How to setup Cloudflare Images plugin

Instead of an intro

This article provides a comprehensive guide for setting up Cloudflare Images on WordPress, covering everything from connecting a site to Cloudflare through DNS configuration to plugin installation. The guide is structured to follow the natural setup sequence, though sections can be skipped if they don’t apply to your situation.

Offloading images? But why…

Offloading images to a CDN (Content Delivery Network) like Cloudflare Images provides several key benefits:

  1. Faster loading times: Images are stored on multiple geographically distributed servers, allowing visitors to download from the nearest location, reducing latency.

  2. Improved website performance: Offloading reduces server load, enabling your server to handle more traffic and requests overall.

  3. Scalability: CDNs can handle large traffic volumes and scale dynamically as your website grows, maintaining speed during traffic spikes.

  4. Cost savings: Reduced bandwidth and storage requirements on your own server lower hosting expenses long-term.

Many image optimization plugins use proprietary CDNs that add markup to larger provider services. Cloudflare Images stands out as one of the most affordable CDN options available. According to Cloudflare, “Images are priced at $5 per 100,000 images stored and $1 per 100,000 images delivered - with no egress costs or additional charges for resizing and optimization.”

First steps and preparation

Before the plugin can serve images via Cloudflare, complete these steps:

  1. Activate the Cloudflare Images service
  2. Create a Cloudflare API Token
  3. Configure the plugin
  4. Validate the setup is functioning

Cloudflare configuration

You don’t necessarily need a site connected to Cloudflare to use Cloudflare Images, but connecting your domain is required if you want to serve images from a custom domain.

Connecting a site to Cloudflare

Create a free Cloudflare account at https://dash.cloudflare.com/sign-up if you don’t have one.

Log into your Cloudflare dashboard and click “Add a Site” if your domain isn’t listed. Enter your second-level domain (e.g., example.com, not subdomain.example.com).

Select the Free plan (available at the bottom of plan options), which provides sufficient functionality for most websites.

Cloudflare will scan and import existing DNS records. Click “Continue” through the DNS records screen.

On the nameservers screen, copy the provided nameservers - you’ll need these for the next step.

Adding nameservers to your domain

DNS nameservers function as the internet’s phone book, mapping domain names to IP addresses. When you point your domain’s nameservers to Cloudflare, you enable Cloudflare services to function on your site.

For this example using GoDaddy (similar steps apply to other registrars):

  1. Log into your domain account
  2. Navigate to DNS Management for your domain
  3. Find the “Nameservers” section and click “Change”
  4. Select “Enter my own nameservers (advanced)”
  5. Paste the Cloudflare nameservers from the previous step
  6. Click “Save”

Return to Cloudflare and click “Done, check name servers” to complete the site connection wizard.

Cloudflare Account ID and API token

Cloudflare Images is a paid account-wide add-on service. Verify it’s active on your account by going to Manage Account > Billing > Subscriptions and confirming “Cloudflare Images” appears in your subscription list.

From the Images section in the left menu, copy your Account ID for later use.

To create an API token:

  1. Click your profile picture (top-right) and select “My Profile”
  2. Choose “API Tokens” from the left menu
  3. Click “Create Token”
  4. Select “Custom token” at the bottom and click “Get started”
  5. Name the token (e.g., “WordPress plugin”)
  6. Set permissions: Allow “Edits” on “Cloudflare Images” service
  7. Click “Continue to summary”
  8. Click “Create Token”
  9. Copy and save the generated token for plugin setup

Plugin setup

Install and activate the “Offload, Store, Resize & Optimize with Cloudflare Images” plugin from WordPress.org.

The plugin requires your Cloudflare Account ID and API Token stored in the wp-config.php file. Go to Media > Offload Settings and paste both credentials, then click “Save Changes.”

The plugin will attempt to write to wp-config.php directly. If your host prevents this (like Flywheel), contact support and request they add these defines:

define( 'CF_IMAGES_ACCOUNT_ID', '<Account ID>' );
define( 'CF_IMAGES_KEY_TOKEN', '<API Token>' );

Once configured, you can bulk upload all media library images using the “Upload” button, or offload individual images from the media library. Switch the media library to “List mode” to see each image’s offload status and click “Offload” to process individual images.

How to verify it’s working?

Verification involves three checks:

1. Media Library Status: Confirm images show “Offloaded” status in your media library.

2. Cloudflare Dashboard: Verify images appear in your Cloudflare Images dashboard with naming convention <site domain>/<media library path>, enabling easy tracking across multiple sites.

3. Page Source Code: Add an offloaded image to any page and inspect the HTML source. Images should display URLs from the imagedelivery.net domain.

You can also verify in the Network tab of browser developer tools that images are loading from Cloudflare’s domain. If you configured custom domains, imagedelivery.net will be replaced with your custom domain plus /cdn-cgi/imagedelivery.

Conclusion

This guide covers all necessary steps to implement Cloudflare Images on your WordPress site. For additional questions about the plugin, use the WordPress support forum or contact vCore Digital through their website contact form.