If you are reading this guide, you are probably trying to learn more about an image CDN, and how does it work. Or you are a bit further down the line ‚ trying to evaluate what an image CDN should do or understanding the essential features of an image CDN that can help you with faster page load time, better image delivery, improved SEO, and simpler integration.

You have come to the right place!

This guide not only covers the basics but also includes why a particular feature is essential for an image CDN. Having this understanding would enable you to map your requirements to what an image CDN offers.

Let's quickly get started. We take a quick look at a regular content delivery network (CDN) and then gradually move on to the specifics of an image CDN.

What is a Content Delivery Network (CDN), in general

A Content Delivery Network forms the basis of what we will cover in the rest of this guide. Let's understand how it works with an example.

Consider that you run an e-commerce store in the US hosted on a server located in a city on the US east coast, let's say, North Virginia. So, when a user accesses your website, everything that loads on that website comes from this server in North Virginia.

But, your users access it from across all of the United States. And maybe even in other countries, which means that they could be a few thousand miles away from your server. And, the farther they are, the longer it would take for the content to get transferred from your server to their devices. Your users get frustrated because of the slow website and drop off without converting to a paid customer.

Users geographically far away from the origin server experience slow load time

This is where a Content Delivery Network comes into the picture. While your server sits in one location, a CDN consists of globally distributed servers that can store your website's content (or commonly referred to as "cache" your website's content) and deliver it to your users. So now, if users sitting in California access your website, instead of downloading the content from North Virginia, they can get it from one of the servers of the CDN, a few miles from their location. Shorter distance, super-fast load time, happier users, and more sales for you.

With a CDN the geographical distance, and hence the load time, decreases

If you want to read more about how a general CDN works, we have written a separate guide that gives you a gentle introduction to the same. You can access it from here - Content Delivery Network - A Beginner's Guide.

What is an image CDN?

Images present a slightly complicated case when it comes to delivering the perfect variation on each device using a CDN. You need to consider the image format, image dimensions, image compression, aspect ratio, and a lot more, while balancing the image's visual quality. Therefore, we need to have a CDN tuned for image delivery.

An image CDN is a regular content delivery network topped with a set of software enhancements to enhance the underlying CDNs functionality for optimizing and transforming images in real-time, thereby making it more suitable for image delivery.

This is the most important thing to understand about all the image CDNs out there. They are not an entirely different content delivery network; they are built on top of existing ones with software enhancements required for image optimization.

Let's look at different parts of the process to understand how are image CDNs built. There are three of them.

The Delivery

Delivery means how does an image actually gets to the user's device and how quickly we can get it there. This is done using the Content Delivery Networks we talked about earlier.

There are already massive, well-performing general content delivery networks out there. They have their network spread across hundreds of countries, already tuned for fast load times. Some of the leading ones are AWS CloudFront, Akamai, and Fastly.

Almost all good image CDNs would offer one of these leading CDN providers as a part of their service. Eventually, it is this underlying Content Delivery Network that is responsible for delivering the images to the users.

The Processing

As mentioned earlier, we need to add to the content delivery network the unique functionality required for modifying and optimizing the images. This processing functionality would allow you to resize images, crop them, watermark them, and apply visual effects to them.

This functionality is performed via dedicated "processing servers," which are separate from the servers in the content delivery network. The processing servers are the ones doing the heavy lifting in the image CDN setup. These would always be far fewer in number than the servers in a content delivery network and localized in a few regions.

The Storage

Now, this is a part that may vary across different image CDNs.

A good image CDN should be able to deliver all the image optimizations and transformations on any image, even the ones that are outside of the image CDN's system.

But, the leading ones take it a step further. They come with a storage or a media library for users to upload and manage their images. These uploaded images can be accessed via the CDN, and can be processed by the processing part of the image CDN. This media library makes it simple to get started with using the service apart from simplifying image upload and management.

Media Library in ImageKit.io

The overall structure

Let's look at ImageKit.io, which is an image CDN, as an example. It comes with an image storage called the Media Library (the "Storage" part). The bundled CDN is AWS CloudFront (the "Delivery" part), an extensive, general content delivery network with over 200 delivery nodes worldwide. The image processing servers are present in 6 regions across the globe (the "Processing" part).

Here is how the structure looks like when we combine the three components mentioned above

