Programmable Media

Advanced image components (video tutorial)

Last updated: Oct-31-2023

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!

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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Related topics
  • Learn more about this feature in the SDK guides: Angular, React, and Vue.

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

 

Cloudinary Academy

 

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.

 

✔️ Feedback sent!

Rate this page: