Nginx 不支持图片延迟加载，但可通过缓存优化、WebP 自适应、请求管控和静态资源分离提升懒加载效率。具体包括：1. 为图片设 1 年强缓存；2. 用 try_files 优先返回 WebP；3. 基于 Sec-Fetch-Dest 拦截非图像上下文请求；4. 独立图床启用 Brotli 与 HTTP/2。
Nginx 本身不支持“图片延迟加载”（lazy loading）这种前端行为，因为它属于浏览器端的渲染与交互逻辑。但你可以通过 Nginx 配置来优化图片资源的交付效率，间接提升首屏加载速度、减少带宽占用，从而让前端的懒加载更高效、更可靠。关键在于：合理缓存、按需响应、压缩传输、分离静态资源。
1. 为图片资源设置强缓存策略
让浏览器长时间缓存图片，避免重复请求，是延迟加载生效的前提——如果每次滚动到图片位置都重新请求，就失去了懒加载的意义。
- 在
location块中匹配常见图片后缀，设置Expires和Cache-Control - 建议缓存时间设为 1 年（31536000 秒），配合版本号或哈希命名实现缓存更新
location ~* \.(jpg|jpeg|png|gif|webp|svg|ico)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Vary Accept-Encoding;
}2. 启用 WebP 自适应响应（节省带宽）
现代浏览器支持 WebP 格式，体积比 JPEG/PNG 小 25%~35%。Nginx 可根据请求头 Accept 自动提供 WebP 版本（需提前生成对应文件）。
- 确保图片已预转 WebP（如
photo.jpg→photo.jpg.webp） - 利用
try_files优先尝试 WebP，回退到原格式
location ~* \.(jpg|jpeg|png|gif)$ {
add_header Vary Accept;
try_files $uri.webp $uri =404;
expires 1y;
add_header Cache-Control "public, immutable";
}3. 限制非必要图片的初始加载（配合前端 lazy 属性）
虽然 Nginx 不控制 HTML 渲染，但可通过重写规则，将未带 loading="lazy" 或未加占位符的图片请求临时拦截/降级，倒逼前端规范落地（适合内部质量管控场景）。
- 例如：拒绝无
X-Requested-With或来自非 HTML 上下文的图片直链请求 - 或对未携带
Sec-Fetch-Dest: image的请求返回低分辨率占位图（需配合 map 模块）
}
4. 分离图片服务，启用 Brotli + HTTP/2
把图片托管到独立子域（如 img.example.com），便于单独调优：
- 开启
brotli on（比 gzip 压缩率更高，尤其对 SVG/文本类图片元数据） - 强制 HTTP/2，支持多路复用，避免图片并发阻塞
- 关闭日志记录（
access_log off）降低 I/O 开销
server {
listen 443 ssl http2;
server_name img.example.com;
<pre class="brush:php;toolbar:false;">brotli on;
brotli_types image/svg+xml image/x-icon text/plain;
location ~* \.(jpg|jpeg|png|webp|gif|svg|ico)$ {
access_log off;
expires 1y;
add_header Cache-Control "public, immutable";
add_header Timing-Allow-Origin "*";
}}
真正意义上的“延迟加载”必须由 HTML 的 loading="lazy"、Intersection Observer 或 JS 库（如 lozad.js）在前端完成。Nginx 的作用是：让懒加载发生时，请求更快、更小、更稳。配置得当，能显著降低 LCP（最大内容绘制）指标，提升 Core Web Vitals 评分。