The three components of an Image CDN, taking ImageKit.io as an example

The combination of these three different components collectively makes an image CDN.

How does an image CDN work?

The flow of a user request and response in an Image CDN (CDN + Processing Server + Storage = Image CDN)

Now that we know that an image CDN is a combination of three distinct elements, let's see how do these come together to deliver the intended functionality.

1. When a user requests an image, it first goes to the delivery part of the image CDN, i.e., the underlying general CDN.

2. If the CDN does not have the image cached on its servers, it goes to the processing servers requesting the same.

3. The processing server then has two ways of fulfilling the request. Usually, it first attempts to send back an existing copy of the image that is requested.

4. If that is not possible for any reason, the processing server gets the original image from the storage. It can come integrated with the image CDN as shown above (like the Media Library in ImageKit), or it may be some external image storage. The server then does all the optimizations and transformations requested on the image in real-time and sends it back to the CDN. It also stores a copy of this processed image for subsequent requests.

5. The CDN delivers the image to the user and also caches it on its servers for subsequent requests.

6. Next time a request comes for the same image, the CDN would deliver it from its cache.

There might be some variations in the above steps that would vary across different image CDN services, but on a high-level, all image CDNs work in the same way.

**Note: **Regardless of the setup, an image CDN should be able to modify images in real-time. There are a few other services that let you do a one-time image processing and store them in some storage for you to use later, but, for the context of this article, and even otherwise, those are not image CDNs. They are great for a simple, one-time use case, but lag significantly in terms of functionality compared to real-time image CDNs.

Important infrastructure-level features of an image CDN

We have now covered how an image CDN is set up, and how does it work.

We now need to look at the features of an image CDN that will be help you deliver perfect images on your websites and apps with minimum effort.

Let's first look at some of the essential infrastructure-level features of an image CDN.

1. Integration with existing storages and servers

This is by far the most crucial feature that you should be looking for in an image CDN - more than any other infrastructure-level feature.

If you have been running a website for some time, you would already have quite a lot of images being used and stored in a particular location on your server or a storage service like AWS S3. Your processes to upload images to your storage, your content management systems, and your teams using it are also set and mature by that time.

Very often, in this scenario, all that you are looking for is a service that can just integrate with your existing systems and help you deliver optimized and resized images across devices. You do not want to opt for an image CDN where you have to move all your images to a designated storage to use its features. Or make tons of changes to your content management systems just to integrate it with your process.

2. Choice of the CDN (Bonus: Third-party CDN integrations)

As mentioned earlier, building your delivery network is a non-trivial task. Most image CDNs would rely on an established Content Delivery Network for the final image delivery.

Therefore, the first thing one should look for when evaluating an image CDN is the content delivery network used to serve the images. Good image CDNs are built on the best general CDNs available out there - Amazon CloudFront, Akamai, Fastly, Google CDN, among others. These CDNs would ensure that you get the fastest possible content delivery across the globe.

Bonus: Heavy users, those running a website with several million page views every month, might have their preferred CDN. This preference could be because of contractual obligations, use cases, or the strength of a particular CDN in the region they operate. In either case, the image CDN should allow integration with other CDNs apart from the one that comes bundled with it.

3. Location of the image processing regions

As mentioned earlier, the processing part of the image CDN is different from its delivery part. The processing servers are far fewer in number as compared to the delivery nodes of the underlying CDN and are present in a few geographical regions.

If you are using the image CDN with your storage or server, there is some time (a few milliseconds) that is needed to get the image from your storage to the image CDNs processing server. The shorter this distance geographically, the shorter this time to retrieve the original image and hence faster the image load. Similarly, any image request that is not delivered from the CDN cache goes the processing server for retrieval or fresh processing. The higher the distance between the CDN cache and the processing server, the higher the time for fulfilling this request.

Therefore, you should opt for image CDNs that can provide processing regions close to either your end-users or your existing infrastructure.

4. HTTPS and HTTP/2 (Bonus - With Custom Domain Names)

HTTPS is a protocol for securely transmitting data from a user's browser and the website's server. Google, the biggest search engine in the world, has always maintained that HTTPS-enabled websites get a ranking boost in search results. Modern browsers like Chrome, also give subtle preferences to secure websites.

