Before we jump into the specifics, let’s see how using adaptive delivery saves your time and effort. Below is an example of a standard responsive image implementation:
<img src='https://example.com/banner.jpg' srcset=' https://example.com/banner-480px.jpg 480w, https://example.com/banner-960px.jpg 960w, https://example.com/banner-1440px.jpg 1440w, https://example.com/banner-1920px.jpg 1920w ' sizes=' (max-width: 960px) 100vw, 960px' >
Adaptive delivery allows to achieve the same result with a single line of code like this:
<img data-blink-src='https://example.com/banner.jpg' />
It will pull an image from any origin and replace it with an optimized image served through Uploadcare CDN. Additionally, you will get:
- Automatic image resizing for any device and layout;
- Retina image distribution on devices that support this format;
- WebP image format distribution on supported browsers;
- Lightweight & customizable lazy loading;
- A simple way to add image effects and filters;
- Hooks, allowing to add custom rendering logic.
How does it work?
Adaptive delivery takes care of image responsiveness, caching, serving modern media formats like WebP and retina images. On top of that, it considers user behavior and renders images at the right moment using our special lazy loading technique.
Uploadcare offers a wide range of image filters and transformations like smart crop, rotation, watermarks and many more. You can add them where needed while keeping images responsive at the same time.
These are the things that make Adaptive Delivery so powerful and unique.