Top 6 Best Image CDN for WordPress

Large images can slow down your site.

This is why, if your blog has a lot of large images, it makes sense to host them separately on a 'image CDN (Content Delivery Network for images)' or a cloud storage service.

Benefits of hosting your images separately on a CDN or Cloud Server

The main advantage as mentioned earlier is increase in 'Page Speed'.

Because your images are hosted on a different server, your hosting server has less requests to deal with. The hosting server can output the HTML content on your site while the CDN takes care of loading the images.

This way, instead of a single server taking all the load, there are two servers that share the load.

In addition to this, if your CDN is good, your images load faster too. This is because, most 'content delivery networks' have servers located at various parts of the world and make use of the server closest to the user while serving images, resulting in faster delivery.

Yes, using a 'image CDN' costs money, but you get far more bandwidth and faster speeds at a relatively lower cost.

Also, there are many CDN services that offer a free tier. If your storage and bandwidth demands are not too high, you could totally take advantage of the free tier.

Top 6 image CDN for WordPress

Here are the best five 'image CDN' services that you can use with WordPress.

1. Cloudimage

Cloudimage is an Image CDN that provides cloud-based storage and on-the-fly image optimization, delivering compressed, pixel-perfect, responsive images worldwide at lightning speeds.

What this means is that other than storing your images on the cloud with Cloudimage, they offer unlimited image transformations. You’ll also get to automate image optimization on upload, crop, resize, compress, and add filters and watermarks. 

With Cloudimage WordPress plugin, look forward to lighter images and faster sites, improving your website’s Core Web Vitals!

Using Cloudimage with WordPress

The Cloudimage WordPress plugin allows you to resize your images and accelerate your website with little to no development. All you have to do is to follow the steps below to enjoy fast and responsive images. 

How does it work?

Once you’ve installed the plugin on your WordPress site, your original images will be downloaded from your storage, resized and optimized by Cloudimage and distributed over CDN. The WordPress image URLs will then be replaced with Cloudimage URLs.

A basic Cloudimage URL will look like this:

//token.cloudimg.io/original_image_url?operations&filter

token	Your Cloudimage customer token. You’ll get one when you sign up for a free account
original_image_url?	Your original image URL
operations	Image manipulation operations like width, height, crop, fit, rotate, trim.
filter	Use filters like contrast, pixellate, blur, greyscale and sharpen to apply different effects on your image.

Follow these steps to install and activate the Cloudimage WordPress plugin:

Step 1: Create a free Cloudimage account

Step 2: Login to your WordPress dashboard

Step 3: On the admin sidebar, navigate to Plugins > Add New

Step 4: Enter ‘Cloudimage’ in the search field, install and activate our plugin

Step 5: Navigate to the Cloudimage admin page and enter your Cloudimage token which you’ve received from your registration

Once you’ve done that, the plugin will begin to resize and deliver your images via Cloudimage

Read here for an in-depth guide plus options for advanced settings.

2. Cloudinary

Cloudinary is a cloud based storage engine and a CDN for images and videos.

In other words, you can store your images on Cloudinary and it will serve your images using its distributed network of servers resulting in faster delivery.

In addition to storing your images, Cloudinary also allows you to add transformations to your images like image resizing, changing formats, compression/optimization and adding effects to name a few.

If this was not enough, Cloudinary can automatically serve the best image format (that loads faster with best image quality) depending on the image content and browser used to access the image. For example, it will automatically serve 'WebP' format images on Chrome browsers as Chrome supports this format. Formats like 'WebP' support superior compression and hence the images load super quick.

As far as image optimization goes, Cloudinary automatically optimizes your images on upload, but you can apply further compression to the images using the various options and Add-ons. For example, you can serve optimized JPEG images using the JPEGMini Add on.

Using Cloudinary with WordPress

Cloudinary has a great WordPress plugin that is super easy to use.

Once the plugin is installed, you can easily upload your WordPress images to their cloud. You can even 'bulk upload' existing images and the plugin will take care of changing the 'HTML image source' of the images within your WordPress posts/pages.

Here's an example:

If your image source URL looked as follows:

<img src="https://sitename.com/wp-content/uploads/2017/07/my-pic.jpg">

It will be changed to the following once you upload the image to Cloudinary:

<img src="http://res.cloudinary.com/sitename/image/upload/v1500609523/my-pic.jpg">

Once the image is uploaded to Cloudinary, you can add all kinds of transformations to the image as mentioned earlier.

