为什么“Optimize Your Images”是错误的建议

Source: Dev.to

我发现很多创始人听到“优化你的图片”时，仍然不知道这在实际操作中到底该怎么做。

通常情况下，这涉及到错误的格式、错误的尺寸、重复导出，或者一张太大的主图。并不是代码写得不好——而是发布时没人考虑的糟糕文件决策。

我在不同项目中反复遇到同样的清理工作。步骤总是一样：找到体积臃肿的图片，判断哪些可以安全转换，哪些需要手动审查，哪些根本不该动。

于是我把它做成了一个 Claude Code 技能。

Image Audit 能做什么

该技能会执行两项审计。

Repo audit

• 遍历代码库，查找 PNG、JPG 以及其他图片文件。
• 对每个文件检查文件大小、格式以及在代码中的引用方式。
• 标记所有超过 500 KB 的文件，并识别可以安全转换为 WebP 的图片。

Supabase audit

• 如果你有 Supabase 存储桶，它也会扫描该存储桶。
• 同样的检查：格式、大小、重复文件，以及图片是否真的在任何地方被引用。

完成两项审计后，你会得到一个迁移计划——而不是一份盲目的命令列表。计划会把图片分为：

• 安全的 WebP 收获 – 可以无风险转换的图片
• 需要手动审查的项目 – 截图、徽标、透明资产、UI 元素
• 保持不动的项目 – 已经优化或风险太大的图片

为什么先审计很重要

最直接的做法是把所有图片都转换成 WebP，然后完事。这会导致问题。

• 带文字的截图会变得模糊。
• 带透明度的徽标会失去质量。
• 具有精确像素边框的 UI 资产会出现伪影。
• 那些经过精心导出、尺寸固定的主图会被错误地重新缩放。

我特意让这个工具保持保守。宁可让人们信任的工具，也不想提供一个会悄悄破坏资源的“优化器”。

该技能在修改任何内容之前会检查引用关系。如果图片在代码中被导入，它会同步更新引用。如果无法验证引用链，它会把该图片放入手动审查，而不是盲目猜测。

安装

让你的编码代理安装它：

npx image-audit-skill install --claude

或者从仓库直接获取：

工作原理

当前版本开箱即支持 Supabase 存储，但概念是灵活的。它同样可以用于其他平台。思路很简单：找出拖慢性能的图片，将它们转换为优化后的格式，而对风险较高的图片保持不动。