How to Serve Dropbox images through a CDN in WordPress

Written by Aomi Bora in Blog

When we host our images on dropbox and then use those external images on our WordPress site then the loading time of those images is generally very high. It takes around 1 – 2 seconds for those images to load.

NOTE: You can use this method with any other image hosting service. Like for example- Google Photos.

Now having that high loading times for images in a blog is a very bad thing. Sometimes the user will just scroll past the image without even seeing it as it takes a long time to load. Also, it looks very bad when your image loading takes a long time.

On average the image loading time in a blog should be between 0.1ms to 0.4ms. If it’s more than that, then it’s considered a very poor performance which can also hamper the image of your blog. 

To fix that, what we can do is use an image CDN. An image CDN will cache our images on lightning-fast edge servers that will then be served to users at a very high speed. 

Although there are lots of Image CDN services out there, I will recommend you to use Statically Image CDN or Jetpack Image CDN as both of these are free to use and have no bandwidth limit. Meaning you can use these on high-traffic sites also.

Now, let’s see how we can Serve Dropbox Images through a CDN.

Here are the steps – 

  1. Install and Activate CDN Enabler
  2. Configure CDN Enabler settings
  3. Add custom PHP code 
  4. Get dropbox image link
  5. Add dropbox image without import

Install and Activate CDN Enabler Plugin –

You can easily serve images through a cdn in WordPress by using a Plugin called CDN Enabler.

To begin, first, Log In to the admin dashboard of your WordPress site. Now, we will need to install and activate the “CDN Enabler” plugin.

1. On the left menu of your admin dashboard, go to Plugins>Add New. Here in the search bar, search for “CDN Enabler”. Install and activate the plugin.

2. You can now Access the plugin settings by going to Settings>CDN Enabler.

Once the plugin is installed and activated we will have to configure some settings in the CDN Enabler plugin.

Configure CDN Enabler Settings –

Go to CDN Enabler settings from “Settings>CDN Enabler” in the Admin menu. After that follow the steps below.

Once you are in the CDN Enabler settings, you will need to add a hostname. The hostname is the domain name of the CDN service you are using. I’ll show you how you can do this using statically image CDN, which is a free service. 

You can see this post if you want to use jetpack image cdn instead – How to use Jetpack Image CDN without Jetpack plugin.

1. In the Hostname type ”cdn.statically.io”. Here cdn.statically.io is our hostname from where our dropbox images will be served through a cdn.

2. After that in the CDN inclusions remove the default file extensions add these file extensions – “.avif .gif .jpeg .jpg .mp3 .png .svg .webp”. Add these one by one per line.

add cdn inclusions in cdn enabler plugin

3. Now in CDN Exclusions we’ll add these file extensions – “.js .json .mp4 .pdf .apk .css”. After adding both inclusion and exclusion scroll down a little and click on Save Changes.

add exclusions in cdn enabler plugin

Okay, so the configuration of the plugin is done, now let’s add the custom PHP code in our WordPress theme to serve the dropbox images through cdn.

Add custom PHP code –

Now, for the plugin to serve the external images like dropbox images through the cdn we will have to add two pieces of code to our WordPress functions.php file.

The first piece of code will help in serving all the internal images which you uploaded to your WordPress site through cdn and the second code will help in serving all the images with the domain name “dl.dropboxusercontent.com” from cdn.

As you know that dropbox images are served through the domain name “dl.dropboxusercontent.com/s/k2ka1k3ahljs8re/cat1.jpg”

which we will rewrite to its cdn version like “cdn.statically.io/img/dl.dropboxusercontent.com/s/k2ka1k3ahljs8re/cat1.jpg”

If you want to know how you can host images on dropbox and use them on your WordPress site without import then check this post out – External images without import on WordPress.

1. Now, let’s add the custom PHP code to our WordPress site. First, go to “Appearance>Theme Editor” from your WordPress admin dashboard.

2. Here, click on the Functions.php file. After that scroll down to the bottom of the functions.php file.

