Watch this tutorial to learn how Cloudinary's advanced image components can improve your user's experience.
This video is brought to you by Cloudinary's video player - embed your own!
This tutorial presents the following topics. Click a timestamp to jump to that part of 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 client-side SDKs.|
|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
|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
|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
Check out 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.