Top 6 Best Image CDN for WordPress

Image server

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 CDN

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!

Price range:Cloudimage has one of the most competitive image CDN offerings. Its free plan offers 25 GB for each - image cache and CDN traffic every month - charging $1 per GB overused; generous and definitely sufficient for any small to medium-sized WordPress site. The paid plan starts from $29/month, upgrading the image cache to 40 GB and CDN traffic to 60 GB monthly.

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.

Pros and Cons

Pros:

  • Free tier with unlimited images and transformations for life
  • Paid plan is fair and transparent 
  • Offers cloud storage and CDN acceleration
  • Image optimization 
  • Adds lazyloading and progressive loading effect to images
  • On-the-fly image optimization with no modification of origin images
  • No permanent changes effected on WordPress sites and origin images. Desactivation reverts images back to before activation of the plugin
  • Option to remove API versioning in URL
  • Allows you to switch to Javascript responsive plugin enabling lazy loading and progressive loading.
  • Advanced settings available for finer control of the plugin’s behaviour. For example, you can choose to skip optimization for certain files like favicons

Cons:

  • Option for custom CName only available for paid plans

2. Cloudinary

Cloudinary image CDN

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.

Price range: Cloudinary offers a free tier which gives you 2 GB of storage and 5 GB of bandwidth/month which is pretty good. You are allowed to host up to 75,000 images!The paid plan starts at $10/month which gives you 4 GB of storage and 10 GB of bandwidth.

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.

Pros of using Cloudinary

  • Offers a free tier that is free for life.
  • Offers the dual advantage of Cloud storage along with a CDN.
  • Easy to use WordPress plugin that allows you to bulk upload images to the cloud.
  • Works well with image optimization plugins like TinyPNG.
  • Option to use images from WordPress Media Library or from Cloudinary. For instance, you can load the smaller images directly from your server and the larger images from Cloudinary.
  • Option to compress/optimize the image even further after uploading.
  • Option to load the best format of the image based on the image content and browser type.
  • Supports latest web formats like WebP and JPEG-XR.
  • Supports compression of animated PNG images.
  • Allows you to watermark your images if required.

Cons of using Cloudinary

  • Custom URLs are available only in the pro version.

3. Using Amazon S3 Bucket & Cloudfront

Amazon s3 bucket

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.

Price Range: Both 'Amazon S3' and 'Cloudfront' are free for the 1st year. For Amazon S3, you get 5 GB of storage and 15 GB of bandwidth/month. For Cloudfront, you get 50 GB bandwidth free.This is of-course only for the 1st year. From the 2nd year onward, the charges are pretty nominal.

Even if your bandwidth requirement is around 50 GB/month, you will not be spending more than $5/month. For Cloudfront, if your monthly bandwidth requirement is around 50 GB, you will not be spending any more than $10/month.

So a total of $15/month.

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.

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.

Pros of using Amazon S3:

  • Free for the first year and pretty cheap from the 2nd year onward.
  • Pay only for the resources used.
  • Fast image delivery using CDN.
  • Good WordPress plugins available to transfer your files to the S3 cloud.
  • If you decide to stop using Amazon to serve your images, you can simply deactivate the S3 lite plugin and your images will start loading from your server. No other changes are required.
  • You have the option to use custom URLs - in other words, you can serve the images under your own domain name.

Cons of using Amazon S3:

  • The free version of 'S3 lite' does not support uploading existing images to Amazon S3. All new images that you upload are added to S3 automatically but you will need to get the pro version to upload existing images. But there is a workaround to this that I discuss in this article.

4. Site Accelerator (Photon) by Jetpack

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.

Price range: This service is completely free.

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

Pros of using Photon:

  • Super easy to use, no configuration required. Works out of the box and serves both new as well as existing images from the WordPress server.
  • Free for life.
  • Works well with image optimization plugins like TinyPNG.
  • Automatically serve all images (existing as well as new) from the WordPress CDN.
  • Easy to uninstall. Once uninstalled, all images will load from your server.

Cons of using Photon:

  • Standalone plugin not available. Requires you to install the Jetpack suite which comes with a whole host of added functionalities some of which are added without permission. You will then need to visit the settings page and disable functionalities that you do not require.
  • Images once added to WordPress server cannot be deleted. In other words, even if you delete the image from your WordPress media library, the images will still be accessible from the WordPress server. So if privacy is a concern, stay away from photon.

5. Uploadcare

Uploadcare CDN

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

Pros of using Uploadcare

  • Free tier for life
  • Cloud storage with CDN
  • Official WordPress plugin
  • AI-enhanced image transformations
  • Image optimization
  • Support for most image formats
  • Support for adding files from different sources

Cons of using Uploadcare

  • No support for Azure storage
  • Doesn’t support text overlays

6. Publitio

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.

 
 
 
 

Comments

  1. Ingwar says:

    You forgot Sirv - https://wordpress.org/plugins/sirv/
    They have a decent WordPress plugin unlike Cloudinary...

  2. Kanyi says:

    I just activated Jetpack's Photon. Let's see how that goes. Will update with my feedback in a few days.

  3. Lorry D says:

    Then there is ImageEngine. Also with a WordPress plugin: https://wordpress.org/plugins/image-cdn/
    This plugin can also be used to rewrite URLS for other CDNs, btw.

  4. Dean says:

    Optimole another option -
    Pros: totally unlimited storage size, multiple domains and sites. Easy offload of media from your server to save size.

    Cons: Bad Platform interface when finding photos. Naming can be an issue when same named files are used. Sometimes wrong images load. Ill be curious to see how other platforms handles this.

  5. Matthew says:

    Jetpack is what I have used and I'm currently using and it seems to be working fine. But what do you also think about CDN networks like Amazon CloudFront?

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.