Adaptive Delivery

Adaptive delivery is a better way to serve images on any website. Unlike a traditional CDN service, we provide you with a full-stack solution, that combines our advanced CDN API with a highly optimized JavaScript SDK.

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?

After you register and install our lightweight JavaScript plugin on your website, Uploadcare will consider your website layout and device parameters of the visitors.

Feel free to use any storage. You don’t need to change image links. Our JavaScript SDK will replace them with links to Uploadcare CDN automatically.

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.

Questions?

We’re always happy to help with code, integration, and other stuff.
Search our site for more info or post your question in our Community Area.