Image

何时使用

当主要产出物是图像文件或视觉素材时使用，尤其是在格式选择、调整大小、裁剪、压缩、元数据、透明度、色彩配置文件、响应式交付、社交媒体规格、市场平台要求或印刷准备等方面需要关注时。

如果任务有特定目标平台，请在决策前加载对应的文件：

• web.md用于响应式交付、LCP/CLS（最大内容绘制/累积布局偏移）、srcset（响应式图片源集）、懒加载、SVG和现代网页格式。
• social.md用于平台尺寸、安全区域以及信息流/快拍/横幅的导出。
• ecommerce.md用于市场平台的产品图片规则、纯白背景、缩放功能和目录一致性。
• photography.md用于RAW格式、ICC配置文件、印刷导出、EXIF（可交换图像文件格式）和非破坏性编辑。
• branding.md用于标识、图标、网站图标、应用图标、SVG一致性以及小尺寸下的可读性。
• screenshots.md用于界面截图、文档图片、标注、信息遮盖以及营销/设备框架。
• accessibility.md用于替代文本、装饰性与信息性图像的区分、图片中的文字、图表以及对对比度敏感的图片交付。
• commands.md当用户需要具体的ImageMagick或Pillow示例时使用。

请将主要工作流程保留在此文件中，然后根据具体的交付场景引入对应的专门文件，而不是根据通用的图片建议进行猜测。

快速参考

快速工作流

1. 识别资源类型：照片、截图、界面截图、标识、图表、社交媒体卡片、产品图片或印刷源文件。
2. 识别目标用途：网页、社交媒体上传、市场图库、印刷交付、内部存档或进一步编辑流程。
3. 决定源文件应保持矢量、分层或RAW格式，而不是过早进行合并。
4. 编辑前检查文件：尺寸、宽高比、方向、透明度、色彩配置文件、元数据以及当前的压缩损伤。
5. 如果任务涉及网页、社交媒体、电子商务、摄影/印刷、品牌标识、截图、无障碍性或命令密集型处理，请加载针对特定目标的文件。
6. 执行最小安全转换集：裁剪、调整大小、转换格式、压缩、删除或保留元数据，然后导出。
7. 在目标环境中验证导出结果，而不仅仅在编辑器中。

资源类型默认设置

核心规则

1. 根据目标选择工作流程，而非习惯

• 网络传输、社交媒体导出、电商平台准备、印刷输出和档案保存是不同的图像处理任务。
• 截图、产品照片、标志、信息图和印刷素材不应默认采用相同的格式或压缩策略。
• 图像生成与图像处理是不同的工作流程；应将生成的素材视为仍需检查和导出规范的输入文件。
• 如果目标用途特殊，请在确定格式、裁切、质量或元数据之前，阅读相关的匹配文件规范。
• 如果文件稍后需要再次编辑，请在制作轻量级交付导出文件之前，保留一份主文件级别的源文件。

2. 根据内容选择格式，而非趋势

• 对于现代网络传输，照片通常首选AVIF或WebP格式，在兼容性重要时使用JPEG作为后备。
• 截图、界面捕捉、图表和文字密集的图形通常需要PNG或无损WebP格式，以避免边缘模糊。
• 标志、图标和简单的插图应保持为矢量格式（.svg.svg) 当目标格式支持时。
• 透明度的引入会改变决策：JPEG格式会舍弃Alpha通道，而PNG、WebP和AVIF格式则可以保留它。
• 动态GIF很少是最佳输出选择；动态WebP、MP4或WebM格式通常体积更小、画面更清晰。
• TIFF、PSD、分层格式和RAW文件是工作格式或母版文件，不应作为常规交付输出。
• 如果平台会对上传内容进行强力重编码，应针对该平台的重压缩方式进行优化，而非仅追求理想的本地观看效果。
• 对于边缘锐利的截图、图表和示意图，即使照片类图像不适合，也通常能从无损输出中获益。

3. 审慎保留色彩、透明度与细节

• 网络素材通常应最终转换为sRGB色彩空间，除非目标平台明确要求其他配置。
• 剥离或更改ICC配置文件可能导致色彩偏移，即使像素数据本身并未改变。
• 透明素材需要支持Alpha通道的格式，并应在明暗两种背景下进行验证。
• 重复的有损保存会累积损伤，因此需保留纯净源文件并尽量减少重压缩循环。
• 放大、降噪、锐化和背景移除应视为可见的编辑操作，而非无害的导出步骤。

4. 按正确顺序进行尺寸调整、裁剪与压缩

• 操作顺序应为：先确定宽高比，其次裁剪，然后调整尺寸，最后进行压缩。
• 默认情况下不要放大图像；额外的像素无法创造缺失的细节。
• 视网膜或高DPI输出应是有意为之，而非自动的过度处理。
• 作为起点，2倍尺寸是常规的视网膜屏输出标准，而3倍尺寸应是深思熟虑的选择，而非默认设置。
• 社交卡片、电商展示位和市场图库通常进行激进裁剪，因此需保护真正的焦点区域和所有关键文本。
• 即使文件符合像素规格，若裁剪切除了人脸、产品、标签或UI交互元素，仍可能导致失败。
• 如果图像中嵌有文字，应在最小的实际预览尺寸下进行验证，而不仅仅是在全分辨率下。

5. 将元数据和方向视为实际交付中的关注点

