Images are the most important form of content whether you’re running a company site, an ecommerce site or even your own personal blog. According to a study, articles with images get 94% more total views than articles without images.
While images are important, it’s often the main cause for slow loading websites. Optimizing images aren’t an easy feat.
Sure you could install a plugin to optimize your WordPress images. Yes, you could upgrade your server for more bandwidth and faster performance. But what if you could manage your images on the cloud for even better performance?
What’s Image CDN?
Image CDN is a cloud-based service that provides end-to-end image management and delivery. It’s smart enough to know the best version of an image and serve that automatically. Think of it as CDN built specifically for images. Hence, the name — Image CDN.
Before we dive deeper into image CDN, you need to know why your most important assets could bring the biggest performance drawbacks. It eventually hurts your SEO.
There are few reasons images are slowing down your website:
- Incorrect image size and format.
- Too many HTTP requests.
- Lack of server bandwidth.
- Lack of server storage.
While some of the issues above are related to the image file directly, others might be caused by cheap and slow shared hosting providers.
With image CDN, you’re not only leveraging on the CDN’s distribution networks for faster and more efficient images delivery. But also their technology to optimize image quality, file size and most importantly image format for your audience.
In this post, I’m going to show you how to manage your WordPress images with Cloudinary.
Why Cloudinary?
It’s the only image CDN that provides a free plan and you could grow your usage when you shared it on social media.
With the free plan, you’re entitled to 25 monthly credits.
1 credit allows 1,000 image transformation or 1GB managed storage space or 1GB bandwidth. Plenty to get you started.
What’re Cloudinary’s Key Features?
URL based image transformation: Like other image CDNs, Cloudinary supports URL based. To see it in action, we’re going to the demo image from Cloudinary.
Original image URL: https://res.cloudinary.com/idemo/image/upload/sofa_cat.jpg
Transform image URL: https://res.cloudinary.com/idemo/image/upload/c_fill,e_sharpen:200,g_faces,h_247,w_355/sofa_cat.jpg
You’ll get a smaller image with sharpening effect.:
Take note on the added parameters on the URL “c_fill,e_sharpen:200,g_faces,h_247,w_355”, this basically inform Cloudinary to do the following tasks:
- c_fill: Crop the image
- w_355 and h_247: Resize it to 355px * 247px
- g_faces: Focus on the detected face (don’t ask me how but Cloudinary is smart enough to detect faces
- e_sharpen:200: Sharpen the image by 200
Automatically adjust compression quality: Compressing images quality and encoding settings could reduce file size significantly without causing degradation in quality. Cloudinary takes care of that for you. Its algorithm would find the optimal balance and produce the best image while minimizing the file size. You could enable this by adding “q_auto” on the image URL.
Automatically select the best format: Google introduces Webp — a modern image format that provides superior compression resulting in smaller file size. Unfortunately, it’s only supported by Chrome. Simply append “f_auto” on the image URL and let Cloudinary do the hard work. Cloudinary will detect user browsers and deliver the most efficient image format for each image automatically.
As you see, the image is manipulated and delivered on-the-fly.
Setting Up Cloudinary
Head over to Cloudinary and sign up for a new account. Cloudinary will pre-assign you with a cloud name. Edit it and use your website or domain name for easy reference.
On your dashboard, you should be able to view your Cloudinary URL in the Environment Variable. Click “Reveal” and “Copy to clipboard”.
This is all you need to connect your WordPress site to Cloudinary.
Setting up WordPress with Cloudinary
Install Cloudinary Plugin
Login to your WordPress site. Go to Plugins > Add New. Find the official Cloudinary plugin.
Once installed and activated, simply enter your Cloudinary URL on the plugin’s setting. That’s all you have to do.
Uploading Image to Cloudinary
There are two ways you could upload images to Cloudinary. First, you could go to Cloudinary > Media Library.
Simply drop the files to upload images to your Cloudinary library. You could also specify a folder before you uploaded the image.
Second, if you’ve previously uploaded your images to your WordPress’ media library, go to Media > Library, and click “Upload to Cloudinary” to Cloudinary. Make sure you’re on the “List” mode.
The image will be uploaded to your Cloudinary’s media library.
What’s good about this plugin is when you uploaded an existing image to Cloudinary, the plugin will update the URL of the image in a post to use the Cloudinary version automatically. The switch is seamless.
If for some reason, you want to load the image from your site directly, you could migrate away from Cloudinary and the image’s URL will be updated to use the local version.
Inserting Cloudinary Images
To insert images from Cloudinary library in a post, click the “Cloudinary Upload/Insert” button above the WordPress editor.
Once you select an image, you could select auto format and auto quality to fully harness the power of Cloudinary technology. You could further apply any image transformation by choosing the right options. You could resize, crop, add effect or watermark, and many more.
Choose “Auto” for both format and quality and let Cloudinary delivers the most efficient image to your audience.
Final Thoughts
Images are important assets to your content. With the trends now moving towards high-resolution images, these images account for a big chunk of your website load time. While optimizing images help to improve the performance, that’s only solving the problem at the tip of the iceberg.
Image CDN makes it easy for you to manage all your WordPress images on the cloud while optimizing the delivery of the images to your audience. With its WordPress plugin, integrating Cloudinary to your WordPress site is seamless — an easy performance optimization boost.
