SuperAPI AI 工具集

image-file-size

设计与创作

查看项目

更新于 10-16 06:14

技能介绍

用途:审计项目图片管道与静态资源,将文件体积问题与尺寸问题分开排查。适用场景包括 public/ 静态资源、CMS 管理的媒体文件以及图片 CDN 转换结果。

主要能力与阈值:照片目标低于 200KB(WebP 80% 质量),全幅 Hero 图低于 400KB;图形与图标低于 50KB,矢量图形使用 SVG;宽度小于 200px 的缩略图低于 30KB。按 web.dev 数据,WebP 通常比同等质量 JPEG 小 25–35%,AVIF 通常小 40–50%。

检查步骤:逐个查看图片字节大小,标记超过 200KB 的照片(JPEG/WebP/AVIF)、超过 100KB 的图形图标(PNG/SVG)、超过 400KB 的 Hero 或全宽图、超过 30KB 的缩略图,并查看 Lighthouse 是否报告 Properly size images 或 Efficiently encode images。每张超标图片给出路径、当前大小与估算目标大小。

修复方式:用 Squoosh、Sharp 或 ImageOptim 将 JPEG/PNG 转为 80% 质量 WebP;可尝试 60% 质量 AVIF;去除 Web 图片的 EXIF/IPTC 元数据;PNG 可经 oxipng 或 pngquant 做无损或近无损压缩;SVG 经 SVGO 处理;实现多个 srcset 尺寸,让移动端下载更小文件。

限制与说明:本规则仅覆盖文件体积,图片尺寸问题需另行审计;文中未提供具体配置代码、框架专用实现及命令行参数,完整实现细节与代码示例见 references/rule.md 与规则页面。