Az NgOptimizedImage direktíva igen hasznos lehet, ha szerenék hogy az angularos weboldalunk, webalkalmazásunk kellően reszponzív, gyors legyen még akkor is, ha képek megjelenítéséről van szó. És itt persze nem közvetlen képtovábbítás a lényeg, hanem hogy milyen módon képes optimalizálni a kép betöltését, megjelenítésést az Angular.

Használata pofonegyszerű, csak be kell importálunk, majd figyelni, hogy a képeknél a fájl path-t a direktívának megfelően adjuk meg.

import { NgOptimizedImage } from '@angular/common'

<img ngSrc="cat.jpg">

A direktíva a 15-ös verzióban debütált, de backportoláták egészen a 13-as kiadásig. Rengetek olyan hasznos "apróságot" képes megcsinálni helyettünk, amelyekkel sokat nyerhetünk:

• lazy loading
• preconnect link tag generálás
• srcset generálás
• image CDN használat

További részletek a dokumentációban olvashatóak.