图片SEO优化与Alt属性设置：图片SEO工程实践与Alt规范

很多技术团队在做站内搜索引擎优化时，习惯将大部分精力放在结构化数据、内链拓扑和内容质量上，而将图片资源简单视作“配图”或纯前端切图资产。从底层架构和流量获取的双重维度来看，图片既是影响 Core Web Vitals（特别是 LCP 指标）的性能重灾区，也是获取 Google Images、百度图片等垂类搜索流量的关键入口。

做好图片优化，本质上是平衡两件事：交付效率（性能与爬虫抓取预算）与语义表达（可访问性与上下文索引）。

一、 交付层优化：降低抓取开销与提速渲染

在考虑让搜索引擎“看懂”图片之前，必须先保证图片能以最低的成本被抓取与渲染。大型站点的图片体积如果失控，会直接挤占服务器带宽，恶化爬取预算（Crawl Budget）。

1. 格式现代化的工程推进
   生产环境中应默认放弃传统的 PNG/JPEG 直出方案。在 Nginx 或 CDN 边缘节点建立动态转码机制，优先通过内容协商（Accept: image/avif,image/webp）下发 AVIF 或 WebP 格式。同等视觉质量下，WebP 能降低 25%-35% 的体积，AVIF 更是可以压低 50% 以上。
2. 尺寸显式声明与自适应输出
   必须在 <img> 标签中硬编码 width 和 height 属性，或者通过 CSS aspect-ratio 预留占位，避免图片下载完成前触发 CLS（累积布局偏移）。同时，配合 srcset 与 sizes 交付不同分辨率资源，杜绝移动端加载 4K 大图的恶劣体验：

   <img src="infra-topology-800.webp"
       srcset="infra-topology-400.webp 400w, infra-topology-800.webp 800w"
       sizes="(max-width: 600px) 400px, 800px"
       width="800" height="450"
       loading="lazy"
       decoding="async"
       >

3. 首屏与非首屏分流
   非首屏统一使用浏览器原生 loading="lazy"，但切忌将首屏的主图（LCP 元素）加入懒加载。首屏关键图应当搭配 <link rel="preload"> 预先拉取，以提升渲染评分。