Cloudinary Blog

Advanced Image Component for Cloudinary’s Angular SDKs

Advanced Image Component for Cloudinary’s Angular SDKs

With Cloudinary’s current client-side SDKs, such as React, Vue, and Angular, you can manage images in numerous amazing ways, for example, making use of media from Cloudinary for your project, transforming media, and enhancing the responsiveness of your site. A new and exciting feature in our Angular SDK, called the Advanced Image component, takes image management to the next level by handling many common front-end (FE) tasks, such as lazy loading, placeholding, accessibility, and, coming soon, zooming. Just ask the component to perform any of those tasks by adding the appropriate attributes and it’ll do the rest.

Webinar
How to Optimize for Page Load Speed

Feel free to watch this accompanying video if you’d prefer or read on for the details.

Lazy Loading

Lazy-loading an image means that you download and display the image only if necessary, such as when the viewer scrolls down and the image is about to enter the viewport, hence economizing load time.

All you need to do is add the attribute loading=“lazy” to your image’s cl-image tag, for example:

Copy to clipboard
<cl-image loading=”lazy” public-id=”kit” width=”500”></cl-image>

Afterwards, that image loads only when it is in the viewport.

Note
For Google Chrome, native lazy-loading, which has been available since Chrome 76, applies. For other browsers, we implemented lazy loading with the Intersection Observer API.

Placeholding

Image size affects website content’s load-time the most. To boost viewer experience, ensure that your images are of the smallest possible size.

An image’s placeholder is a much smaller, lower-quality version of the image to be displayed. A smart way to accelerate page loading is to first load a tiny, low-quality image as a placeholder, followed by the real image itself.

To make that happen, add placeholder as a nested attribute to your cl-image tag, as in this example:

Copy to clipboard
<cl-image loading=”lazy” public-id=”bear” width=”500”>
   <cl-placeholder type=”pixelate”></cl-placeholder>
<cl-image>

Several placeholder types are available, with the default being a lower-quality, blurred image. Here are the options along with their file sizes as compared to the original:

LQIP

We recommend that you adopt both placeholding and lazy loading for your images to ensure that the originals are downloaded only when necessary.

Support for Accessibility

All modern apps must support accessibility for the visually impaired, who can make use of widgets that enable them to customize apps to accommodate their viewing needs. How your app reacts to the customization is up to you, however.

A common approach is to change the app's theme to dark mode by tweaking the CSS. Nonetheless, that strategy misses an important aspect of the app: the images. To fully support accessibility, ensure that, when asked to change a page to dark mode, the related images also transform to a darker version. Simply add the attribute accessibility=“darkmode” to the cl-image tag.

You have four options to choose from: darkmode, colorblind, monochrome, and brightmode. The diagram below illustrates the differences.

accessibility

More in the Horizon

We'll soon add the zooming capability to the Advanced Image component, which will also be available for our React and Vue SDKs in the near future. In addition, we’ll keep improving the component and adding other features. Watch this space for the announcements and be sure to give Cloudinary a try for free!

Recap

Cloudinary's Advanced Image Component's automated capabilities for common FE tasks spell significant time savings and peace of mind for developers. High on our priority list is the component's availability for the React JavaScript SDK and the Vue.js JavaScript SDK. Additionally, we'll continue to stay alert to front-end needs and to enhance our image components with features geared toward easing the life of FE developers. That's a promise. Be sure to give Cloudinary a try!

Recent Blog Posts

Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

David first shared his thoughts at our ImageCon coverence last October and this case study is an abbreviated version of Minted’s success using Cloudinary.

Over time, Faithful renderings of the creations of the illustrators, textile designers, painters, packaging designers, marketers, and stay-at-home moms, all of whom are core contributors of the Minted world, was getting harder and harder. Legacy technology wasn’t cutting it any more—and it was time for Cloudinary to step in.

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more

New for DAM: Media Library Extension for Chrome

By Sharon Yelenik
A New Media Library Chrome Extension for Cloudinary DAM

With the introduction of the Media Library Extension, a Chrome-browser add-on that streamlines the access to, search for, and management of images and videos, Cloudinary offers yet another effective tool for its Digital Asset Management (DAM) solution. Let’s have a look at how most teams are currently working with media assets and how the new add-on not only boosts efficiency, but also renders the process a pleasure to work with.

Read more
New Features Supercharge Cloudinary’s Digital Asset Management Solution.

Today, I’m thrilled to announce the launch of Apps for Digital Asset Management and a Media Library Extension for the Chrome browser, which enables easy, flexible integration with all web-based applications in addition to making asset discovery more robust and accessible to all.

Read more
Scale and Automate Workflows With Modern Digital Asset Management Systems

With building, growing, and maintaining a strong digital presence being a top priority for all brands, high-quality visual content is paramount. In fact, consumers are 40 times more likely to share visual content on social networks than on other forums. Plus, a recent study from Wyzowl found that 84% of consumers made purchase decisions after watching a video, which explains why many brands are adding more and more visual media to their sites.

Read more