Here are some rough steps on how to use Cloudinary to host your WordPress images:

Step 1: Install and activate the Cloudinary WordPress plugin.

Step 2: In your WordPress dashboard, go to 'Cloudinary > Settings' and add the API Code. You can get this code from the Cloudinary Dashboard.

Step 3: Go to your WordPress Media Library (Media > Library), arrange the images by 'List View' and select all images that you wish to upload to Cloudinary. Select 'Upload to Cloudinary' from the 'Bulk Actions' drop down and click 'Apply'.

Your images will now start loading from Cloudinary. Any image URLs (HTML image source) within your WordPress posts/pages will automatically be changed as mentioned in the earlier example.

Step 4: To upload new images, you can directly upload the image to Cloudinary by going to 'Cloudinary > Media Library > Upload' or upload them as usual to your 'WordPress Media Library' and then upload them to Cloudinary.

Step 5: Once the image is uploaded to Cloudinary, you can go to 'Cloudinary > Media library' from within your WordPress dashboard or login to Cloudinary.com, to add transformations to the images if you want. These include, resizing the image, adding effects, optimizing the image and more.

Step 6: To insert an image in your posts/pages, simply click on the 'Cloudinary Upload/Insert' button that appears in your 'Add New Post' and 'Edit Post' screens.

You also have the option to add an image from your 'WordPress media library' if you do not want to use Cloudinary for some images and want to load the image from your own server instead.

• Click here for an in-depth beginner's guide to using Cloudinary with WordPress

3. Using Amazon S3 Bucket & Cloudfront

Another free option is to use 'Amazon web services (AWS)'.

You can use 'Amazon S3' (which is a cloud storage engine) to store your images and use 'Amazon Cloudfront' (which is CDN) to serve images. Because Cloudfront is a CDN with a wide network of distrusted servers, your images will load much faster.

Using S3 and Cloudfront with WordPress

There are many free WordPress plugins that can be used to integrate AWS with WordPress.

Here are some rough steps on setting up Amazon S3 and CloudFront for your WordPress blog:

Step 1: Create a AWS (Amazon Web Services) account by going here: https://aws.amazon.com/. (Requires you to enter credit card information and verify phone number.)

Step 2: Once the account is created, login to AWS and go to 'Amazon Simple Storage Service (S3)' from the 'Products' link located in the header section.

Step 3: Once in S3, create a folder (known as a 'Bucket') to store your images by clicking on the 'Create a bucket' button.

Step 4: Go to Amazon Cloudfront from the 'Products' link, and set-up cloudfront to serve the 'S3 bucket' that you created earlier.

Step 5: Go to Amazon's 'Identity and Access Management (IAM)' console and create a user account that can access your 'S3 Bucket'. Copy the 'access keys' (Access ID Keys and Secret Access Key) for the user.

Step 6: Login to your WordPress account and install and activate the AWS WordPress plugin. This plugin will connect your WordPress account to your 'Amazon S3 Bucket' (that you created in Step 3).

Step 7: After activating the plugin, go to 'AWS > Access Keys' and add your 'Access Key ID' and 'Secret Access Key'.

Step 8: Next, you need to install and activate the S3 lite WordPress plugin. This plugin will automatically save images that you upload to WordPress (via media library) to your Amazon S3 bucket.

Step 9: Check your S3 Bucket to ensure that the images are being uploaded properly.

• Here is a complete step by step tutorial on how you can achieve this.

After activating the S3 lite plugin, when you upload a new image to your WordPress Media Liberary, the image URL will automatically change to the Cloudfront URL.

Here's an example:

If your image source looked as follows:

<img src="https://sitename.com/wp-content/uploads/2017/07/my-pic.jpg">

It will be changed to the following once you upload the image to Cloudinary:

<img src="https://c4u9gwcg59n4.cloudfront.net/wp-content/uploads/my-pic.jpg">

If in-case, you decide to stop using AWS you can uninstall the plugin and 'image URLs' will change back to original WordPress URLs.

4. Site Accelerator (Photon) by Jetpack

Jetpack is a popular plugin released by Atomattic - the company behind WordPress. So you know it is reliable.

The plugin installs a whole host of functionalities to your WordPress blog including, secure login, analytics, ajax comments, downtime monitor, spam protection, site back-ups, social share buttons, related posts, image optimization and more.

Using photon with WordPress

Photon is already activated when you install the Jetpack plugin.