Google uses a padlock in the address bar to indicate secure websites

HTTP/2, on the other hand, is an upgrade to HTTP/1.1 protocol, that allows for faster data transfer and page load. A faster page load time not just improves the user experience but is of great importance for SEO as well.

HTTP/2 on the left with all requests getting fired in parallel. HTTP/1.1 limiting the requests in parallel. Source: https://imagekit.io/blog/http2-vs-http1-performance/

Given the importance of HTTPS and HTTP/2 for securing websites, SEO, and faster page loads, your image CDN should support them, without fail.

Custom Domain Names: While most third-party image CDNs do support these out of the box, providing them over custom domain names like images.yourwebsite.com, is often not supported or is an expensive add-on. While the importance of custom domain names for SEO is debatable, they do help to white-label the image CDN and present the image URLs as if they are coming from your service, instead of a third-party. You should look for an image CDN provider with inexpensive custom domain name integrations.

5. Availability of an integrated media library

Unlike the first three points, this might be non-essential in most cases. But, used correctly, it can prove to be a great add-on or help you completely overhaul your image management systems and make them more efficient.

In companies with large fragmented teams and multiple stakeholders working on the images that go on a website or an app, having a central media library for storing, searching, and managing images can prove to be useful.

Media Library with Search and image uploads

In the previous section, we looked at the essential features of an image CDN from an infrastructure perspective.

Image-related features of an image CDN

We now get to the actual optimization and transformation capabilities that you should look for in an image CDN - the processing part. While the infrastructure helps you accelerate delivery, the processing features help you adapt the image to your requirements.

1. Automatic format optimization including WebP support

We have already talked about this earlier - different image formats are suitable for different kinds of use cases. For example, while JPG is excellent for photograph-like images, PNGs are suitable for graphics and logos.

Always JPG image

WebP or JPG image (depending on browser support). Image by Fabian

Good image CDNs should be able to convert your images to the correct image format, automatically taking into account factors like browser support and original image content.

Do note that, most image CDNs would just default to converting every image to WebP, whenever possible. However, there are a few cases, like the one illustrated below, where a lossy-compressed PNG is smaller than the WebP variant and looks the same. Therefore, image format optimization should not be just about converting the image to WebP but about converting it to the "right" format for that particular image.

This logo image is always in PNG even in WebP-supported browsers (1.6KB), as it is smaller than WebP (2.1KB)

2. Controllable image compression (Bonus: Network-based image compression)

The next step in image optimization is compression. And while lossy compression does lead to visual degradation, if done correctly and up to a certain level, the human eye is not able to perceive those visual differences.

For example, the two images below at different quality levels look nearly identical, though the one that is compressed is almost one-fifth in terms of byte size.

At Quality 100, JPG image 107KB

At Quality 90, JPG image 20.3KB. Image by Fabian

Different kinds of businesses have different quality requirements. For example, an e-commerce business selling clothes with a fine texture would prefer to deliver images at a higher quality because the visual quality of those details is what would help sell the product. On the other hand, news and content websites can get away with slightly lower quality for photographs. Or there might be individual sections of the website, like the part where you present a zoomed-in image, where you need a higher quality image. Therefore, the quality level or the compression should be controllable on a per-URL basis.

**Bonus: **Mobile network connections are still flaky. The download speed on a user's device can vary. To provide a seamless experience to users on different network speeds, a right image CDN should adapt the image compression to different network levels. A more compressed, lighter image can download faster on a slow user's device resulting in improved user experience.

3. Real-time transformations for responsive images

Any image CDN should come with fundamental image transformations like resizing, cropping (with different crop modes), DPR variation, and aspect ratio modification. These transformations, combined with specifications like responsive image tags, Client Hints (though an outgoing spec), or client-side javascript, help adapt the images for that particular device.

Varying layout across devices requires different image sizes

Bonus: Smart cropping of images

When transforming images for smaller sizes, cropping usually becomes unavoidable. If the subject of the image is not in the center, it can get cropped out of the thumbnail. An image CDN that provides smart crop (not just face crop, but identifies other important elements of the image), helps you overcome this problem.

From left to right - the original image, center cropped, and smart cropped image. Smart cropping gives a much better result.

4. Support for complex transformations and compressions

