Serving Images From Multiple CDNs In WordPress

Serving Images From Multiple CDNs In WordPress

Thanks for WordPress flexibility and it’s hundreds of filters and action, it is possible to serve images from Multiple CDNs with completely different URL structures. If you are wondering why would anyone do this think about the following scenario.

You were a customer of CDN A and you moved your Website to WP Engine (Very smart move, I highly recommend them). Now that you are on WP Engine, you want to take advantage of their CDN service but you have so many images and files on CDN A that it would be impossible to migrate it over to WP Engine over night. What if you have a contract that expires a few months in the future but want to start uploading to the new CDN right away so when the time comes you have less files to transfer.

WordPress’ Filters To The Rescue

It is possible to dynamically change the image source dynamically using WordPress’ filters. Two filters to be exact. Since you have been uploading all your images and files to CDN A, WordPress is generating a guid for every image at the time a new image gets uploaded. This field will allows to compare old CDN urls to new CDN URLs and rewrite the URLs on the fly, but only when needed.

Rewriting the Main Image Source

You may be wondering why is necessary to rewrite the URL since the GUID says it’s somewhere else. The reason is because WordPress doesn’t actually use the GUID field to generate the URL to the image. It uses the default settings from your environment. You can take a look at your current settings by printing the contents of wp_upload_dir().

$upload_dir now contains something like the following (if successful)

wp_upload_dir() Key => Value Descriptions

  • [path] – base directory and sub directory or full path to upload directory.
  • [url] – base url and sub directory or absolute URL to upload directory.
  • [subdir] – sub directory if uploads use year/month folders option is on.
  • [basedir] – path without subdir.
  • [baseurl] – URL path without subdir.
  • [error] – set to false.

Rewriting Image Srcset

Next do the same for responsive images and their different srcset(s). The approach is almost identical but we of course we use a different filter for that.

There you have it. Now you can serve images from different CDNs and URLs. Your situation is probably unique but the filters and approach to solving this problem might follow similar steps. Please do comment below if you have any questions or found these snippets useful to you.

Published by

Yojance Rabelo

To me, WordPress is a system to which versatility and power come naturally. Over the last thirteen years of my life, I have seen WordPress evolve from a simple blogging platform into the leading CMS that powers more than 27% of the Internet. My experience is broad, ranging all the way from writing WordPress plugins to creating WordPress themes based on PSD files. I am a master of developing and deploying membership sites powered by WooCommerce, WooCommerce Memberships, and WooCommerce Subscriptions.