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