Just simple resize and crop transformations may not be enough for adapting your images for web and mobile. For example, you might want to overlay an image with your brand's logo in the top-right corner. With hundreds of thousands of images in your product catalog, it can be quite a task if you were to do it manually. Thus, it is a feature that you should look for in an image CDN.

Image with watermark added on the top dynamically using the image URL. URL here.

Overlays should not be just for watermarking, but good image CDNs would even provide you with text overlays. One can combine them with other image transformations like background modification to convert your images into personalized banners for your users. You can use these personalized banners for sending targeted emails, or on the website to help boost your conversion rates.

Image with text added and styled dynamically directly from the image URL. URL here.

In addition to the above examples, features like progressive images, Brotli compression for text-based image formats like SVG, support for conversion to animated WebP, are some of the other advanced features that can be useful in an image CDN.

5. URL usability and security

Real-time image transformations are fantastic. Just change a parameter, and you get a new image that fits your requirement perfectly. But this capability is like a double-edged sword.

While it makes it easier for someone to create a new image variant, it can pose problems for your technology team and make the URLs prone to plagiarism.

For example,

*a. Usability *- It becomes difficult for your technology team to remember the transformations that need to be applied to an image to adapt it to different parts of the website. For transforming an image to 400x300 size with a watermark, what is the exact transformation string? There should be a more natural way to refer to these transformations so that your development team can speak a common language.

*b. Security *- The transformation parameters can be removed or changed. Any unauthorized entity would then be able to access your original images, or download a modified variant and use it themselves. The image CDN should, therefore, come with features like URL-modification prevention, allowing access to only specific transformations, URLs with time-based expiry, and others to reduce the unauthorized use of your image URLs.

6. SDKs and Support

While this may not seem to be directly related to images, but excellent technical support and SDKs for use with different frameworks and platforms can provide a significant boost to your image optimization efforts.

The reason for this is that image optimization is essential, yet using an image CDN to its full potential and adopting the best practices related to image-loading is non-trivial.

You need your image CDN to be able to provide you with reliable technical advice, guides, and solid SDKs to make it simpler to implement the best practices in your code.

Identifying improvement areas for images on your website

We have now covered most of the image CDN and the different features that come along with it that can be useful for you. But do you need one? How is the current state of images on your website? And if it is terrible, then what are the areas that you should be looking to improve first?

The following tools can help you answer this question.

1. Google PageSpeed Insights

Built on top of Lighthouse, the new industry-standard performance measurement tool, PageSpeed insights, gives you a complete report of your desktop and mobile web page performance.

Within that detailed report, five parameters are related to image delivery and optimization - offscreen images, optimize images, properly size images, images in next-gen formats, and efficient cache-control.

PageSpeed Insights report of ImageKit.io

2. ImageKit's Website Analyzer and Performance Center

ImageKit is a complete image CDN that comes with two tools to help you understand and solve image optimization related problems. The website analyzer provides you with a complete report for a single image URL on both desktop and mobile, providing you with an image-by-image detailed report of how that particular image can be optimized.

ImageKit Website Analyzer with an image-by-image report for optimizing your images

The Performance Center, though available only to the paid users of ImageKit.io, takes the website analyzer report a step further. It automatically analyzes the critical pages on your website for image optimization every day. It then presents a visual trend specifically for the size and scope of optimization for the images on your website. This trend helps your team to stay on top of image optimization and delivery as you release new pages and layout variations.

The Performance Center shows that the image payload has gone up around Dec 25.

Wrapping it Up

Images are an essential part of all websites and apps - not just in terms of visual presentation but also in terms of the size that good quality images take on a website. Optimizing them, therefore, should be the number one priority for any website or app owner, who wants to deliver a great experience to the users.

And selecting the right image CDN that integrates well with your existing setup and provides the essential transformation capabilities, makes it simple to deliver perfect images across devices.

One such image CDN is ImageKit.io. It automatically optimizes your images to the right format and compression level and comes with tons of transformations to deliver the perfect image. It comes with AWS CloudFront and a media library built-in. Plus, you are in good company as over 15,000 companies and developers use it in 40+ countries. There is a generous free plan that gives you up to 20GB of bandwidth, absolutely FREE, every month!

Don't compromise on the images on your website. Start optimizing them today!

Originally published at https://imagekit.io on June 9, 2020.