Most websites contain images unless you’re Craiglist that is. And these images eat up a lot of bandwidth and slows down your site. You can optimize WordPress and minify JavaScript and CSS files all you want, but no other optimization technique has more of an impact than by reducing image sizes. And one of the most effective ways to make your images load faster is by using a CDN.
What is a CDN?
CDN or Content Delivery Network is a network of servers and data centers that are distributed globally. The main goal of CDN is to provide high-performance service with higher availability to end users.
How to Easily Set Up a CDN to Serve Images in WordPress
There are many ways to add CDN to a WordPress site. If you are looking for a complete CDN beyond just images, there are premium services for that. In this article, we will cover two ways to set up CDN for images on your WordPress site.
Using Pull zone feature with Premium CDN Providers
Step 1: Sign up a CDN Account with Pull Zone Feature
There are so many CDN service providers for WordPress, such like MaxCDN and KeyCDN. Sign up for any CDN provider that supports Pull Zones. Pull zone is a way to use CDN where you don’t have to upload your files to CDN server. CDN will automatically copy all your files from your server and act as a mirror of your server. Every CDN provider has their own settings to set pull zone. So you may have to consult with your CDN provider in this case.
Once you set the pull zone, you get a URL to access your file which looks something like this.
mk124.yourcdn.com/yoursite/
Generally, when you upload a new image to WordPress, the normal URL will look like this:
mysite.com/wp-content/uploads/image.jpg
However, you will automatically have the same image on the CDN server too. You can access the same image using the CDN URL which looks something like this:
mk124.yourcdn.com/yoursite/wp-content/uploads/image.jpg
By using this new CDN URL link on your website in place of the original, you can make the images on your website load much faster.
Step 2: Set your WordPress to automatically display files and images from CDN server.
You can automatically get WordPress to modify the images’ URLs so they reference the CDN server’s version, simply by adding a few lines of code to your theme’s functions.php file.
function my_cdn_upload_url() {
return 'http://mk124.yourcdn.com/yoursite/wp-content/uploads';
}
add_filter( 'pre_option_upload_url_path', 'my_cdn_upload_url' );
In the following code, you have to replace the CDN URL with your own. Once you save the function file, all your images will be served via the CDN server instead of your own. If you ever want to reverse the process then simply delete these code from the functions.php file.
Free CDN using Jetpack Plugin Instead
There is also a free solution to add CDN for images that exist for WordPress already. The solution is to use the Photon add-on by Jetpack plugin. Here are the three simple steps to do this:
Step 1: First, install a popular plugin called Jetpack on your WordPress
Step 2: Go to Jetpack > Settings, and then activate “photon”
Step 3: Finally, you have to set up your site to access the CDN. You can do this by logging in or creating a WordPress.com account.
Just check the Photon option to enable it. That’s it! Photon is an add-on that comes with Jetpack and is considered a basic, pseudo-CDN. It will automatically cache and store all your images.
You can also find some alternate free CDN services over at Cloudinary, CloudFlare and Incapsula.
Conclusion
CDN does not optimize or compress any image. If you upload a large size image it will still take a long time to load, even from a CDN, so make sure it’s properly sized. Form your end make sure you properly optimize the images before you even start thinking about CDN. We hope the article helped you with setting up CDN to serve images in WordPress.
About the Author:
This article was written by Jon Muller, founder of Ergonomic Trends and an avid technology enthusiast. Check out his popular 20-20-20 app to remind you to rest your eyes every 20 seconds while at work.
