Integration steps

Step 1. Add image sources to the whitelist

Resource whitelist allows Uploadcare to protect your account from bad actors willing to do optimizations on your behalf. For example, if all images are hosted at storage.example.com, then you can add storage.example.com to the whitelist.

Go to the whitelist section of your project settings. You should see a screen similar to the screenshot below. Add your image hosts by clicking the Add domain button. You can add multiple image sources if needed.

You can skip this step if you use our storage and know the UUID of your images.

Step 2. Connect SDK

Currently, there are two ways to integrate. Standard integration is ideal for websites with pre-rendered HTML not using Webpack or other JavaScript bundlers.

Second approach is for single-page applications built with React or another framework and using Webpack or a similar JavaScript bundler.

Please select one, that works for you.

Standard integration

Connect JavaScript SDK by adding these scripts to your website pages and add blinkloader.min.js to page head:

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

Then add this snippet at the bottom of the page body:

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

If you build a single-page application with React, Next.js or other JavaScript framework, then you can use an alternative integration method.

Integration for React and other SPAs

Run this code snippet at the app initialization stage:

(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 });
})

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

Step 3. Optimize your images

Replace src with data-blink-src to finish the integration:

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

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

You can also replace src with data-blink-uuid and provide the image UUID value instead of the full image URL:

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

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

This will make your images responsive, optimized and lazyloaded. Read further sections of this document to learn more about advanced configuration like adding transformations or working with background images.

Optional step. Add special effects

Add a special data-blink-ops attribute to customize your image:

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

Before and after:

You don’t need to add resizing and similar operations, srcset attribute and media queries are not needed as well. Adaptive Delivery SDK handles everything automatically.

That's it!

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.