3. After that copy the first piece of PHP code from below and paste it at the bottom of the functions.php file.

/* START IMAGE CDN */
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( 'example.com/', 'example.com/img/mydomain.com/', $rewritten_contents );
    $rewritten_contents = str_replace( 'example.com/', 'example.com/img/mydomain.com/', $rewritten_contents );

Here, in place of example.com add the CDN hostname which is “cdn.statically.io”. And after that in place of mydomain.com add your domain name.

4. Now, after that, add this second piece of PHP code below the first one. In this code, you can change the dropbox URL to any other image host that you are using. Like if you are using imgur.com then change “dl.dropboxusercontent.com” to “imgur.com”.

/* SERVE EXTERNAL IMAGES */
    if ( class_exists( 'CDN_Enabler_Engine' ) ) {
        $cdn_hostname = CDN_Enabler_Engine::$settings['cdn_hostname'];
        $rewritten_contents = str_replace( 'dl.dropboxusercontent.com/', $cdn_hostname . '/img/dl.dropboxusercontent.com/', $rewritten_contents );
        $rewritten_contents = str_replace( 'dl.dropboxusercontent.com/', $cdn_hostname . '/img/dl.dropboxusercontent.com/', $rewritten_contents );
    }
    return $rewritten_contents;
}
/* END IMAGE CDN */

Make sure to check everything, if the domain names are correct or not, and then click on “Update Files” at the bottom.

That’s it, the external dropbox images on your WordPress site should now load through the image cdn, instead of directly loading from dropbox. Also, the internal images of your site will now load through the image cdn instead of loading directly from your server.

You can also use this method to serve any other external images like google photos, Imgur, imgbb, etc. through a cdn on your WordPress site.

Continue Reading if you want to know how to use dropbox image on your WordPress website without importing it.

Get link of Image Hosted on Dropbox –

You cannot use the regular image link (www.dropbox.com/cat.png) of dropbox to embed an image into your WordPress website or anywhere else. To get the direct image link of the dropbox image follow the steps from below –

  1. Log in to your Dropbox account. Select the image that you want to embed to your website.
  2. Click on the three dots on the right side. Click on Share. 
  3. Now click on “Create Link”. After the link has been created, copy the link.

Now change the dropbox image link from “https://www.dropbox.com/s/k2ka1k3ahljs8re/cat1.jpg” to “https://dl.dropboxusercontent.com/s/k2ka1k3ahljs8re/cat1.jpg”.

All you need to change here is the domain name. From “www.dropbox.com” to “dl.dropboxusercontent.com”.

You can now embed this image link to your WordPress site using external media without import plugin.

Add the Dropbox image to your WordPress site without Import –

To be able to use external images like dropbox hosted images on your WordPress website you’ll need to install a plugin that will allow us to add externally hosted images to our WordPress website without importing it.

Meaning that all you need is the image link and then you can use that image on your website without storing it on your server.

To do that first go to Plugins>Add New. Here search for “External Media without Import”. Install and Activate the plugin.

install and activate external media without import plugin.

After activating the plugin you can add images to your media library by going to Media>Add External Media without Import.

Here paste the “dl.dropboxusercontent.com” image link and then click on Add. If you get an error “Failed to get info of the image(s).” Then below in the width make it “1280” and in height make it “720”. Then click on Add again.

add images in external media without import plugin

Once the image has been added successfully you can now use that image on anything like a logo, blog post, etc. The image will be found in the media library.

Conclusion –

After adding the dropbox hosted image to a post if we left click the image and then click on “Open image in new tab” then you’ll see that the image is loading through “cdn.statically.io/img/dl.dropboxusercontent.com/cat.png” instead of loading directly through the dropbox server.

image served through cdn

You might see the image loading a little slow at first but once it’s cached around the world, it will load at lightning-fast speeds.

If this post helped you than do share it with your friends. If you are facing any difficulty in loading dropbox images through a cdn then comment below or message me on Instagram. Thank You

Recent Content