用途
该技能面向 Web 图片优化,目标是在不牺牲质量的前提下减小图片文件体积,从而加快页面加载速度。资料说明图片通常占页面重量的约 50%,因此优化对性能提升(尤其是移动网络环境)效果显著。
主要能力
技能围绕图片格式选择与压缩展开,给出各格式的适用场景、压缩方式、体积缩减幅度与工具建议:
- JPEG:适合照片与复杂图像;使用有损压缩(质量 70-85);体积约减少 50-70%;工具为 ImageMagick、TinyJPEG;示例命令:
convert image.jpg -quality 75 optimized.jpg - PNG:适合图标、截图与透明图像;使用无损压缩;体积减少 10-30%;工具为 PNGQuant、OptiPNG;示例命令:
optipng -o3 image.png - WebP:适合现代浏览器(约 90% 支持率);压缩效果比 JPEG/PNG 好 25-35%;需通过
<picture>元素提供回退;工具为 cwebp;示例命令:cwebp -q 75 image.jpg -o image.webp - SVG:适合图标、标志与简单图形
此外,技能还包含响应式图片实现、优化流程、监控与最佳实践等参考指南(位于 references/ 目录)。
使用方式
资料给出的快速开始为最小可用示例,主要形式是按格式选择对应的压缩工具与命令。完整实现需参考 references/ 目录下的详细指南,包括:图片压缩与格式、响应式图片、优化流程、监控与最佳实践。
适用场景
- 网站优化
- 响应式图片实现
- 性能改进
- 移动端体验增强
- 部署前处理
最佳实践
建议遵循既有模式与约定、编写整洁可维护的代码、补充适当文档、部署前充分测试;避免跳过测试或验证、忽略错误处理、硬编码配置值。
限制
资料未提供该技能的具体安装方式、收费与价格信息、支持平台范围以及可量化的效果数据,这些内容暂未提供。