mcpField
T
tigris-image-optimization

tigris-image-optimization

github.com/tigrisdata開発23.3k 回インストール14 週間前に更新
リポジトリ

tigris-image-optimization について

Tigris に画像を保存する開発者向けのスキルです。リサイズ、切り抜き、最適化に加え、アップロード時とリクエスト時の処理、フレームワーク別の方法、公開バケット経由の配信を説明します。

主な機能

  1. 01アップロード時のバリアント生成
  2. 02リクエスト時の画像処理
  3. 03アップロード前のリサイズ
  4. 04Tigris 公開バケット CDN 配信
  5. 05Next.js、Remix などのガイド

活用シーン

  1. 01アバター、サムネイル、カバーの定型サイズ生成
  2. 02複数サイズの画像配信
  3. 03公開バケットからの画像配信

インストール

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

$npx skills add https://github.com/tigrisdata/skills --skill tigris-image-optimization

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

metadata.json
README.md
resources/
django.md
express.md
laravel.md
nextjs.md
rails.md
remix.md

詳細

Tigris の画像最適化

Tigris に保存された画像のサイズ変更、トリミング、最適化を行います。アップロード時にサムネイルを生成し、レスポンシブ画像を配信して、Tigris のグローバル CDN を活用した高速な配信を実現します。

戦略の概要

アプローチ使用する場面メリットデメリット
アップロード時に処理サムネイル、固定サイズ配信が速く、予測しやすいバリエーションごとにストレージコストがかかる
リクエスト時に処理多数のサイズバリエーション柔軟性が高く、ストレージを節約できる初回リクエスト時のレイテンシー
クライアント側でサイズ変更アップロード前帯域幅を節約でき、アップロードが速い品質の制御が難しい

推奨： 既知のサイズ（アバター、サムネイル、カバー画像）はアップロード時に処理します。CDN で配信するにはパブリックバケットを使用します。Tigris はパブリックファイルを最寄りのグローバルエッジから自動的に配信します。

アップロード時の処理（一般的なパターン）

ファイルのアップロード時にバリエーションを生成し、それぞれを個別のオブジェクトとして保存します。

avatars/user-123.jpg          # original
avatars/user-123-thumb.jpg    # 100x100
avatars/user-123-medium.jpg   # 400x400
avatars/user-123-large.jpg    # 800x800

高速で CDN を利用した配信が必要な画像には、access: "public" を使用します。

フレームワークガイド

使用するフレームワークのリソースファイルを参照してください。

  • Next.js — next/image の設定と Sharp による処理については ./resources/nextjs.md を参照してください
  • Remix — アクション関数での Sharp の使用とレスポンシブな srcset については ./resources/remix.md を参照してください
  • Express — Multer と連携する Sharp ミドルウェアについては ./resources/express.md を参照してください
  • Rails — Active Storage のバリエーションについては ./resources/rails.md を参照してください
  • Django — django-imagekit と Pillow による処理については ./resources/django.md を参照してください
  • Laravel — Intervention Image については ./resources/laravel.md を参照してください

CDN 配信

Tigris のパブリックバケットはファイルを最寄りのグローバルエッジから配信するため、別途 CDN を設定する必要はありません。

画像のキャッシュヘッダー：

await put("images/hero.jpg", buffer, {
  access: "public",
  contentType: "image/jpeg",
});

変更されないコンテンツハッシュ付きのファイル名（例：hero-abc123.jpg）には、長いキャッシュ期間を設定します。変更される可能性のあるパスには、短い TTL または ETag を使用します。

重要なルール

必ず行うこと： ユーザーに配信する画像には access: "public" を使用する（CDN が有効になります） | 既知のサイズのサムネイルはアップロード時に生成する | ファイルサイズを小さくするために WebP/AVIF を使用する | contentType を明示的に設定する

決して行わないこと： キャッシュせずにリクエストごとに画像を処理する | 常にサムネイルを配信するのにオリジナル画像だけを保存する | フルサイズの画像をダウンロードした後にブラウザーでサイズ変更する

関連スキル

  • tigris-file-uploads — フレームワークごとのアップロードパターン全般
  • tigris-egress-optimizer — 画像配信による帯域幅コストを削減

公式ドキュメント

コメント

Markdown 対応