> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Advanced image components (video tutorial)

## Overview

Watch this tutorial to learn how Cloudinary's advanced image components can improve your user's experience.

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Advanced Image Components feature added to SDKs
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | The advanced image components feature handles many common front-end tasks, such as lazy loading, image placeholders, and image accessibility. It is supported by the [Angular](angular1_image_manipulation#advanced_image_components), [React](react1_image_manipulation#advanced_image_components) and [Vue](vue1_image_manipulation#advanced_image_components) frontend SDKs.|

### Lazy loading
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=44 :player=cld} | Lazy loading tells the browser not to download images that are not yet visible to the user on his screen, and wait until the user scrolls to that image. This feature can potentially save bandwidth for images that are not actually viewed, and decrease the time needed to load a page. To enable the lazy loading feature for a particular image, add the `loading` attribute to the `<cl-image>` component with a value of`lazy`.|

### Image placeholders
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=22 :player=cld} | An image placeholder is a lightweight version of a target image that can be downloaded quickly, and will occupy the same location as the intended target image, while the target image is still downloading. Once the target image download has been completed the placeholder is replaced with the final image. This feature is especially useful when using large images. You can combine placeholder images with the lazy loading feature. In this case, the placeholder image is downloaded on page load, but the target image will only be downloaded once the user scrolls down to the image on the page. To add a placeholder for a particular image, add the `<cl-placeholder>` component within the `<cl-image>` component with one of the following types: `blur`, `pixelate`, `vectorize` or `predominant`.

### Image accessibility
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=20 :player=cld} | The image accessibility feature makes an image more accessible to users that may have a visual disability that impairs their ability to view images. To enable the accessibility feature for a particular image, add the `accessibility` attribute to the `<cl-image>` component with one of the following modes: `monochrome`, `darkmode`, `brightmode`, or `colorblind`.|

## Keep learning

> **READING**:
>
> * Learn more about this feature in the SDK guides: [Angular](angular1_image_manipulation#advanced_image_components), [React](react1_image_manipulation#advanced_image_components), and [Vue](vue1_image_manipulation#advanced_image_components).

#### If you like this, you might also like...

  
  
  
    Transformation Basics
    Learn the basics of a transformation URL 
  

  
  
  
    Complex Transformations
    Combine transformations to generate a 3D canvas 
  

  
  
  
    Optimization Tips
    Tips for delivering optimized images 
  

&nbsp;

&nbsp;Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.
&nbsp;