• EXIF方向信息可能导致图像在一个查看器中显示正常，而在导出后在另一个查看器中发生旋转。
• 公开的网络资源通常应去除GPS和不必要的相机元数据。
• 版权、作者或来源元数据可能需要为编辑、法律或存档用途而保留。
• 元数据决策是工作流程的一部分，而非事后考虑。
• 当下游系统通过精确名称或SKU模式映射资源时，应保留文件名和输出命名约定。
• 如果工作流程依赖于创作信息、权利数据、时间戳或方向信息，则不应盲目地去除元数据。

6. 使用实际的预算和交付默认值

• 对于网络工作，应把预算作为强制约束，而非装饰。
• 一个有用的默认起始点是：主图小于200 KB，内容图小于100 KB，缩略图小于30 KB，光栅图标小于5 KB。
• 当图像在网络上交付时，应使用明确的尺寸或宽高比为布局预留空间。
• 不要对主要的英雄图像或可能的LCP图像进行懒加载。
• 如果一个文件“在本地看起来没问题”，但在实际页面中破坏了CLS、LCP或响应式交付，则不算完成。
• 如果细节、文字可读性、产品边缘或渐变效果受损，小文件并不自动意味着好。
• 如果平台无论如何都会重新压缩图像，应留出足够的余量，以免二次压缩破坏结果。

7. 针对实际目的地进行验证

• 平台规范不可互换：网络主图、社交预览、应用商店图片、市场图库和印刷广告都有不同的约束。
• 电子商务图像可能需要背景一致性、边缘清晰度、适合方形裁剪的构图以及便于缩放查看的细节。
• 社交媒体图片需要采用安全的构图，因为不同平台的动态信息流对预览图的裁剪方式各不相同。
• 印刷物料需关注物理尺寸、出血边距和色彩处理方式，这些是网页导出无需考虑的。
• 若素材用于网页发布，还需考虑配套的交付要素：宽高尺寸、替代文本，以及图像本身是否应包含文字内容。
• 若素材需上传至第三方平台，务必核查上传后的呈现效果——多数传输流程会重新调整尺寸、剥离色彩配置文件、压缩元数据或进行二次压缩。
• 若图像具有实际含义，还需验证其可访问性：替代文本策略、文字可读性、装饰性与信息性定位，以及内容是否本应通过HTML或周边文案呈现。

8. 安全批量处理并保留可逆的原始文件

• 始终基于原始文件或洁净母版进行操作，切勿使用已优化的输出文件作为源文件。
• 批量处理应遵循统一规则，但在处理完整文件集之前仍需抽检代表性样本。
• 一次错误的裁剪预设、色彩转换或有损导出都可能迅速毁坏整个批次的文件。
• 将针对不同用途的导出文件与母版分开保存，避免下次编辑时误用质量已受损的衍生文件。

值得加载的特殊场景文档

• 加载branding.md当素材涉及以下用途时：徽标、应用图标、网站图标、社交头像、徽章或可复用图标集。
• 加载screenshots.md当素材涉及以下用途时：界面截图、缺陷报告图像、教程截图、版本说明配图或带设备边框的营销视觉图。
• 加载accessibility.md当图片需要替代文本、包含嵌入文字、传递图表/示意图含义，或可能属于装饰性而非信息性图片时。

优质标准

• 所选格式与内容及使用场景相匹配，而非一概而论。
• 导出文件保持正确的焦点区域、文字可读性、透明度与色彩表现。
• 元数据被妥善保留或经审慎剔除。
• 文件大小经过优化且无明显视觉损伤。
• 素材在实际上传、嵌入或平台预览后仍能正常使用。
• 操作者未过早地将矢量、分层或RAW源文件平面化。
• 素材在实际使用场景中仍能清晰传达信息，而非仅孤立呈现时视觉美观。

常见误区

• 将透明图像保存为JPEG格式导致阿尔法通道静默丢失。
• 对屏幕截图或界面捕捉使用JPEG格式，使锐利文字变得模糊。
• 提交文件虽符合尺寸要求，但比例失调或裁剪不当。
• 多次重复压缩JPEG文件却归咎工具而非工作流程。
• 剔除元数据时意外破坏方向信息、授权语境或来源追溯需求。
• 忽略sRGB配置导致编辑工具、浏览器与交易平台间出现色差。
• 在目标平台会剥离、劣质栅格化或完全屏蔽的场景中使用SVG格式。
• 误以为AVIF或WebP格式通用，忽略某些平台、邮件客户端或上传流程仍会将其转回JPEG/PNG。
• 将关键文字嵌入图像，而本应使用HTML或原生界面文字传达信息。
• 虽满足文件大小限制，却因缩放、裁剪或锐化处理不当导致视觉质量受损。
• 过早栅格化标志导致导出图像持续模糊。
• 发送截图时，仍可见其中的机密信息、个人数据或不稳定的时间戳。
• 在像素效果看起来不错后，将替代文本、标题或图表摘要视为他人的问题。

相关技能

安装方法clawhub install <slug>如果用户确认：

• 图像编辑— 遮罩、清理、修复和针对性视觉编辑。
• 图像生成— 跨当前模型提供商的AI图像生成与编辑。
• 摄影— 面向拍摄、色彩和打印的照片工作流程。
• SVG— 当栅格文件不适合作为输出时的矢量图形工作流程。
• 电子商务— 通常限制图像交付的市场和产品列表要求。

反馈

• 如果觉得有用：clawhub star image
• 保持更新：clawhub sync