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

• Why should you use an image CDN?
• Sign up for a free Cloudinary account.
• Create a Cloud Name.
• Create a new folder within your Cloudinary Dashboard for Auto upload mapping.
• Input the URL prefix of your WordPress media folder.
• Download the Auto Cloudinary Plugin.

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.

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.

Select Upload Settings

After selecting the uploads tab, scroll down to Auto Upload Mapping 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. 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.

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. 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.