Jan 10, 2021
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 KBin 2011 to
1.8 MBin 2017. And the trend is continuing.
Credit goes to SpeedCurve article by Tammy Everts
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.
Use image CDNs to optimize images
Image content delivery networks (CDNs) are excellent at optimizing images. Switching to an image CDN can yield a 40-80% savings in image file size. In theory, it's possible to achieve the same results using only build scripts, but it's rare in practice. Image CDNs specialize in the transformation, optimization, and delivery of images.
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.
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 CDN with automatic optimization, real-time transformation, and storage that you can integrate with existing setup in minutes. Over 400 companies and 15000 developers use ImageKit.io For developers Deliver optimized, responsive images on all platforms without managing multiple components. 40 plus URL-based image manipulation options Deliver responsive imagesAdapt images using height, width, crop, aspect ratio, and DPR transformations.
Image and Video Upload, Storage, Optimization and CDN
Cloudinary Platform Powering Your Media Developers and marketers use Cloudinary to quickly and easily create, manage and deliver their digital experiences across any browser, device and bandwidth.
ImageEngine - Advanced Image CDN, Real-time Image Optimization, Compression and Delivery
ImageEngine is an intelligent image content delivery network. ImageEngine will resize your image content tailored to the end users device.