Adaptive image component

Quick start

Install the Blocks package in the same way as in the File Uploader installation docs.

Connect the script:

<script src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{__BLOCKS_VERSION__}}/web/lr-img.min.js" type="module"></script>

Configure basic settings:

lr-img {
     --lr-img-pubkey: '$YOUR_PUBLIC_KEY';
     --lr-img-breakpoints: '200, 500, 800';
}

Get $YOUR_PUBLIC_KEY from API keys. A public key is necessary if your images aren't yet uploaded to the Uploadcare.

If you need to work with src, then you also need to add a domain in the project settings.

Note: The maximum breakpoint value is 1500 because, at double pixel density, this conducts to 3000px images, which is the maximum resolution for image processing. Learn more about image size limit.

Then use <lr-img> tag for the images in your HTML templates:

<lr-img src="SOURCE_IMAGE_PATH"></lr-img>

If your files are already uploaded to Uploadcare, you don't need to add a public key and should use the files' UUIDs instead of the source image path:

<lr-img uuid="UUID"></lr-img>

What happens under the hood:

1. The adaptive image component initiates and reads its settings, including the source image path.
2. Then it uses Uploadcare Proxy to upload the source image.
3. After that, it generates srcset for the resulting image and renders the img tag into the DOM.

Breakpoints

To create a truly responsive layout, you should specify a list of breakpoints:

<style>
  @import url('./test.css');

  lr-img {
    --lr-img-breakpoints: '400, 800, 1200';
  }
</style>

<lr-img src="SOURCE_IMAGE_PATH"></lr-img>

The browser will select the most suitable image size automatically. Read our article about responsive images to learn more about it.

Background mode

To make it work for the element's background, add the is-background-for attribute with the desired element's CSS selector in its value:

<style>
  #target {
    background-size: cover;
  }
</style>
<div id="target">Some text...</div>
<lr-img is-background-for="#target" src="SOURCE_IMAGE_PATH"></lr-img>

Image processing

You can specify transformation settings for the single image or the set of images:

<style>
  .invert {
    --lr-img-cdn-operations: 'invert';
  }
</style>

<lr-img class="invert" src="SOURCE_IMAGE_PATH"></lr-img>

Image optimizations and image transformations operations are separated with /-/ symbols, exactly as specified in the URL API:

<style>
  .invert_grayscale {
    --lr-img-cdn-operations: 'invert/-/grayscale';
  }
  .old_styled {
    --lr-img-cdn-operations: 'saturation/-80/-/contrast/80/-/warmth/50';
  }
</style>

Lazy loading

Native lazy loading is enabled by default for all image components. You can disable it or use a custom one based on IntersectionObserver.

To disable lazy loading:

<style>
 lr-img {
   --lr-img-lazy: 0;
 }
</style>

<lr-img src="SOURCE_IMAGE_PATH"></lr-img>

To enable intersection observer:

<style>
 lr-img {
   --lr-img-intersection: 1;
 }
</style>

<lr-img src="SOURCE_IMAGE_PATH"></lr-img>

Layout shift

To avoid layout shifts during loading, setting the initial size of the images is recommended.

Fallback

For SEO or NOSCRIPT purposes, use <noscript> sections in your integrations with the original image path:

<lr-img src="SOURCE_IMAGE_PATH">
 <noscript>
   <img src="SOURCE_IMAGE_PATH" />
 </noscript>
</lr-img>

After initiating, if JavaScript is enabled in the browser, that will be transformed into:

<lr-img src="SOURCE_IMAGE_PATH">
 <img srcset="...GENERATED_SRC_LIST" />
</lr-img>

Development mode (relative image path)

When you develop an application, use a local development server and relative paths in your project structure for the images:

<lr-img src="../LOCAL_IMAGE_PATH"></lr-img>

In that case, Uploadcare Proxy would be disabled for your development environment, and you will see original local images in your application until you deploy it.

Preview blur

Using the is-preview-blur attribute, you can quickly get your image blurred to show to the user while the main image is loading.

It is ON by default. To disable blur preview:

<style>
 lr-img {
   --lr-img-is-preview-blur: 0;
 }
</style>

<lr-img src="SOURCE_IMAGE_PATH"></lr-img>

Note: If the is-background-for attribute is applied, then the is-preview-blur attribute will not work.

Settings

CSS context properties are available for any container's nested element, just like any other CSS property. HTML attribute settings have more priority and can redefine other settings.