Within this guide, you will learn about Image CDNs, what they do, how you can make use of one, and more importantly, which service should you make use of within your application!
Images will typically be responsible for over 60/70% of your overall page weight. This means that optimizing your images correctly can be the easiest way to improve your overall web vitals.
In terms of Image CDN services, there are many services available within the marketplace, including Cloudinary, CloudFront, Akamai, Amazon CloudFront, Fastly, KeyCDN, ImageKit. and CDN77.
Instead of giving you a dose of paralysis analysis by trying to review everything regardless of your tech stack, instead, we will focus on Javascript developers. This is why within this article, I have filtered this list down to Netlify, Cloudflare, Cloudinary, and Vercel. Carry on reading to learn what each service offers and why and where you should consider using each service, however, before we get there let's consider Image CDNs!
Javascript Applications And Image Optimization Introduction
We will kickstart this review by discussing how an Image CDN can impact/hamper the performance of a Javascript-hosted application. A good Image CDN will allow you to resize, crop, adjust image quality, and even automatically convert the image file extension either on the fly or manually.
Image CDNs are everywhere, even if you aren't aware of it! For example, if you are running a NextJS application on Vercel or Nettlify, did you know your overall site performance is already being dictated by this choice?
If you have been using NextJS and Netlify, then historically out-of-the-box your images won't have been loading as quickly as they could. One area where Vercel historically had the edge (pun intended) over Netlify was rendering images using the NextJS image component.
When you host your NextJS application within Vercel, in the background Vercel uses the Vercel Image Optimization Service to ensure that all of the images being rendered by the Next Image Component are rendered as quickly as possible!
Until recently, Netlify didn't have a CDN-based image optimization service. Netlify uses a package called the (Next Runtime)[https://docs.netlify.com/integrations/frameworks/next-js/overview/#next-js-runtime] to configure NextJS apps to run on Netlify optimally. This package is used to call a serverless Lambda function to perform optimizations required by the NextJS Image Component.
Using a Lambda function had two big limitations. First, the default image processing function was hosted on servers located within the US East Coast. This meant all image requests had to go via the US regardless of where your site was hosted! This location limitation meant image requests would take longer to render depending on where you were located within the world
The second issue of using a function is that image optimization requests made using Next Image would require two network request hops, rather than one. One to the function and then another one to get the final optimized images. Being forced to use two hops was not ideal as it meant Images took longer to render on a web page compared to a service like Vercel that can render images on the edge.
When configuring NextJS to work on Netlify, it was possible to build a custom image loader and define the Image CDN that the NextJS image component called. You could create a loader and point it at the Cloudinary, or, Cloudflare CDN services, however, without this extra setup, your site image load times would be impacted. This is one example of how using a framework can impact your site without you realizing it!
The good news is that implementing an image CDN is technically pretty easy. A good service should provide some level of automation, as well as an option for you to manually call the Image CDN yourself!
Netlify Image CDN
The first service we will review today is the Netlify Image CDN. The Netlify Image CDN was released in November 2023 and it will allow you to resize, crop, and reformat any image you want on the fly by passing in props within your image URLs like this:
You implement the Netlify CDN by calling a special URL and passing in arguments using query string parameters. The Netlify service allows you to pass in 6 arguments which include, Source, Size, Fit, Position, Format, and Quality. In terms of converting file formats, the new Netlify CDN image service supports AVIF, WebP, JPEG XL as well as the older classics.
If you are already using Netlify, then using this service will be quick, simple, and best of all free. Within your app, all you need to do is change your image tags to route via the Netlify CDN URL, and off you go. As the Image CDN service lives within the Edge, the distance of your image requests will be reduced. Making a call to the Edge will be much faster compared to the existing Netlify image optimization function that lives on a server on the US East Coast.
The second benefit is for people new to Netlify. As long as you have a simple app hosted on Netlify, you can call the Netlify Image CDN even though your application is hosted somewhere else!
In terms of pricing, the Netlify CDN service is currently still in beta so there are no exact prices yet. At the time of writing, Netlify has confirmed there will be a generous free tier and a reasonable paid-for pricing tier!
Vercel Image Optimization
The first thing to point out is that Vercel does not technically provide an Image CDN. Instead, it offers an image Optimization service that will automatically benefit NextJS applications hosted on Vercel. In terms of comparing the Netlify and Vercel Image CDN services, I would call this comparison a draw.
The downside with Vercel is that you can not call the Image CDN directly, so in terms of like-for-like features, unless you are using NextJS, Vercel offers the least amount of features compared to others and probably shouldn't be considered.
Cloudinary
The next service within the line-up is Cloudinary. Cloudinary offers a lot, it ships with a cloud-based media management platform that will allow you to upload, store, optimize, and deliver images and videos. In my opinion, Cloudinary is the best online media manager currently and it offers the latest feature set. Aside from its Image CDN and Cloudinary offers:
- Digital Asset Management (DAM) for storing, organizing, and managing digital assets, including images and videos
- Dynamic Image and Video Transformations
- AI-Powered Image Analysis
- Video Manipulation and Streaming
- Version Control and Backup
- Integrations and SDKs
- Real-Time Image and Video Analysis
Calling the Cloudinary API can be done via a URL like this:
Alternatively, you can also use one of the SDKs. Cloudianmry hands-down has the most SDK supported from the options in this comparison. They have SDKs for No de, Python, PHP, Java, Ruby, .NET, Go, Dart, React, Vue, Angular, Javascript, jQuery, IOS, Android, Kotlin, Flutter, and React Native. They also have integrations for a bunch of different Frameworks like NextJs and Gatsby!
The other big difference with Cloudinary is that they also offer a really good DAM. DAM or online digital asset manager will allow you to upload images, manage them, add them to collections, add governance processes around who can access them, and more.
In terms of pricing, Cloudinary has a free tier, meaning that you can access their Image CDN for free, however, if you want more advanced features they also offer 3 other tiers, Plus Plan, Advanced Plan, and Enterprise Plans. I'd say that out of the list, Cloudinary is not the cheapest, however, it is by far the most feature-rich in terms of online digital image management!
Cloudflare CDN
The final service that I want to review in this list is Cloudflare. Cloudflare is probably better known for providing a CDN, however, they have also introduced an image optimization service in 2021. The Cloudflare Image CDN Service will allow you to both upload and store images within its UI, as well as access those images via an API. I say API because, unlike Cloudinary, Cloudflare does not have a bunch of different SDK support for working with images.
With Cloudflare you can choose to upload and optimize images within the UI, or, you can use the optimization service to optimize any of your images on sites that make use of Cloudflare as the CDN. Cloudflare images support automatic image optimization.
As part of the Image CDN, you can supply arguments to change the width, trim, sharpen, rotate, quality, metadata, height, gravity, and gamma. It can also automatically convert images from .png or .jpg to more modern image formats like WebP, dynamic resizing, and cropping of images. Cloudflare also offers features like Polish, Mirage, and Rocket Loader.
In terms of pricing, Cloudflare does not offer a free tier, however, it has two pricing tiers:
- Basic, which costs $5 per month per 100k images stored and $1 per month per 100k images delivered For more information on how you can save costs by increasing caching in browsers, refer to Browser TTL.
- Enterprise and free image delivery for 5 million images
To implement the Cloudflare resizing and transform capabilities you can pass different parameters via URL, like this:
To explain how this URL is structured let us split it into its parts, the /cdn-cgi/image/ part is the URL of the Cloudflare image service/proxy. width and height are the arguments, and finally the image URL being targeted is passed in at the end.
Cloudflare like Netlify and Vercel offers servless functions. This means if you want to do more complicated things you can create and are called, Workers. This is something that you can't do with Cloudinary, which is more image-only focused.
If you have lots of images and videos to manage, and you want a nice UI to manage them in the cloud use Cloudinary. Cloudinary is by far the strongest offering for managing and rendering images. In terms of the image CDN, Cloudinary comes with APIs and more SDKs than anyone else. It also offers you an online way to manage images and determine who can access them.
If you are only looking for basic online image storage, or a CDN for your website, or a way to manage serverless functions then the Cloudflare service is a solid middle-ground option. While the image and DAM aspect isn't as comprehensive as Cloudinary, it does come with the ability to upload and host images. While Netlify and Vercel both offer blob storage that you could make use of to upload and store images, neither of these services is built with images solely in mind.
If you are more focused on hosting a Javascript or React application pick Netlify. If you are using NextJS, then you can pick either service and you will not regret it, however, as you can access the Netlify Image CDN directly, this option is more feature-rich compared to Vercels!
Happy Coding
