mcpField
I
image-optimization

image-optimization

github.com/aj-geddes开发374658 次安装34 周前更新
代码仓库

关于 image-optimization

面向开发者的实用技能，帮助优化网站图片并改善页面性能与移动体验，涵盖压缩、格式选择、响应式图片和优化指南。

主要功能

  1. 01图片压缩与格式指南
  2. 02响应式图片实现
  3. 03优化流程参考
  4. 04监控与最佳实践

适用场景

  1. 01部署前减少图片体积
  2. 02改善网站在移动网络中的性能
  3. 03实现响应式图片

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill image-optimization

安装后在 Claude Code 中输入/image-optimization确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
image-compression-formats.md
monitoring-best-practices.md
optimization-process.md
responsive-images.md
templates/
component-template.tsx

详细介绍

图像优化

目录

概述

图像通常占页面大小的 50%。优化图像可显著提升性能，尤其是在移动网络环境下。

适用场景

  • 网站优化
  • 响应式图像实现
  • 性能提升
  • 改善移动端体验
  • 部署前

快速入门

最简可运行示例：

Format Selection:

JPEG:
  Best for: Photographs, complex images
  Compression: Lossy (quality 70-85)
  Size: ~50-70% reduction
  Tools: ImageMagick, TinyJPEG
  Command: convert image.jpg -quality 75 optimized.jpg

PNG:
  Best for: Icons, screenshots, transparent images
  Compression: Lossless
  Size: 10-30% reduction
  Tools: PNGQuant, OptiPNG
  Command: optipng -o3 image.png

WebP:
  Best for: Modern browsers (90% support)
  Compression: 25-35% better than JPEG/PNG
  Fallback: Use <picture> element
  Tools: cwebp
  Command: cwebp -q 75 image.jpg -o image.webp

SVG:
  Best for: Icons, logos, simple graphics
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现指南：

指南内容
图像压缩与格式图像压缩与格式
响应式图像响应式图像
优化流程优化流程
监控与最佳实践监控与最佳实践

最佳实践

✅ 应该做
  • 遵循既定模式和规范
  • 编写简洁、易维护的代码
  • 添加适当的文档
  • 部署前进行全面测试
❌ 不要做
  • 跳过测试或验证
  • 忽略错误处理
  • 将配置值硬编码

评论

支持 Markdown