Adaptive Delivery Integration

This section walks you through the three simple steps needed to integrate Adaptive Delivery.

Step 1. Whitelist image sources

The first step is about adding your image sources to a whitelist. Make sure to include every domain you use to render images on site pages.

For instance, if you host images at storage.example.com, you add the domain to your whitelist.

Resource whitelist allows Uploadcare to protect your account from unwanted activities like fetching images to your project, thus increasing its usage.

To whitelist an image origin, navigate to the Whitelist section of your project settings. You should see a screen similar to the screenshot below. Add your image hosts by hitting Add domain. You might want to add multiple sources, depending on your configuration.

You can skip this step if you use Uploadcare as your image host and know the UUID of your every image.

Step 2. Connect SDK

We provide the two ways of integrating Adaptive Delivery:

  • Standard, for websites with pre-rendered HTML: not using Webpack or other JavaScript bundlers.
  • SPA, for single-page applications (SPAs) built with React or another framework: using Webpack or a similar JavaScript bundler.

Please, choose the integration method that best suits your configuration.

Standard integration

Connect Adaptive Delivery JS SDK by importing these scripts in your website pages and adding blinkloader.min.js to your page <head>,

<script src='https://ucarecdn.com/libs/blinkloader/3.x/blinkloader.min.js'></script>

Then, add this snippet at the bottom of your page <body>,

<script>
  Blinkloader.optimize({
    pubkey: 'YOUR_PUBLIC_KEY',
    fadeIn: true
  })
</script>

Where YOUR_PUBLIC_KEY stands for your Uploadcare Public Key and identifies the target project that will be used to store fetched images.

If you build a single-page application with React, Next.js, or another JavaScript framework, please adhere to the alternative integration method.

React and other SPAs Integration

Run this code snippet on your app initialization,

(function(src, cb) {
  var s = document.createElement('script'); s.setAttribute('src', src);
  s.onload = cb; document.body.appendChild(s);
})('https://ucarecdn.com/libs/blinkloader/3.x/blinkloader.min.js', function() {
  window.Blinkloader.optimize({ pubkey: 'YOUR_PUBLIC_KEY', fadeIn: true });
})

Where YOUR_PUBLIC_KEY stands for your Uploadcare Public Key and identifies the target project that will be used to store fetched images.

Feel free to put this into a component or helper function.

Step 3. Optimize your images

The only thing left to complete your Adaptive Delivery integration is to replace src attributes with data-blink-src within your img HTML elements. That’s how it should look like,

<img data-blink-src='https://storage.example.com/logo.png'/>

<!-- same goes for a background image -->
<div data-blink-src='https://storage.example.com/banner.png'>
  There is a banner behind this text.
</div>

In case you use Uploadcare as your image host, you can also provide an image UUID instead of a URL. Like this,

<img data-blink-uuid='6493f2d1-a476-427f-bcd5-94330cc02837'/>

<!-- same goes for a background image -->
<div data-blink-uuid='6493f2d1-a476-427f-bcd5-94330cc02837'>
  There is a banner behind this text.
</div>

Once you’re done with the replacements, your images instantly get responsive, optimized, and lazy-loaded.

Read on to learn about adding additional filters and image transformations or implement our Advanced Configuration options.

(Optional) Step 4. Add image filters and effects

You can apply any of the supported image filters and transformations via the data-blink-ops attribute,

<div
  data-blink-ops='filter: pamaya; filter-amount: 30; mirror; enhance: 100'
  data-blink-src='https://images.unsplash.com/photo-1501281668745-f7f57925c3b4'
/>

Here’s a before-after example,

You don’t need to add image resizing or similar operations. The same goes for the srcset attribute and media queries. Adaptive Delivery handles everything automatically.

That’s it, folks!