The Importance of Image CDNs

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.

The Importance of Image CDNs
Photo by Pero Kalimero / Unsplash

Image CDNs are nothing new, but they are more powerful than before. These new Image CDNs mirror many of the features of or sometimes use as 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 MBin 2017. And the trend is continuing.

Frameworks Are Making it Easier

Next.js introduced a <Image /> the 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 an Image CDN as well.

Use image CDNs to optimize images

Features of 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.

Global Image CDN with Real-time Image Optimization

Image and Video Upload, Storage, Optimization and CDN

ImageEngine - Advanced Image CDN, Real-time Image Optimization, Compression and Delivery

Image processing and optimization API - Image CDN * imgix