如何用srcset或NgOptimizedImage先加载大图预览优化白屏时间？

渐进式加载：先小图占位，再高清替换 #

要减少大图加载时的白屏时长，最简洁可靠的方式是先加载极小尺寸的缩略图作为占位，待高清图加载完成后自动替换。NgOptimizedImage和原生srcset都能完美实现这个需求，且比纯背景图方案更可控。

一、NgOptimizedImage的优化实践 #

你当前的代码已经用到了ngSrcset，只需添加占位图配置就能实现预览优先加载：

优化后代码 #

<img width="6000" height="3200" alt=""
     ngSrc="assets/avatar" 
     ngSrcset="600w, 1000w, 1500w, 2000w, 2500w, 3000w, 6000w"
     placeholder="assets/avatar-100w" <!-- 指定100px宽的预览图 -->
     loading="lazy" <!-- 非首屏图片建议启用懒加载 -->
/>

• placeholder：指定一张极小分辨率的缩略图（比如100px宽），Angular会优先加载它作为占位，高清图加载完成后自动替换。
• 确保你的图片服务能生成对应尺寸的缩略图（比如assets/avatar-100w是实际存在的资源）。

额外优化建议 #

• 首屏图片添加priority="true"：让浏览器优先加载该图的预览和高清版本，避免渲染阻塞。
• 用aspectRatio替代固定宽高：如果需要灵活布局，可以写aspectRatio="6000/3200"，保持图片比例的同时适配不同容器。

二、原生srcset的实现方式 #

如果不用Angular指令，原生HTML也能实现类似效果：

<img width="6000" height="3200" alt=""
     src="assets/avatar-100w" <!-- 先加载小图占位 -->
     srcset="assets/avatar-600w 600w,
             assets/avatar-1000w 1000w,
             assets/avatar-6000w 6000w"
     sizes="(max-width: 600px) 600px, 100vw" <!-- 根据视口选择合适尺寸 -->
     loading="lazy"
/>

• src属性指定的小图会被优先加载，浏览器随后根据srcset和sizes规则自动选择最合适的高清图替换。
• 注意：原生方案需要手动写全每个尺寸的完整路径，不像NgOptimizedImage可以自动拼接尺寸后缀（前提是你的图片服务支持按尺寸命名的规则）。

三、为什么不推荐纯背景图方案 #

你提到的纯背景图方案确实存在加载顺序倒置的问题：浏览器通常优先加载<img>标签的资源，背景图的加载优先级较低，可能出现高清图加载完成后才加载预览图的情况，反而无法解决白屏问题。而<img>标签的方案能明确控制加载顺序，更可靠。

内容的提问来源于stack exchange，提问作者Axel Herrmann