Image Optimization

aj-geddes/useful-ai-prompts/skills/image-optimization

作者 aj-geddes3f5182cfd739无许可证355 个星标收录于 2026年10月8日更新于 2026年10月8日仓库7个月前更新

Optimize images for web to reduce file size without sacrificing quality. Use compression, modern formats, and responsive techniques for faster loading.

仅含说明Design & Creative
AI 生成的概览

指导网页图片优化，涵盖压缩、现代格式与响应式图片技术。

功能
该技能提供网页图片优化指导，在保持质量的同时减小文件体积。内容涵盖格式选择（JPEG、PNG、WebP、SVG）、压缩设置、响应式图片实现、优化流程以及监控最佳实践。它还包含一个组件模板和参考指南，但不附带脚本。
适用场景
适用于优化网站图片、实现响应式图片、提升页面性能或改善移动端体验，包括部署前的优化。
运行要求
不附带脚本或工具，仅为说明文档和参考文档。按照指导操作可能涉及外部图片工具，如 ImageMagick、TinyJPEG、PNGQuant、OptiPNG 或 cwebp，但阅读该技能本身不需要这些工具。

Image Optimization

Table of Contents

Overview

Images typically comprise 50% of page weight. Optimization dramatically improves performance, especially on mobile networks.

When to Use

  • Website optimization
  • Responsive image implementation
  • Performance improvement
  • Mobile experience enhancement
  • Before deployment

Quick Start

Minimal working example:

yaml
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)

Reference Guides

Detailed implementations in the references/ directory:

GuideContents
Image Compression & Formats [blocked]Image Compression & Formats
Responsive Images [blocked]Responsive Images
Optimization Process [blocked]Optimization Process
Monitoring & Best Practices [blocked]Monitoring & Best Practices

Best Practices

✅ DO

  • Follow established patterns and conventions
  • Write clean, maintainable code
  • Add appropriate documentation
  • Test thoroughly before deploying

❌ DON'T

  • Skip testing or validation
  • Ignore error handling
  • Hard-code configuration values

来源与署名

来源：aj-geddes/useful-ai-prompts位于skills/image-optimization提交3f5182c

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

aj-geddes

Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.

待分类3557个月前更新

Wireframe Prototyping

aj-geddes

Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.

待分类3557个月前更新

Web Performance Optimization

aj-geddes

通过代码分割、懒加载、缓存、压缩和监控来指导 Web 性能优化。

Software Development3557个月前更新

Vue Application Structure

aj-geddes

指导使用组合式 API、组件组织与 TypeScript 来构建 Vue 3 应用结构。

Software Development3557个月前更新

Visual Regression Testing

aj-geddes

通过跨版本比较截图来检测 UI 中非预期的视觉变化，指导视觉回归测试。

Software Development3557个月前更新

User Persona Creation

aj-geddes

基于研究创建详细的用户画像，用于指导产品设计、优先级排序与信息传达。

Research & Analysis3557个月前更新

更多Design & Creative技能

Theme Factory

anthropics

精选

提供 10 套预设配色与字体主题，并可即时生成新主题，用于为幻灯片、文档、报告和 HTML 页面统一风格。

Design & Creative179K今天更新

Slack Gif Creator

anthropics

精选

为 Slack 创建尺寸与体积经过优化的动画 GIF，提供 PIL 绘图辅助、缓动函数与校验工具。

包含脚本
Design & Creative179K今天更新

Frontend Design

anthropics

精选

在构建或改造用户界面时，提供打造独特、有意图的视觉设计的指导。

Design & Creative179K今天更新

Canvas Design

anthropics

精选

依据写好的设计理念创作原创视觉艺术，输出 PNG 或 PDF，适用于海报、艺术作品等静态成品。

Design & Creative179K今天更新

Brand Guidelines

anthropics

精选

将 Anthropic 官方品牌配色与字体应用到需要体现 Anthropic 外观风格的各类产物上。

Design & Creative179K今天更新

Frontend Design

anthropics

精选

指导智能体为新界面或改版界面进行独特、有意图的视觉设计。

Design & Creative149K今天更新