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％を占めます。最適化によりパフォーマンスが大幅に向上し、特にモバイルネットワークで効果があります。

使用する場面

  • Webサイトの最適化
  • レスポンシブ画像の実装
  • パフォーマンスの改善
  • モバイルでのユーザー体験の向上
  • デプロイ前

クイックスタート

最小限の動作例：

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 対応