The Importance of Image CDNs

date
Jan 10, 2021
published
slug
the-importance-of-image-cdns
description
Images are one of the biggest performance impacts on the modern web. Image CDNs can be the answer. With Frameworks recently adopting first party support for many CDNs, it is only making it more essential we consider them.
Image CDNs are nothing new, but they are more powerful than before. These new Image CDNs mirror many of the feature of, or sometimes use as a underlying technology CDNs like CloudFront or Akamai. The difference is that they are specialized CDNs that are optimized for image workflows.
And we REALLY need the help. Our web development has only gotten more visual as the medium has matured. Just look at this graph how the largest impact to website size are images, more than double from 800 KB in 2011 to 1.8 MB in 2017. And the trend is continuing.

Frameworks Are Making it Easier

Next.js introduced a <Image /> component that interfaces will many image CDNs automatically, by checking the path to the file. It will then automatically apply the transformations needed without the user thinking about it. Next.js worked with Google to develop the technology. Here is Alex Castle from Google discussing the work they did for the new component.
Google clearly recommends using a Image CDN as well.

Features of a Image CDNs

Some features Image CDNs can offer —
  • Automatically resize images
  • Optimize and Compress images
  • On-the-Fly image format change
  • Quality and Size optimizations based on a users badwidth
  • API for transforms
  • Automatic AI powered adjustments, like face detection or censoring
Not all of these features are important to all uses cases. The automatic use of AI to censor content is edge case specific. But many are specifically around the idea of building a better web through the various levels available to optimize images. They can adjust the size, the quality, the format, the compression, in addition to offering edge caching to lower the network request time.

Image CDNs to Consider

I personally use ImageKit in my professional products. But I have used Cloudinary on the old version of my site. I found ImageKit to have more straightforward pricing and a better interface. They also recently ranked #1 on TheGuideX Image CDN ranking.