mcpField
T
tigris-image-optimization

tigris-image-optimization

github.com/tigrisdataDevelopment23.3k installsUpdated 14w ago
Repository

About tigris-image-optimization

A skill for developers storing images in Tigris, covering resizing, cropping, optimization, and delivery. It explains upload-time and on-request processing, framework-specific approaches, and delivery through Tigris public buckets.

Key features

  1. 01Generate variants on upload
  2. 02Process image variants on request
  3. 03Resize images before upload
  4. 04Deliver through Tigris public bucket CDN
  5. 05Guides for Next.js, Remix, and others

Use cases

  1. 01Create fixed-size avatars, thumbnails, and covers
  2. 02Serve images in multiple requested sizes
  3. 03Deliver images from public buckets

Install

Copy the command and run it in a terminal.

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

After installing, type/tigris-image-optimizationin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project README

Tigris Image Optimization

Resize, crop, and optimize images stored in Tigris. Generate thumbnails on upload, serve responsive images, and leverage Tigris's global CDN for fast delivery.

Strategy Overview

ApproachWhen to UseProsCons
Process on uploadThumbnails, fixed sizesFast serving, predictableStorage cost per variant
Process on requestMany size variationsFlexible, less storageLatency on first request
Client-side resizeBefore uploadSaves bandwidth, fast uploadLess control over quality

Recommended: Process on upload for known sizes (avatar, thumbnail, cover). Use public buckets for CDN delivery — Tigris serves public files from the nearest global edge automatically.

Upload-Time Processing (General Pattern)

Generate variants when a file is uploaded, store each variant as a separate object:

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

Use access: "public" for images that need fast, CDN-backed delivery.

Framework Guides

Read the resource file for your framework:

  • Next.js — Read ./resources/nextjs.md for next/image config and Sharp processing
  • Remix — Read ./resources/remix.md for Sharp in action functions and responsive srcset
  • Express — Read ./resources/express.md for Sharp middleware with Multer
  • Rails — Read ./resources/rails.md for Active Storage variants
  • Django — Read ./resources/django.md for django-imagekit and Pillow processing
  • Laravel — Read ./resources/laravel.md for Intervention Image

CDN Delivery

Tigris public buckets serve files from the nearest global edge — no separate CDN setup needed.

Cache headers for images:

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

For immutable content-hashed filenames (e.g., hero-abc123.jpg), use long cache times. For mutable paths, use shorter TTLs or ETags.

Critical Rules

Always: Use access: "public" for images served to users (enables CDN) | Generate thumbnails at upload time for known sizes | Use WebP/AVIF for smaller file sizes | Set explicit contentType

Never: Process images on every request without caching | Store only originals if you always serve thumbnails | Resize in the browser after downloading full-size images

Related Skills

  • tigris-file-uploads — Full upload patterns per framework
  • tigris-egress-optimizer — Reduce bandwidth costs from image serving

Official Documentation

Comments

Markdown supported