{"id":35728,"date":"2024-09-18T07:00:00","date_gmt":"2024-09-18T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=35728"},"modified":"2025-05-16T13:10:06","modified_gmt":"2025-05-16T20:10:06","slug":"using-ngoptimizedimage-with-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary","title":{"rendered":"Using NgOptimizedImage With Cloudinary"},"content":{"rendered":"

While Cloudinary provides an extensive Angular SDK<\/a>, which also includes the CloudinaryImageComponent<\/code> that you can use to display your Cloudinary images, a little-known fact is that Angular exposes a Cloudinary image loader provider<\/a> you can use with the NgOptimizedImage directive<\/a>.<\/p>\n

That means if you don\u2019t want to install the Cloudinary Angular SDK, or if you\u2019re an Angular purist and prefer to use Angular\u2019s built-in features as much as possible, you can still conveniently load Cloudinary images using Angular\u2019s img<\/code> tag and the NgOptimizedImage<\/code> directive.<\/p>\n

How Does the NgOptimizedImage Directive Work?<\/h2>\n

The NgOptimizedImage<\/code> directive in Angular wraps the HTML img<\/code> element while adhering to best practices for image loading performance, such as automatically setting the fetchpriority<\/code> attribute on the <img><\/code> tag, lazy loading non-priority images by default, generating preconnect links, generating srcset<\/code> attributes to request images at appropriate sizes based on the viewport, or providing preload hints when using server-side rendering (SSR). It also enforces specifying images with width<\/code> and height<\/code> attributes to prevent layout shifts and warns you of incorrect dimensions or potential visual distortion.<\/p>\n

The NgOptimizedImage<\/code> directive can also automatically utilize low-resolution placeholders when using a CDN such as Cloudinary and custom placeholders via base64 data URLs.<\/p>\n

To begin, import the directive from @angular\/common<\/code> and include it in your component or module imports:<\/p>\n

import<\/span> { NgOptimizedImage } from<\/span> '@angular\/common'<\/span>;\n@Component({\n  selector<\/span>: 'app-component'<\/span>,\n  imports<\/span>: [NgOptimizedImage], \/\/ Import the directive<\/span>\n  templateURL<\/span>: '.\/app.component.html'<\/span>,\n})\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
And then, in your HTML template, you can use the NgOptimizedImage<\/code> directive by specifying the ngSrc<\/code> attribute in your img<\/code> tag:<\/p>\n
<img<\/span> ngSrc<\/span>=\"public\/my-image.jpg\"<\/span> width<\/span>=\"500\"<\/span> height<\/span>=\"500\"<\/span> \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
If you need the image to load first, you can use the priority<\/code> attribute:<\/p>\n
<img<\/span> ngSrc<\/span>=\"public\/my-image.jpg\"<\/span> width<\/span>=\"500\"<\/span> height<\/span>=\"500\"<\/span> priority<\/span> \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
If you need the image to fill the container, you can use the fill<\/code> attribute and omit the width<\/code> and height<\/code> attributes. The fill mode allows it to behave like a background image, adjusting to the container\u2019s dimensions.<\/p>\n
<div<\/span> style<\/span>=\"position: relative; width: 500px; height: 250px\"<\/span>><\/span>\n  <img<\/span> ngSrc<\/span>=\"public\/my-image.jpg\"<\/span> fill<\/span> \/><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Using the Cloudinary Image Loader With NgOptimizedImage<\/h2>\n
As mentioned, you can use the built-in provideCloudinaryLoader<\/code> function to integrate your Cloudinary instance with your Angular application. To use it, you need to provide the provideCloudinaryLoader<\/code> function in your application\u2019s providers array:<\/p>\n
\/\/ app.config.ts<\/span>\nimport<\/span> { cloudinaryCloudName } from<\/span> \"..\/environments\/environment\"<\/span>;\nimport<\/span> { ApplicationConfig, provideZoneChangeDetection } from<\/span> \"@angular\/core\"<\/span>;\nimport<\/span> { provideRouter } from<\/span> \"@angular\/router\"<\/span>;\n\nimport<\/span> { routes } from<\/span> \".\/app.routes\"<\/span>;\nimport<\/span> { provideClientHydration } from<\/span> \"@angular\/platform-browser\"<\/span>;\n\n\/\/ Import the provideCloudinaryLoader function<\/span>\nimport<\/span> { provideCloudinaryLoader } from<\/span> \"@angular\/common\"<\/span>;\n\nexport<\/span> const<\/span> appConfig: ApplicationConfig = {\n  providers<\/span>: [\n    provideZoneChangeDetection({ eventCoalescing<\/span>: true<\/span> }),\n    provideRouter(routes),\n    provideClientHydration(),\n    \/\/ Provide the Cloudinary loader with your Cloudinary URL<\/span>\n    provideCloudinaryLoader(`https:\/\/res.cloudinary.com\/${cloudinaryCloudName}<\/span>`<\/span>),\n  ],\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You can then use the NgOptimizedImage<\/code> directive with the ngSrc<\/code> attribute to load your Cloudinary images:<\/p>\n
\/\/ cld-sample.jpg is an image that should exist in your Cloudinary account<\/span>\n<img ngSrc=\"cld-sample.jpg\"<\/span> width=\"500\"<\/span> height=\"500\"<\/span> priority \/>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You can also add the placeholder<\/code> attribute to automatically download a low-resolution placeholder image first before the full image is loaded:<\/p>\n
<img<\/span> ngSrc<\/span>=\"cld-sample.jpg\"<\/span> width<\/span>=\"500\"<\/span> height<\/span>=\"500\"<\/span> priority<\/span> placeholder<\/span> \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
<img<\/span>\n  _ngcontent-ng-c1071307065<\/span>=\"\"<\/span>\n  ngsrc<\/span>=\"cld-sample.jpg\"<\/span>\n  width<\/span>=\"500\"<\/span>\n  height<\/span>=\"500\"<\/span>\n  priority<\/span>=\"\"<\/span>\n  placeholder<\/span>=\"\"<\/span>\n  ng-reflect-ng-src<\/span>=\"cld-sample.jpg\"<\/span>\n  ng-reflect-width<\/span>=\"500\"<\/span>\n  ng-reflect-height<\/span>=\"500\"<\/span>\n  ng-reflect-priority<\/span>=\"\"<\/span>\n  ng-reflect-placeholder<\/span>=\"\"<\/span>\n  loading<\/span>=\"eager\"<\/span>\n  fetchpriority<\/span>=\"high\"<\/span>\n  ng-img<\/span>=\"true\"<\/span>\n  src<\/span>=\"https:\/\/res.cloudinary.com\/[my-cloud-name]\/image\/upload\/q_auto\/cld-sample.jpg\"<\/span>\n  srcset<\/span>=\"\n    https:\/\/res.cloudinary.com\/[my-cloud-name]\/image\/upload\/q_auto,w_500\/cld-sample.jpg  1x,\n    https:\/\/res.cloudinary.com\/[my-cloud-name]\/image\/upload\/q_auto,w_1000\/cld-sample.jpg 2x\n  \"<\/span>\n  style<\/span>=\"\"<\/span>\n\/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The Solution<\/h2>\n
The most convenient solution is to use the Cloudinary Angular SDK<\/a>, which provides a comprehensive set of features and options for working with Cloudinary images.<\/p>\n
However, you may still want to use the NgOptimizedImage<\/code> directive. In that case, you can create a custom image loader<\/a> that integrates with Cloudinary\u2019s URL API to generate image URLs with the desired transformations.<\/p>\n
You can also use some features of the @cloudinary\/url-gen SDK to generate the transformation string in your loader based on the specified loaderParams<\/a>.<\/p>\n
First, you\u2019ll need to install the @cloudinary\/url-gen<\/code> package:<\/p>\n
npm<\/span> install<\/span> @cloudinary<\/span>\/url-gen\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Then, you can create a custom Cloudinary loader function that generates the Cloudinary URL based on the provided ImageLoaderConfig<\/code> and loaderParams<\/code>. Here\u2019s an example of a custom Cloudinary loader function that generates a Cloudinary URL with the specified transformations:<\/p>\n
import<\/span> { cloudinaryCloudName } from<\/span> \"..\/environments\/environment\"<\/span>;\nimport<\/span> { ImageLoaderConfig } from<\/span> \"@angular\/common\"<\/span>;\nimport<\/span> { transformationStringFromObject } from<\/span> \"@cloudinary\/url-gen\/index\"<\/span>;\nimport<\/span> { LegacyTransformation } from<\/span> \"@cloudinary\/url-gen\/types\/types\"<\/span>;\n\n\/\/ Reexport the type from the Cloudinary SDK for the transformation config<\/span>\nexport<\/span> type TransformationConfig = LegacyTransformation;\n\nexport<\/span> function<\/span> customCloudinaryLoader<\/span>(config: ImageLoaderConfig<\/span>) <\/span>{\n  \/\/ Specify your Cloudinary URL here<\/span>\n  const<\/span> path = `https:\/\/res.cloudinary.com\/${cloudinaryCloudName}<\/span>`<\/span>;\n\n  \/\/ For a placeholder image, we use the lowest image setting available to reduce the load time<\/span>\n  \/\/ else we use the auto size<\/span>\n  const<\/span> quality = config.isPlaceholder ? \"q_auto:low\"<\/span> : \"q_auto\"<\/span>;\n\n  let<\/span> params = `${quality}<\/span>`<\/span>;\n  if<\/span> (config.width) {\n    params += `,w_${config.width}<\/span>`<\/span>;\n  }\n  if<\/span> (config.loaderParams && config.loaderParams[\"transformation\"<\/span>]) {\n    \/\/ Generate the transformation string from the loaderParams object using the Cloudinary SDK<\/span>\n    params += `,${transformationStringFromObject(\n      config.loaderParams[\"transformation\"<\/span>]\n    )}<\/span>`<\/span>;\n  }\n\n  \/\/ Return the Cloudinary URL with the specified transformations<\/span>\n  return<\/span> `${path}<\/span>\/image\/upload\/${params}<\/span>\/${config.src}<\/span>`<\/span>;\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You can then provide this custom loader function in your application\u2019s providers<\/code> array instead of the built-in Cloudinary loader:<\/p>\n
import<\/span> { ApplicationConfig, provideZoneChangeDetection } from<\/span> \"@angular\/core\"<\/span>;\nimport<\/span> { provideRouter } from<\/span> \"@angular\/router\"<\/span>;\n\nimport<\/span> { routes } from<\/span> \".\/app.routes\"<\/span>;\nimport<\/span> { provideClientHydration } from<\/span> \"@angular\/platform-browser\"<\/span>;\nimport<\/span> { IMAGE_LOADER } from<\/span> \"@angular\/common\"<\/span>;\nimport<\/span> { customCloudinaryLoader } from<\/span> \".\/custom-cloudinary-loader\"<\/span>;\n\nexport<\/span> const<\/span> appConfig: ApplicationConfig = {\n  providers<\/span>: [\n    provideZoneChangeDetection({ eventCoalescing<\/span>: true<\/span> }),\n    provideRouter(routes),\n    provideClientHydration(),\n    \/\/ Provide the custom loader<\/span>\n    {\n      provide<\/span>: IMAGE_LOADER,\n      useValue<\/span>: customCloudinaryLoader,\n    },\n  ],\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
And specify the transformations you want to apply to the image in your component as the loaderParams<\/code> object:<\/p>\n
import<\/span> { TransformationConfig } from<\/span> \".\/custom-cloudinary-loader\"<\/span>;\n\n@Component({\n  selector<\/span>: \"app-root\"<\/span>,\n  standalone<\/span>: true<\/span>,\n  imports<\/span>: [RouterOutlet, NgOptimizedImage],\n  templateUrl<\/span>: \".\/app.component.html\"<\/span>,\n  styleUrl<\/span>: \".\/app.component.scss\"<\/span>,\n})\nexport<\/span> class<\/span> AppComponent<\/span> <\/span>{\n  loaderParams<\/span>: {\n    transformation<\/span>: TransformationConfig;\n  } = {\n    \/\/ Specify the transformations you want to apply to the image as an object<\/span>\n    transformation<\/span>: [\n      { gravity<\/span>: \"face\"<\/span>, height<\/span>: 500<\/span>, width<\/span>: 500<\/span>, crop<\/span>: \"thumb\"<\/span> },\n      { radius<\/span>: 100<\/span> },\n    ],\n  };\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
And finally, use the loaderParams<\/code> object in your NgOptimizedImage<\/code> directive:<\/p>\n
<img<\/span>\n  ngSrc<\/span>=\"cld-sample.jpg\"<\/span>\n  width<\/span>=\"500\"<\/span>\n  height<\/span>=\"500\"<\/span>\n  priority<\/span>\n  placeholder<\/span>\n  [loaderParams<\/span>]=\"loaderParams\"<\/span>\n\/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
<img<\/span>\n  _ngcontent-ng-c3913398994<\/span>=\"\"<\/span>\n  ngsrc<\/span>=\"cld-sample.jpg\"<\/span>\n  width<\/span>=\"500\"<\/span>\n  height<\/span>=\"500\"<\/span>\n  priority<\/span>=\"\"<\/span>\n  placeholder<\/span>=\"\"<\/span>\n  ng-reflect-ng-src<\/span>=\"cld-sample.jpg\"<\/span>\n  ng-reflect-width<\/span>=\"500\"<\/span>\n  ng-reflect-height<\/span>=\"500\"<\/span>\n  ng-reflect-priority<\/span>=\"\"<\/span>\n  ng-reflect-placeholder<\/span>=\"\"<\/span>\n  ng-reflect-loader-params<\/span>=\"[object Object]\"<\/span>\n  loading<\/span>=\"eager\"<\/span>\n  fetchpriority<\/span>=\"high\"<\/span>\n  ng-img<\/span>=\"true\"<\/span>\n  src<\/span>=\"https:\/\/res.cloudinary.com\/[my-cloud-name]\/image\/upload\/q_auto,c_thumb,g_face,h_500,w_500\/r_100\/cld-sample.jpg\"<\/span>\n  srcset<\/span>=\"\n    https:\/\/res.cloudinary.com\/[my-cloud-name]\/image\/upload\/q_auto,w_500,c_thumb,g_face,h_500,w_500\/r_100\/cld-sample.jpg  1x,\n    https:\/\/res.cloudinary.com\/[my-cloud-name]\/image\/upload\/q_auto,w_1000,c_thumb,g_face,h_500,w_500\/r_100\/cld-sample.jpg 2x\n  \"<\/span>\n  style<\/span>=\"\"<\/span>\n\/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
That way, you can use the NgOptimizedImage<\/code> directive with Cloudinary images, including transformations, in your Angular application.<\/p>\n
Conclusion<\/h2>\n
The NgOptimizedImage<\/code> directive in Angular provides a convenient way to optimize image loading performance in your Angular applications. While the built-in Cloudinary image loader is limited, you can create a custom loader function that integrates with Cloudinary\u2019s URL API to generate the image URLs with the desired transformations.<\/p>\n
Is the custom loader function worth the effort? In most cases, probably not. The Cloudinary Angular SDK provides a much more comprehensive set of features and options for working with Cloudinary images, and is generally easier to use than creating a custom loader function.<\/p>\n
However, this exercise can provide a good learning experience and a deeper understanding of how image loading optimization works in Angular, and if you\u2019re an Angular purist or have another reason not to fully use the Cloudinary SDK, the NgOptimizedImage<\/code> directive with a custom Cloudinary loader can be a viable option.<\/p>\n
Sign up<\/a> for a free Cloudinary account today to optimize your visual assets. And if you found this post helpful and would like to learn more, feel free to join the Cloudinary Community forum<\/a> and its associated Discord<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":35730,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[332,227],"class_list":["post-35728","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-api","tag-performance-optimization"],"acf":[],"yoast_head":"\nUsing NgOptimizedImage With Cloudinary<\/title>\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\/using-ngoptimizedimage-with-cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using NgOptimizedImage With Cloudinary\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-18T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-16T20:10:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1726270986\/NgOptimizedImage-blog\/NgOptimizedImage-blog-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\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\/using-ngoptimizedimage-with-cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Using NgOptimizedImage With Cloudinary\",\"datePublished\":\"2024-09-18T14:00:00+00:00\",\"dateModified\":\"2025-05-16T20:10:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726270986\/NgOptimizedImage-blog\/NgOptimizedImage-blog.jpg?_i=AA\",\"keywords\":[\"API\",\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary\",\"name\":\"Using NgOptimizedImage With Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726270986\/NgOptimizedImage-blog\/NgOptimizedImage-blog.jpg?_i=AA\",\"datePublished\":\"2024-09-18T14:00:00+00:00\",\"dateModified\":\"2025-05-16T20:10:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726270986\/NgOptimizedImage-blog\/NgOptimizedImage-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726270986\/NgOptimizedImage-blog\/NgOptimizedImage-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using NgOptimizedImage With Cloudinary\"}]},{\"@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\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using NgOptimizedImage With Cloudinary","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\/using-ngoptimizedimage-with-cloudinary","og_locale":"en_US","og_type":"article","og_title":"Using NgOptimizedImage With Cloudinary","og_url":"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2024-09-18T14:00:00+00:00","article_modified_time":"2025-05-16T20:10:06+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1726270986\/NgOptimizedImage-blog\/NgOptimizedImage-blog-jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Using NgOptimizedImage With Cloudinary","datePublished":"2024-09-18T14:00:00+00:00","dateModified":"2025-05-16T20:10:06+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary"},"wordCount":4,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726270986\/NgOptimizedImage-blog\/NgOptimizedImage-blog.jpg?_i=AA","keywords":["API","Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary","url":"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary","name":"Using NgOptimizedImage With Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726270986\/NgOptimizedImage-blog\/NgOptimizedImage-blog.jpg?_i=AA","datePublished":"2024-09-18T14:00:00+00:00","dateModified":"2025-05-16T20:10:06+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726270986\/NgOptimizedImage-blog\/NgOptimizedImage-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726270986\/NgOptimizedImage-blog\/NgOptimizedImage-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/using-ngoptimizedimage-with-cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using NgOptimizedImage With Cloudinary"}]},{"@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":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1726270986\/NgOptimizedImage-blog\/NgOptimizedImage-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/35728","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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=35728"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/35728\/revisions"}],"predecessor-version":[{"id":37660,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/35728\/revisions\/37660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/35730"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=35728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=35728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=35728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
You should now see the transformations applied to your Cloudinary image<\/a> when you navigate to your Angular application in the browser. The rendered html<\/code> should look like this:<\/p>\n
Using Angular\u2019s Built-in Cloudinary Image Loader<\/h2>\n
Angular provides a built-in Cloudinary image loader, but it isn\u2019t widely adopted because of its basic capabilities. The loader\u2019s current implementation<\/a> lacks the flexibility to fully leverage Cloudinary\u2019s powerful features, such as resizing, transformations, and optimizations, which are key to maximizing the platform\u2019s potential.<\/p>\n
That\u2019s it! You should now see your image loaded when you run your Angular application with ng serve<\/code> and navigate to localhost:4200<\/a>. The rendered html<\/code> should look something like this:<\/p>\n
For more details about the NgOptimizedImage<\/code> directive, check out the Angular documentation<\/a>.<\/p>\n