How to Speed Up Your WordPress Site with a Free Cloudinary Image CDN

How to speed up your WordPress site with a free CDN from Cloudinary.

How to Speed Up Your WordPress Site with a Free Cloudinary Image CDN.
How to Speed Up Your WordPress Site with a Free Cloudinary Image CDN

In this tutorial, I’ll show you how to speed up your WordPress website using a free Cloudinary Image CDN.

Migrate all of your existing WordPress images Cloudinary in minutes using the Auto Cloudinary Plugin.

Table of Contents


Image CDN Benefits

Hosting many images within your WordPress site slows down your sites performance and increases bandwidth. An Image CDN makes the process of serving images as seamless as possible. It increases the speed of your website by offloading images and caching static content. Image CDN’s also interpret the screen size and resolution of the device, the DPI, as well as supported image formats. In addition, an image CDN is able to dynamically render a master image to correspond with the specifications of the device.

Create a Free Cloudinary Account

You’ll need to sign up for a free account, then input your company or site name that will become your cloud name.
Create a Free Cloudinary Account.
Create a Free Cloudinary Account.
The cloud name is important when we configure the Auto Cloudinary Plugin.
  • First, create a free account with Cloudinary.
  • Create a cloud name used to configure Auto Cloudinary Plugin.
Once your signed in, you’ll be able to view a custom dashboard with your account details.

Your Cloudinary account details include:

  • Cloud-Name.
  • API Key.
  • API Secret.
  • Environment Variable.

Create a new Folder within the Media Library

The new folder will be used to automatically serve your new and existing images from a Cloudinary Image CDN. If you have a large site with many images stored within your WordPress Media Library, using a CDN will increase the performance of your website immediately.

Configure Your Cloudinary Settings

Now, select the settings icon located on the top right of the page within your dashboard menu. Cloudinary Settings.

Select Upload Settings

After selecting the uploads tab, scroll down to Auto Upload Mapping settings.
Cloudinary Auto Upload Settings.

Input the Name of the Folder You Created

Since I created a new folder titled omaha-code-cdn, this will be used as the name of the auto upload mapping folder.

URL Prefix

Now, Input the URL prefix of your WordPress uploads folder. The URL Prefix will appear as the your domain name and wp-content/uploads/. As you can see, my URL Prefix appears as https://omahacode.com/wp-content/uploads/. Note: Replace with your own domain. “https://yourdomain.com/wp-content/wp-uploads/”

Download The Auto Cloudinary Plugin

Navigate back to your WordPress dashboard and select the Plugins tab. Click Add New Plugin, then type “Auto Cloudinary” into the search bar. Upload Auto Cloudinary Plugin. You may have noticed that Cloudinary also created an official plugin. I prefer the Auto Cloudinary plugin because it’s much easier to setup.

Auto Cloudinary Plugin Benefits

The official Cloudinary Plugin is somewhat of an overkill, and takes over the user interface of your image admin within WordPress. Auto Cloudinary Plugin has also been tested with the latest WordPress Update, and the official Cloudinary Plugin is untested with the latest WordPress Update.
  • Super simple and light-weight.
  • Totally seamless and out of the way.
  • A flexible tool for WordPress developers.

Under Tools, Select the New Cloudinary tab

Within your WordPress Dashboard, select Tools > Cloudinary. Under Tools, Select Cloudinary Tab.

Configure Auto Cloudinary Options

Input your Cloud Name and the name of your auto mapping folder. My Cloud Name is Omaha-Code, and my auto mapping folder is omaha-code-cdn. Image CDN Configuration. Choose “Automatically use Cloudinary for all Images” to create a super easy Auto-Upload feature in the Fetch API. This plugin tells Cloudinary where to find the files on our server (or on S3 or anywhere on the Internet), and it automatically downloads it from there,  thus saving it on to it’s servers the first time you ask for it, like a CDN would!

Done.

Now Cloudinary will automatically fetch and serve the images from your WordPress media library using a Cloudinary Dynamic File name.

Cloudinary Auto-Upload for WordPress

View the github repository here.

Cloudinary Auto Upload Tutorial

Once an image has been auto-uploaded from the remote location, all requests for the image will reference the image stored in your Cloudinary account.

This feature supports all resource_types (image, video and raw).

Image CDN Cloudinary and WordPress.
Cloudinary Image CDN Tutorial Background.

Cloudinary’s Media Developer Experts

As a Cloudinary MDE, I’ve received 2 days of first-hand training from Cloudinary software engineers.

Cloudinary Expert Neil Humphrey