What is image CDN and how it works?

Ask yourself: when was the last time you visited a website without a single image? Nowadays, an answer to such a question might be challenging — and for a good reason. Icons, illustrations, and other visuals are critical for both the engagement and user experience of any website. Besides, they boost search ranking, which is vital for your user base growth. Yet, spicing up pages with images (or GIFs and videos) comes with a drawback: they take up a lot of space. Such heavy content might slow down your website’s load speed just enough for it to be ignored by newcomers. According to Kissmetrics research, in just three mere seconds of load delay 40% of visitors abandon a website. Moreover, the Google algorithm doesn’t look kindly on slower-loading sites and lowers their search ranking.

Now, is it even possible for a page containing a lot of images to load quickly, if not instantly? Of course — that’s what image CDN is for!

How does image CDN work?

To simplify, an image CDN is a CDN with an addition specialized in image processing and delivery.

The only difference between image CDNs and all the others is the additional functionality. That is the transformation and optimization of images. Besides accelerating the image parent site loading speed, these software instruments also serve another purpose. Any image incorporated into your web page has a set of aspects such as size, compression, and others which are to be addressed when loading. Image CDNs offer a set of tools for this process made possible with specialized processing servers.

Let’s dive into details to see what part image storage and processing play in content delivery networks.

Is CDN a file storage?

Starting with basics, what are content delivery networks? Can one call them file storages? Well, yes and no. Servers making up CDNs, also known as Edge servers, store relay copies of your website’s files. Ideally, these servers are evenly spread throughout the globe being close to the potential users wherever they are. This way they take a load of the bandwidth sufficiently reducing its latency, thus improving the maintained pages loading speed. You can find out more about latency and how CDNs help to deal with it in our dedicated article.

Ok, but what about the storage function? What is the difference between CDNs and caching? Well, there is none: the latter is a part of the former. Caching, in other words, is storing the copy of your website’s data the user has requested before. This way there is no need for them to wait until the original version is loaded every time. The edge server close to the user quickly delivers a copy of the content stored in the cache. This procedure makes browsing way more efficient as fewer data is to be transferred, almost eliminating the bandwidth “clogging”.

Now, what place do images have in this?

How is image data processed?

Let’s get back to image CDNs. The way this addition to a regular relay process works is simple. Whenever a user wants to load your website, a request is sent to a regular CDN server. If it doesn’t have the required image stored through caching, it forwards the request to the image processing server. The latter might have the content copy in the cache. If it doesn’t, it just proceeds to process the image following the request in real-time. When done, the processing server responds to the edge server, which, in turn, simultaneously caches the required data and sends it to the user.

But what is image processing? Well, as mentioned before, there are specific requirements for an image to look like it should on a web page. This includes the OC the user is running their browser on, the size of their screen, and whether they are accessing the page via PC, smartphone, or another device.

CDN and image optimization

The way image CDN approaches processing is up to you to decide. And it’s not rocket science — you just have to input certain commands so the processing server knows what to do. As such, our team has developed over 20 operations you can perform on images through commands. After you set the algorithm, the server will know how to process the data on the fly.

One of the most prominent processing aspects to consider is the compression of images. It impacts the effectiveness of CDN — the better it’s compressed, the easier it will be for bandwidth to handle the image. It also affects the scaling of images. Such image optimization is possible even without sacrificing the quality of the original files. For instance, our optimization approach includes smart mechanics such as content-aware cropping. This way, we can save both the original image quality and your time spent on engineering.

How to use CDN for a website?

Ok, we’ve figured out that image CDNs (and CDNs in general) are a must-have for any responsively designed and maintained website. The only question is, how to start using them?

To begin with, choose the CDN provider and subscribe to their services. There are free CDNs, but the possibilities they provide are usually quite limited. Besides, they might monetize their services by putting ads on your website’s pages. And, of course, they might be less secure. Yet, talking about free CDNs, many provide trial options allowing you to test the features available in paid subscriptions. For example, our free plan would allow you to try out not only the data delivery but also some image transformations and our very own uploading widget. Besides, you can keep it for personal use to maintain a simple website.

What about the installation of CDNs? After signing up for CDN services, the provider would allow you to include your website’s domain or subdomain in the configuration. Various rules regarding caching, SSL settings, and others are normally set at this stage too. Next, update your DNS records so that your domain or subdomain points to the CDN server. The providers usually provide all the necessary information for this process. Besides specific functions and settings, you would be all set at this point.

Learn more

Visit our Learning Center to find more insights on all things media and UGC.

Learn from fellow Uploadcare developers and build better products together.