{"id":22032,"date":"2020-03-25T15:41:40","date_gmt":"2020-03-25T15:41:40","guid":{"rendered":"http:\/\/advanced_image_component_for_cloudinary_s_front_end_sdks"},"modified":"2022-09-23T09:58:29","modified_gmt":"2022-09-23T16:58:29","slug":"advanced_image_component_for_cloudinary_s_front_end_sdks","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks","title":{"rendered":"Advanced Image Component for Cloudinary\u2019s Angular SDKs"},"content":{"rendered":"

With Cloudinary\u2019s current client-side SDKs, such as React<\/a>, Vue<\/a>, and Angular<\/a>, 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<\/a> of your site. A new and exciting feature in our Angular SDK, called the Advanced Image component<\/strong>, takes image management to the next level by handling many common front-end (FE) tasks, such as lazy loading<\/a>, placeholding, accessibility<\/a>, and, coming soon, zooming. Just ask the component to perform any of those tasks by adding the appropriate attributes and it\u2019ll do the rest.<\/p>\n

Feel free to watch this accompanying video if you\u2019d prefer or read on for the details.<\/p>\n

Lazy Loading<\/h2>\n

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

All you need to do is add the attribute loading=\u201clazy\u201d<\/code> to your image\u2019s cl-image<\/code> tag, for example:<\/p>\n

<cl-image loading=\u201dlazy\u201d public-id=\u201dkit\u201d width=\u201d500\u201d><\/cl-image>\n<\/code><\/pre>\n
Afterwards, that image loads only when it is in the viewport.<\/p>\n
Note:<\/strong> 
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.<\/p><\/div>\n
Placeholding<\/h2>\n
Image size affects website content\u2019s load-time the most. To boost viewer experience, ensure that your images are of the smallest possible size.<\/p>\n
An image\u2019s 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.<\/p>\n
To make that happen, add placeholder<\/code> as a nested attribute to your cl-image<\/code> tag, as in this example:<\/p>\n
<cl-image loading=\u201dlazy\u201d public-id=\u201dbear\u201d width=\u201d500\u201d>\n   <cl-placeholder type=\u201dpixelate\u201d><\/cl-placeholder>\n<cl-image>\n<\/code><\/pre>\n
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:<\/p>\n
\"LQIP\"<\/p>\n
We recommend that you adopt both placeholding and lazy loading for your images to ensure that the originals are downloaded only<\/strong> when necessary.<\/p>\n
Support for Accessibility<\/h2>\n
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.<\/p>\n
A common approach is to change the app\u2019s theme to dark mode by tweaking the CSS. Nonetheless,\nthat 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=\u201cdarkmode\u201d<\/code> to the cl-image<\/code> tag.<\/p>\n
You have four options to choose from: darkmode<\/code>, colorblind<\/code>, monochrome<\/code>, and brightmode<\/code>. The diagram below illustrates the differences.<\/p>\n
\"accessibility\"<\/p>\n
More in the Horizon<\/h2>\n
We\u2019ll 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\u2019ll keep improving the component and adding other features. Watch this space for the announcements and be sure to give Cloudinary a try for free!<\/a><\/p>\n
Recap<\/h2>\n
Cloudinary\u2019s Advanced Image Component\u2019s automated capabilities for common FE tasks spell significant time savings and peace of mind for developers. High on our priority list is the component\u2019s availability for the React JavaScript SDK and the Vue.js JavaScript SDK. Additionally, we\u2019ll 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\u2019s a promise. Be sure to give Cloudinary a try<\/a>!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22033,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[337,186,263],"class_list":["post-22032","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-accessibility","tag-lazy-loading","tag-sdk"],"acf":[],"yoast_head":"\nAdvanced Image Component for Cloudinary\u2019s Angular SDKs<\/title>\n<meta name=\"description\" content=\"The newly available Advanced Image component for Cloudinary\u2019s Angular SDKs automates many image-management tasks, e.g., lazy loading, placeholding, and accessibility.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Advanced Image Component for Cloudinary\u2019s Angular SDKs\" \/>\n<meta property=\"og:description\" content=\"The newly available Advanced Image component for Cloudinary\u2019s Angular SDKs automates many image-management tasks, e.g., lazy loading, placeholding, and accessibility.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-25T15:41:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-23T16:58:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649757484\/Web_Assets\/blog\/Advanced-Image-component_22033b9ac0\/Advanced-Image-component_22033b9ac0-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Advanced Image Component for Cloudinary\u2019s Angular SDKs\",\"datePublished\":\"2020-03-25T15:41:40+00:00\",\"dateModified\":\"2022-09-23T16:58:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649757484\/Web_Assets\/blog\/Advanced-Image-component_22033b9ac0\/Advanced-Image-component_22033b9ac0.png?_i=AA\",\"keywords\":[\"Accessibility\",\"Lazy Loading\",\"SDK\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks\",\"url\":\"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks\",\"name\":\"Advanced Image Component for Cloudinary\u2019s Angular SDKs\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649757484\/Web_Assets\/blog\/Advanced-Image-component_22033b9ac0\/Advanced-Image-component_22033b9ac0.png?_i=AA\",\"datePublished\":\"2020-03-25T15:41:40+00:00\",\"dateModified\":\"2022-09-23T16:58:29+00:00\",\"description\":\"The newly available Advanced Image component for Cloudinary\u2019s Angular SDKs automates many image-management tasks, e.g., lazy loading, placeholding, and accessibility.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649757484\/Web_Assets\/blog\/Advanced-Image-component_22033b9ac0\/Advanced-Image-component_22033b9ac0.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649757484\/Web_Assets\/blog\/Advanced-Image-component_22033b9ac0\/Advanced-Image-component_22033b9ac0.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advanced Image Component for Cloudinary\u2019s Angular SDKs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Advanced Image Component for Cloudinary\u2019s Angular SDKs","description":"The newly available Advanced Image component for Cloudinary\u2019s Angular SDKs automates many image-management tasks, e.g., lazy loading, placeholding, and accessibility.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks","og_locale":"en_US","og_type":"article","og_title":"Advanced Image Component for Cloudinary\u2019s Angular SDKs","og_description":"The newly available Advanced Image component for Cloudinary\u2019s Angular SDKs automates many image-management tasks, e.g., lazy loading, placeholding, and accessibility.","og_url":"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks","og_site_name":"Cloudinary Blog","article_published_time":"2020-03-25T15:41:40+00:00","article_modified_time":"2022-09-23T16:58:29+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649757484\/Web_Assets\/blog\/Advanced-Image-component_22033b9ac0\/Advanced-Image-component_22033b9ac0-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks"},"author":{"name":"","@id":""},"headline":"Advanced Image Component for Cloudinary\u2019s Angular SDKs","datePublished":"2020-03-25T15:41:40+00:00","dateModified":"2022-09-23T16:58:29+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649757484\/Web_Assets\/blog\/Advanced-Image-component_22033b9ac0\/Advanced-Image-component_22033b9ac0.png?_i=AA","keywords":["Accessibility","Lazy Loading","SDK"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks","url":"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks","name":"Advanced Image Component for Cloudinary\u2019s Angular SDKs","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649757484\/Web_Assets\/blog\/Advanced-Image-component_22033b9ac0\/Advanced-Image-component_22033b9ac0.png?_i=AA","datePublished":"2020-03-25T15:41:40+00:00","dateModified":"2022-09-23T16:58:29+00:00","description":"The newly available Advanced Image component for Cloudinary\u2019s Angular SDKs automates many image-management tasks, e.g., lazy loading, placeholding, and accessibility.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649757484\/Web_Assets\/blog\/Advanced-Image-component_22033b9ac0\/Advanced-Image-component_22033b9ac0.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649757484\/Web_Assets\/blog\/Advanced-Image-component_22033b9ac0\/Advanced-Image-component_22033b9ac0.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/advanced_image_component_for_cloudinary_s_front_end_sdks#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Advanced Image Component for Cloudinary\u2019s Angular SDKs"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649757484\/Web_Assets\/blog\/Advanced-Image-component_22033b9ac0\/Advanced-Image-component_22033b9ac0.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=22032"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22032\/revisions"}],"predecessor-version":[{"id":25161,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22032\/revisions\/25161"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22033"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}