Angular团队一直专注于改进框架，让一切变得更快，从编译器到我们的运行时代码，都得到了优化、最小化和摇树。
图像优化指令被添加到角15本着同样的精神。
它的作用:
- 智能延迟加载:用户在页面加载时不可见的图像稍后会在用户向下滚动到该页面部分时加载。
- 关键图像的优先级:首先加载基本图像(例如标题横幅)
- 针对流行映像工具的优化配置:如果你使用的是CDN，该指令将自动从CDN中选择适当的图像大小，根据图像将显示在屏幕上的像素数优化下载大小。
- 内置错误和警告:除了上述内置优化之外，该指令还具有内置检查，以确保开发人员在图像标记中遵循了推荐的最佳实践。
你所要做的就是使用ngSrc属性，而不仅仅是src：
对于CDN优化，您可以使用其中之一现有4家供应商(或创建自己的)，以便始终要求适当的图像大小。在我的例子，我使用Imgix所以我的配置看起来像这样:
仅从这些信息中，我们就可以知道Angular能够生成适当的图像url来获取尽可能小的图像来适合我们的div——如果你需要的只是200 x 100像素的图像，就不用再下载2000 x 1000像素的图像了:
的NgOptimizedImage指令的一部分@angular /常见模块，就像ngFor而且ngIf，所以如果你使用这些指令，它已经是你工具箱的一部分了。
它也可以用作独立的指令没有进口CommonModule．我的例子是在斯塔克布利茨．的官方文档以及更多关于这个指令可以在这里找到．
