这款工具抓取一个页面,把里面所有的 img 标签拉出来逐个体检:alt 写得对不对、有没有 width 和 height、该不该懒加载、有没有用响应式图片。一次看完整页,比在浏览器里逐个右键查看源码快得多。
图片这块有意思的地方在于,它同时踩在三条线上:alt 是无障碍的刚需,也是图片搜索的主要依据;width 和 height 影响 CLS;loading 和 srcset 影响 LCP 和流量。这几件事都不难做,但很容易在批量发布内容时被漏掉。
这是最容易搞混的一点。alt=""(空字符串)是有明确含义的:告诉读屏软件这是纯装饰图,跳过就好。而完全没有 alt 属性,读屏软件不知道该怎么办,多数会念出文件名,那个体验相当糟糕。
所以规则是:装饰性的图写 alt="",内容性的图写描述,但绝不要没有 alt 属性。工具会把这两种情况分开标注。
好的 alt 是"一个人在雨中撑伞走过霓虹街道",不是"图片1",也不是"雨,街道,城市,夜景,摄影"。前者是描述,后者是标签堆砌。判断标准很简单:如果这张图加载失败了,读到这句话的人能不能想象出图里是什么。
常见的建议是不超过 125 个字符。这个数字不是硬规定,来源是部分读屏软件的朗读断句习惯,但作为参考很实用——一句话说不完的图,通常是应该配文字说明而不是全塞进 alt 的。
alt 确实是图片搜索的重要信号,但它首先是无障碍功能。把关键词堆进去既帮不上排名,也损害真实用户的体验,属于典型的过度优化。自然地描述图片内容,该出现的关键词自然会出现。
width 和 height:写死这两个属性,浏览器在图片下载完成前就能按比例预留位置,避免内容跳动。CLS 是 Core Web Vitals 的三项之一,而图片没写尺寸是造成 CLS 的头号原因。注意即使用 CSS 控制实际显示尺寸,HTML 属性也应该写上原始尺寸。
loading 属性:首屏图不要加 loading="lazy",那会推迟它的加载,直接拖慢 LCP。反过来,首屏以下的图应该懒加载,能省下可观的初始流量。工具会按图片在 HTML 里的位置粗略判断是否首屏,给出提示。
srcset 与 picture:同一张图给不同屏幕提供不同尺寸,手机上就不用下载给桌面准备的大图。这是移动端性能优化里性价比很高的一项,但用的人不多。
图片格式:WebP 在同等观感下比 JPEG 小三成左右。工具会标出还在用传统格式的图,站里有专门的图片压缩工具可以批量转换。
要分开看,别一概而论。
alt 的影响是间接但确定的。它决定了图片能不能进图片搜索,也是搜索引擎理解图片内容的主要依据(除此之外还有周边文字和文件名)。对图片流量占比高的站——电商、旅游、美食、设计类——这是实打实的入口。
尺寸属性的影响是可量化的。它直接算进 CLS,而 CLS 是排名信号之一。这一项修起来成本极低,回报明确。
懒加载和响应式的影响体现在 LCP 和跳出率上。移动端用户等三秒还没看到主图,很多人就走了,这比排名信号的影响更直接。
还有一点常被忽略:文件名也是信号。把 IMG_20260725_143022.jpg 改成 chinese-typography-before-after.jpg,是几乎零成本的一次优化,工具会把明显是相机默认命名的文件标出来。
完全不同。alt等于空字符串是明确告诉读屏软件这是装饰图可以跳过,是正确做法;完全没有alt属性时读屏软件多数会念出文件名,体验很差。装饰图写空alt,内容图写描述,但绝不要没有alt属性。
一两句话,常见建议不超过125个字符。这个数字来源于部分读屏软件的朗读断句习惯,不是硬规定。一句话说不完的图,通常应该配文字说明而不是全塞进alt。
自然描述里出现是正常的,刻意堆砌不行。alt首先是无障碍功能,堆关键词既帮不上排名也损害真实用户体验,属于典型的过度优化。
浏览器能在图片下载完成前按比例预留位置,避免内容跳动。图片没写尺寸是造成CLS的头号原因,而CLS是Core Web Vitals三项之一。即使用CSS控制显示尺寸,HTML属性也该写原始尺寸。
不是。首屏图加lazy会推迟加载直接拖慢LCP,是常见的误用。首屏以下的图才应该懒加载。工具按图片在HTML里的位置粗略判断首屏,给出提示。
重要。搜索引擎理解图片内容靠alt、周边文字和文件名。把相机默认命名改成描述性文件名是几乎零成本的优化,工具会标出明显是默认命名的文件。
不支持。工具不执行JavaScript,前端框架渲染的图片抓不到。懒加载库放在data-src里的地址会尝试读取,但各家属性名不统一可能漏。
不能。工具看不到图片内容,只能识别形式问题:空着、太长、像文件名、像关键词列表。内容是否贴切需要人来判断。