Adaptive Delivery

Adaptive Delivery is an Uploadcare technology that adapts images to user context: location, device, browser, and more. This provides an instant increase in page loads, thus improving the User Experience and positively affecting business metrics.

Overview

Technically, Adaptive Delivery is a full-stack image optimization solution that combines Uploadcare CDN API with a highly optimized JavaScript SDK named “Adaptive Delivery JS SDK” or just “SDK” throughout this documentation.

Before we jump into any specifics, let’s see how our technology saves development resources through an optimized code styling. Here’s an example of how we generally implement Responsive Images using the img HTML element with srcset and sizes attributes,

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

Once implemented, Adaptive Delivery provides the same result with a single line of code,

<img data-blink-src='https://example.com/banner.jpg' />

Placing your image URL as the data-blink-src attribute’s value does the following: Uploadcare fetches your image from any origin to your account and replaces it with an optimized image served from our CDN.

Additionally, we automatically:

  • Properly size images for any device, browser, and layout.
  • Efficiently encode images at no loss in visual quality.
  • Provide Retina images distribution on Hi-DPR devices.
  • Serve images in next-gen formats through delivering WebP images to supported browsers.
  • Provide lightweight & customizable lazy loading.
  • Provide image filtering options and automatic image enhancement.
  • Offer hooks that allow customizing your rendering logic.

How Adaptive Delivery works

After you sign up with Uploadcare and integrate our Adaptive Delivery JS SDK, Uploadcare will start analyzing your website layout and user context of every visitor to serve images accordingly.

Feel free to use any storage for your image assets. There’s no need to migrate any of your data manually or change image URLs. Our SDK will replace them with Uploadcare CDN URLs automatically.

Adaptive Delivery handles Responsive Images, caching, serves media in next-gen formats like WebP, and automatically provides Retina images for Hi-DPR devices. The technology considers your visitor behavior and renders images at the right moment using our advanced lazy loading technique.

You can further improve the user experience by leveraging a wide range of image filters and transformations provided by Uploadcare within Adaptive Delivery. This allows using our smart crop, image rotation, watermarks, and many more.

You can add the options where appropriate while keeping your images optimized and responsive at all times.

Those are the things that make Adaptive Delivery so powerful and unique.