Here are the steps to install and activate Jetpack and photon:

Step 1: Login to your WordPress account and install and activate the JetPack Plugin.

Step 2: Click on the 'Connect to WordPress.com' button. (You will need to create a free WordPress.com account to use this plugin)

Step 3: Enter your email address, username and password and sign up with WordPress.com. (You will need to click on the confirmation link sent to your email).

Step 4: Once your site is connected, you will be taken to the 'plan select' page. Select the 'Start with free' plan. This plan is free for life.

Step 5: Once you select the plan, you will be reverted back to your WordPress dashboard.

Step 6: 'Photon' is already activated by default. You can double check if this is activated by going to 'Jetpack > Dashboard', and click on the 'Settings' button. Scroll down to see if 'Speed up images and photos' is activated.

Once photon is active, all your images will now be automatically served from the WordPress server. This applies to both new as well as old images.

No change is made to the image URLs in your WordPress posts/pages. Instead, the image URLs are changed on the fly when a page loads.

If you check the HTML source of your images, you will find the image URLs contain 'wp.com'. Resized images will have the resize parameter added as follows:

https://i1.wp.com/site.com/wp-content/uploads/2017/06/sunflower.jpg 
https://i1.wp.com/site.com/wp-content/uploads/2017/06/sunflower.jpg?resize=150%2C150&ssl=1

5. Uploadcare

Uploadcare is a CDN-based media processing and content delivery platform. Uploadcare is primarily based around images, but supports other file types as well.

Uploadcare includes a file uploading network for storage, as well as on-the-fly AI-enhanced image transformations and processing capabilities. The advanced AI-enhanced features such as smart resize, and automatically detecting faces (in case you want to blur them, for example), can save your team significant time. 

Uploadcare uses it’s Adaptive Delivery system for image optimization. Adaptive Delivery can optimize to user context (screen size, browser, location, and other parameters). Optimization can also include lazy loading, smart compression, WebP, responsive images, and retina display support.

Pricing

Uploadcare offers a generous Free Tier, which includes 3000 uploads, 30 GB traffic, and 3 GB of storage per month. After that, Uploadcare’s pricing plan offers a flexible pay-as-you-grow option, allowing you to just pay for what you need. Uploadcare can also offer custom plans for large Enterprise clients.

Using Uploadcare with WordPress

Uploadcare’s WordPress plugin bypasses many of the limitations imposed by the WordPress Media Library.

Here’s an example:

If your image source looked as follows:

<img src="https://sitename.com/wp-content/uploads/2017/07/my-pic.jpg”>

It will be changed to the following once you upload the image to Uploadcare:

<img src="https://ucarecdn.com/1bdd4daf-282d-428f-a563-bb217f0eeda9/UC_logo.png”>

Here is a brief guide to installing the Uploadcare WordPress plugin.

Step 1: Login to your WordPress site. https://yoursite.com/wp-admin

Step 2: Go to Plugins, then Add New. Search for the official Uploadcare plugin, you then need to proceed to Install and Activate the plugin.

Step 3: For this Step you will need to get the Uploadcare API keys from your Project’s Dashboard. In your WordPress go to Settings then Uploadcare. Paste in your API keys into the appropriate fields. You will need both your Public Key, and Secret Key for this.

After this you will be able to use the Uploadcare WordPress plugin - image uploads will be stored on Uploadcare. For more information please see the documentation https://uploadcare.com/docs/integrations/wordpress/#wordpress-file-uploader-and-adaptive-delivery-plugin

6. Publitio

Publitio offers a host of Digital Asset Management services and they have a solution specially catered to WordPress users.

To make things easier, they have a dedicated WordPress plugin called Publitio Offloading which you can download from the WordPress Repository.

The plugin allows you to easily offload and deliver all your media from their cloud. You have the option of keeping a copy of the media locally and a copy on their cloud. Publitio automatically optimizes your images and also supports URL-based transformations that allow you to easily scale your images, add tags, add watermarks and a lot more.

The best part is that Publitio has a free tier where you get 10GB of storage space and 20GB of bandwidth free every month. The paid tiers are very affordable too and start at $29/month for 50GB of space and 200GB of monthly bandwidth.

Also, Publitio is offering an amazing Black Friday sale that you can check out here.

Now comes to big question. Which one of these options should you be using? All four options are pretty good and have their own set of advantages and disadvantages. Choose your option weighing in all these factors. You can also experiment with all four of them and then choose the one the best fits your needs.