User:Passani/sandbox
Image CDNs
In 2017 Addy Osmany of Google started referring to software solutions that could integrate naturally with the Responsive Web Design paradigm (with particular reference to the <picture> element) as Image CDNs.[1]. The expression referred to the ability for a web architecture to serve multiple versions of the same image through HTTP, depending on the properties of the browser requesting it, as determined by either the browser or the server-side logic. The purpose of Image CDNs was, in Google's vision, to serve high-quality images (or, better, images perceived as high-quality by the human eye) while preserving download speed, thus contributing to a great User experience (UX).
Arguably, the Image CDN term was originally a misnomer, as neither Cloudinary nor Imgix (the examples quoted by Google in the original document) were, at the time, a CDN in the classical sense of the term. Shortly afterwards, though, several companies offered solutions that allowed developers to serve different versions of their graphical assets according to several strategies. Many of these solutions were built on top of traditional CDNs, such as Akamai, CloudFront, Fastly, Verizon Digital Media Services and Cloudflare. At the same time, other solutions that already provided an image multi-serving service joined the Image CDN definition by either offering CDN functionality natively (ImageEngine)[2] or integrating with one of the existing CDNs (Cloudinary).
While providing a universally agreed-on definition of what an Image CDN is may not be possible, generally speaking, an Image CDN supports at least two of following three components [3]:
- A Content Delivery Network (CDN) for fast serving of images.
- Image manipulation and optimization, either on-the-fly though URL directives, in batch mode (through manual upload of images) and fully-automatic.
- Device Detection (aka Device Intelligence), i.e. the ability to determine the properties of the requesting browser and/or device through analysis of the User-Agent string, HHTP Accept headers, Client-Hints or JavaScript[3].
The following table summarizes the current situation with the main software CDNs in this space[4]:
| Name | CDN | Image Optimization | Device Detection |
|---|---|---|---|
| Akamai ImageManager | Y | Batch mode | based on HTTP Accept header |
| Cloudflare Polish | Y | fully-automatic | based on HTTP Accept header |
| Cloudinary | Through Akamai | Batch, url directives | Accept header, Client-Hints |
| Fastly IO | Y | url directives | based on HTTP Accept header |
| ImageEngine | Y | fully-automatic | WURFL, Client-Hints, Accept header |
| Imgix | Through Fastly | fully-automatic | Accept header / Client-Hints |
- ^ "Essential Image Optimization". Retrieved May 13, 2020.
{{cite web}}: CS1 maint: url-status (link) - ^ Jon Arne Sæterås. "Let The Content Delivery Network Optimize Your Images". Retrieved May 13, 2020.
{{cite web}}: CS1 maint: url-status (link) - ^ a b "Use image CDNs to optimize images". Retrieved May 13, 2020.
{{cite web}}: CS1 maint: url-status (link) - ^ Maximiliano Firtman. "Faster Paint Metrics with Responsive Image Optimization CDNs". Retrieved May 13, 2020.
{{cite web}}: CS1 maint: url-status (link)