mcpField
I
image-optimization

image-optimization

github.com/secondsky開発240596 回インストール5 週間前に更新
リポジトリ

image-optimization について

image-optimization は、開発者向けのWeb画像最適化スキルです。形式の選択、レスポンシブ配信、Sharpを使ったビルド例に加え、容量目標とチェック項目を扱います。

主な機能

  1. 01画像の種類に応じた形式選択
  2. 02レスポンシブ画像の手法
  3. 03SharpによるWebP変換
  4. 04画像容量の目標
  5. 05最適化チェックリスト

活用シーン

  1. 01Webページ用画像の準備
  2. 02画像データ量の削減
  3. 03レスポンシブ画像配信の設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/secondsky/claude-skills --skill image-optimization

インストール後、Claude Code で/image-optimizationを入力して読み込まれたか確認します。

詳細

画像の最適化

最新のフォーマットとレスポンシブ技術を活用して、Web パフォーマンス向けに画像を最適化します。

フォーマットの選択

フォーマット最適な用途圧縮
JPEG写真非可逆、50-70% 削減
PNGアイコン、透過可逆、10-30%
WebP最新のブラウザーJPEG より 25-35% 高効率
AVIF次世代JPEG より 50% 高効率
SVGロゴ、アイコンベクター形式、拡大縮小可能

レスポンシブ画像

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img
    src="image.jpg"
    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="Description"
    loading="lazy"
    decoding="async"
  >
</picture>

遅延読み込み


<img src="image.jpg" loading="lazy" alt="Description">


<img
  src="placeholder-blur.jpg"
  data-src="image.jpg"
  class="lazy"
  alt="Description"
>

ビルドパイプライン（Sharp）

const sharp = require('sharp');

async function optimizeImage(input, output) {
  await sharp(input)
    .resize(1200, null, { withoutEnlargement: true })
    .webp({ quality: 80 })
    .toFile(output);
}

パフォーマンス目標

アセットの種類目標サイズ
ヒーロー画像<200KB
サムネイル<30KB
画像の合計<500KB

最適化チェックリスト

  • JPEG にフォールバックできるよう WebP を使用する
  • レスポンシブな srcset を実装する
  • ファーストビューより下の画像で遅延読み込みを有効にする
  • 品質 70-85 で圧縮する
  • CDN から配信する
  • 適切なキャッシュヘッダーを設定する

コメント

Markdown 対応