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，但閱讀此技能本身不需要這些工具。

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)

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:

Guide	Contents
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 個月前更新

Image Optimization

Image Optimization

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

來源與署名

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

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design