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

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

0:00	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, React and Vue frontend SDKs.

Lazy loading

0:44

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 oflazy.

Image placeholders

1:22

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

2:20	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

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

 

 

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.