image-optimization

SKILL.md

| Photos | AVIF | WebP → JPEG | | Graphics/logos with transparency | SVG | WebP → PNG | | Photos with transparency | WebP | PNG | | Animations | WebP | GIF (or MP4 for long animations) | | Icons | SVG | WebP → PNG | | Screenshots | WebP | PNG |

| JPEG | 75-85 | 80 is sweet spot for photos | | WebP | 75-85 | More efficient than JPEG at same quality | | AVIF | 60-75 | Much more efficient, use lower numbers | | PNG | N/A | Lossless, optimize with tools like oxipng |

Standard widths: 320, 480, 768, 1024, 1366, 1600, 1920, 2560

Web パフォーマンスのための画像の最適化に関する専門家によるガイダンス。画像形式 (WebP、AVIF、JPEG、PNG、GIF、SVG、HEIC、JPEG XL)、圧縮設定、レスポンシブ画像、遅延読み込み、CDN、Core Web Vitals、または画像関連の Web 開発タスクを操作する場合に使用します。フォーマットの選択、品質設定、ソースセット/サイズ、ピクチャエレメント、アートディレクション、フェッチ優先度、プレースホルダー戦略 (LQIP、ブラーアップ、ブラーハッシュ)、コンテナクエリ、HDR/広色域、AI を活用した画像ツール、エッジ/サーバーレス処理、パフォーマンスの最適化をカバーします。 ソース: igorvaryvoda/image-optimization-skill。

原文を見る