How to use jetpack image cdn without jetpack plugin

How to use Jetpack Image CDN without Jetpack plugin

Today I will show you how you can use Jetpack Image CDN without installing the Jetpack plugin. Jetpack image cdn helps in increasing the image load speed and making a site faster.

We will use a Custom PHP code with the CDN enabler plugin to use Jetpack CDN without Jetpack plugin.

Advertisement

Talking about a faster site, everybody wants a faster site. And when people talk about making a site’s loading speed faster, The first thing that comes to everyone’s mind is a powerful web hosting like a VPS or Cloud.

But what if I told you that you can get those god-like speeds using a shared hosting like HostGator shared hosting.

To achieve a very fast website the first thing you must do is to use CDN for your site’s images. Because images are bulky, it takes a lot of space and bandwidth which can lower the performance of your website.

Advertisement

If you look at our previous post that was “how to use statically cdn on a WordPress blog” then in that post I talked about how Image CDN has helped our site in reducing its bandwidth usage by almost 70%.

This means that if you use Jetpack Image CDN ( Formerly Photon ) and Regular CDN for static resources along with a cache plugin in your WordPress site then your site can easily handle thousands of visitors daily even on a shared web hosting.

So, what exactly is Jetpack Image CDN?

Advertisement

What is Jetpack Image CDN or Photon CDN?

Jetpack Image CDN or Photon CDN is a Content Delivery Network. This means that the images on your website will be stored in edge servers around the world and whenever a user requests for the image then the image will be served to the user from the edge server instead of your origin server.

The user will get the image from the closest edge server meaning that the user will be able to receive the image faster.

Jetpack Image CDN will help you a lot in lowering the resource usage of your website. Because the images will be stored in edge servers and also served from there.

Advertisement

And the best thing about Jetpack Image CDN is that it is free. and you can use it on your website without paying anything.

Now, let us see how we can use Jetpack Image CDN without using the Jetpack plugin.

Add Jetpack Image CDN without Jetpack plugin -

To start using Jetpack Image CDN on your site without the use of the jetpack plugin you will have to first download the CDN enabler plugin. This is a very lightweight plugin that will allow us to use jetpack cdn.

Advertisement

Note: Before you proceed further make sure you have the latest backup of your site. In case something goes wrong.

1. Now to start, first you will need to Log In to your admin dashboard. After logging into your admin dashboard you will need to go to plugins and then click on add new.

How to use Jetpack Image CDN without Jetpack plugin step 1

2. Here you will need to search for CDN Enabler in the search bar. Now click on install and after the installation finishes, you will need to click on activate which will activate the plugin.

Advertisement
How to use Jetpack Image CDN without Jetpack plugin step 2

3. The CDN Enabler settings can be found in settings>cdn enabler. Go to settings and then go to CDN Enabler.

How to use Jetpack Image CDN without Jetpack plugin step 3

4. Now here you will need to add the CDN hostname which is – i0.wp.com, i1.wp.com, i2.wp.com, i3.wp.com. You can use any one of them.

After that in CDN Inclusions you will need to add these – avif, gif, jpeg, jpg, mp3, png, svg, webp

And in CDN Exclusions you will need to add these – js, json, mp4, pdf, apk, css

How to use Jetpack Image CDN without Jetpack plugin step 4

After that scroll down and click on Save Changes. Don’t click on Save Changes and Validate Configuration.

Advertisement

5. Now after clicking on Save Changes. Go to Appearance>Theme Editor.

If you don’t see any theme editor option then you will need to download a file manager plugin which you can deactivate after finishing up Jetpack Image CDN setup.

How to use Jetpack Image CDN without Jetpack plugin step 5

6. Here, click on the functions.php file. Where we will need to add a piece of code to make the cdn work.

How to use Jetpack Image CDN without Jetpack plugin step 6

7. After clicking on the functions.php file you will need to scroll down to the bottom of the file and after you reach the bottom, here you will need to copy-paste and add the code given below.

Advertisement
// Jetpack image CDN START

add_filter( 'cdn_enabler_contents_after_rewrite', 'filter_cdn_enabler_contents_after_rewrite' );

function filter_cdn_enabler_contents_after_rewrite( $rewritten_contents ) {

    $rewritten_contents = str_replace( 'i0.wp.com/', 'i0.wp.com/example.com/', $rewritten_contents );
    $rewritten_contents = str_replace( 'i0.wp.com\/', 'i0.wp.com\/example.com\/', $rewritten_contents );

    return $rewritten_contents;
}

// Jetpack image CDN END
How to use Jetpack Image CDN without Jetpack plugin step 7

Here instead of “i0.wp.com”, you will need to add the CDN hostname that you gave in the CDN Enabler settings. And in the place of example.com, you will need to add your domain name.

After adding these things you will need to click on the update file. This will save the file and which means that your site will now deliver the images through Jetpack Image CDN.

8. To check whether it is working properly or not you will have to go to your site and then right-click on any image and then click on “Open image in new Tab”.

Advertisement
How to use Jetpack Image CDN without Jetpack plugin step 8

9. Here if the image URL is i0.wp.com or any hostname that you added then it means that Jetpack Image CDN is working properly.

How to use Jetpack Image CDN without Jetpack plugin step 9

If you see a broken image then recheck all the settings. Because you might have missed a step or typed something wrong.

Now if you face any problem while adding Jetpack Image CDN to your WordPress site then you can always use the Jetpack plugin. Which I don’t recommend because it’s a very bulky plugin. 

But if nothing works then you will have to use the Jetpack plugin eventually.

Advertisement

Add Jetpack Image CDN using Jetpack plugin -

To add Jetpack Image CDN using the Jetpack plugin you will need to first go to plugins>Add new and after that search for Jetpack here. Then click on install and after that click on Activate.

Now after activating the plugin the plugin will redirect you to its setup page where you will need to complete the steps to enable jetpack cdn.

Now here you need to click on “Setup Jetpack”. It will take some time and then display “Jetpack is activated!”. After that, on the top right corner, you will get an “x”. Click it.

Advertisement

To access the complete settings of jetpack we will have to click on the jetpack icon on the admin menu. And then click on settings.

In settings go to the performance tab. And after that scroll down a little and go to Performance & speed. Now here you will need to enable the “Enable site accelerator”.

And that’s it. It will enable the Jetpack Image CDN on your site. Make sure to disable other settings if you don’t want them.

Advertisement

And that’s how you can add Jetpack Image CDN to your WordPress site without using the Jetpack plugin. And also add it using the Jetpack plugin.

If you face any problem while setting up the Jetpack Image CDN then make sure to comment down below. If this post helped you to set up an image cdn in your WordPress site then make sure to share it with others that need it.

Play Video

4 thoughts on “How to use Jetpack Image CDN without Jetpack plugin”

  1. Thanks for this great tutorial introducing CDN Enabler with custom PHP code. After uploading images they are immediately cached in the CDN, and we don’t see any way to purge them from the cache after compressing using ShortPixel. How can we purge the larger images from the CDN cache?

Leave a Comment

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