How to Setup & Use Cloudinary Image CDN in WordPress

Today I’ll show you how you can Set up and use Cloudinary Image CDN in WordPress. The steps are very easy and simple to do and if you follow the steps properly then you will have Cloudinary Working and running on your website in just 5 mins.

Now for this tutorial i will be using the free tier of cloudinary which gives you 25Gb of Storage & 25Gb of Bandwidth. Which is more than enough for a small blog that gets around 10000 visitors per month.

You get all the things like media optimization tools and image cdn in the free tier so no worries about limited resources. If you have a bigger website then you can upgrade to their paid plan, which is definitely worth it for the price.

What is Cloudinary Image CDN?

How Cloudinary Image CDN works is that it serves the cached images of your wordpress blog or websites through their fast servers located around the globe.

Whenever someone requests for an image from your website, cloudinary servers caches it so next time someone requests for the same image again then instead of your web hosting providing the image the cloudinary cdn servers will provide the image from the cdn servers. 

This helps save tons of bandwidth for your website and also makes the loading of the images faster for all users around the globe despite your server location.

How to Setup & Use Cloudinary Image CDN in WordPress

Creating a Cloudinary Account

Okay, so the first step will be to create a Cloudinary account. Now first you will need to go to the signup page of Cloudinary – https://cloudinary.com/users/register/free 

In the Signup page enter your name, email, a secure password, select your country, enter your website name. After that in the product select “media optimizer and delivery”, Then click on create account.

select media optimizer in cloudinary

Now Cloudinary will send you an email on the email given in the signup form to verify, so open your email and click on the “Sign In to Validate your Email Address”.

After you click on the link you will be on the setup page. Here first you will need to select your “Role”, you can select whatever you want like you can select web developer, Tech Executive Etc.

After that you will need to now enter your cloudinary cloud name, which is basically the name of the url that our website’s content will be served from. Enter a unique name like your domain name or something else that you want. If it says name already taken then change the name.

set a cloudinary cloud name

Once done, select the server location. Which should be the closest region to your customers or visitors. Like if most of your visitors are from the USA then select the United States as the Cloud server. Click Finish when Done.

Configure Cloudinary

After you click on the Finish button, you will be redirected to the Dashboard of Cloudinary, Here click on the ‘Start Configuring’ button to start the Configuration process of Cloudinary Image CDN.

In the Configuration settings you will need to first enter a media source name. Enter any name like “cdn for my website’ or something. After that in Type select ‘Web Address’, scroll down.

Now in URL Base enter your Website URL. like ‘https://netmiko.com/’, if your website uses https then enter the https version of your url, if you don’t use https then enter http version of your url.

create media source in cloudinary

Click on”Create Media Source” to Continue.

Now Cloudinary will ask you to update your Website media urls from your domain name to the domain provided by cloudinary. Now to do that you will need to open your website admin dashboard in another tab.

configure media optimizer

Install and Setup CDN Enabler

Now in the wordpress admin you will need to install a plugin called ‘CDN Enabler’ for changing your website’s media urls.

To do that first go to Plugins > Add New, here in the search bar search for “CDN Enabler”, install and activate the plugin to continue. You can also download and upload the plugin from here – https://wordpress.org/plugins/cdn-enabler/.

Once the CDN Enabler plugin is installed and activated, go to its settings by going to “Settings > CDN Enabler”. 

In the CDN Enabler settings you will need to first enter the hostname, the host name is the domain name that cloudinary provided you with, go back to cloudinary configuration and copy the domain name you will need to add, after that paste it in the hostname.

hostname for cloudinary

NOTE: Only enter the domain name not url, like enter “example.com” not “http://example.com”.

After that below in the CDN Inclusions remove the default file extensions and enter these file extensions – .avif .gif .jpeg .jpg .mp3 .png .svg .webp (One per line)

In CDN Exclusions remove the default file extensions and enter these file extensions –  .js .json .mp4 .pdf .apk .css (One per line).

Once done scroll down and click on ‘Save Changes’ and Not “Save Changes and Validate Configuration’. Once it’s saved go back to your Cloudinary Configuration and click on Done to finish the Setup of Cloudinary Image CDN on WordPress.

Test Cloudinary Image CDN

Now to test whether cloudinary is working on your website or not you will have to go to your website, here right click any image in your site. Click on “Open image in a New Tab”.

Now if the image is loading through cloudinary then you will have cloudinary.net in the domain name of the image url, if there is no cloudinary.net in the url and it’s only your own domain name then it means cloudinary is not working.

image loading through cloudinary

Try to follow the steps again if that’s the case. If it’s working then it means your images are now loading through cloudinary and saving your website hosting bandwidth and cpu power.

Change Image Quality in Cloudinary CDN

Now by default the images that are served though cloudinary cdn are compressed to make it more optimized and make it load faster, now if you don’t want Cloudinary to do that and just want Cloudinary to serve the original images from the cdn this is how you can do it.

Go login to your Cloudinary account, here go to the settings icon at the top bar, then go to the Delivery tab in the settings.

In the Delivery settings, select the quality of the images that you want Cloudinary to use from the drop down. Select ‘Best Quality’ then click on Save Changes. That’s it, Cloudinary will now serve your website images at the original quality.

select image quality in cloudinary

And that is how you can Add Cloudinary Image CDN to your wordpress website and set it up for faster images that load through cloudinary cdn. If you need any help then comment below, thank you.

FAQ -

What are the Free Alternatives of Cloudinary Image CDN?

The best free alternatives for cloudinary are statically.io and Jetpack Photon. These Image CDNs are free without any limit on bandwidth. I have tutorials for how you can setup both statically and jetpack photon on my site so check them out if you’re interested – 

Does Cloudinary Image cdn makes your website faster?

Yes, the cloudinary image cdn does help in making your wordpress website faster by loading your images and media files through fast cloud servers.

As your images will now load through a cdn, the speed of your website will increase in return.

Leave a Comment

Your email address will not be published. Required fields are marked *