Tigris Image Optimization

tigrisdata/skills/skills/tigris-image-optimization

作者 tigrisdata668ea424758e無授權條款2 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫2 個月前更新

Use when resizing images, generating thumbnails, serving responsive images, or optimizing image delivery with Tigris — covers Next.js, Remix, Rails, Django, Laravel, Express

AI 產生的概覽

指導儲存在 Tigris 的圖片如何縮放、產生縮圖與響應式交付,涵蓋六種網頁框架。

功能
此技能提供儲存在 Tigris 物件儲存中的圖片縮放、裁剪與最佳化指引。它比較上傳時處理、請求時處理與用戶端處理三種策略,說明如何將不同尺寸的變體存成獨立物件,並介紹透過公開儲存桶進行 CDN 交付及快取標頭建議。各框架的具體說明放在資源檔案中,涵蓋 Next.js、Remix、Express、Rails、Django 與 Laravel。
適用情境
適用於產生縮圖或固定尺寸圖片變體、提供響應式圖片,或改善以 Tigris 儲存為後端的應用程式之圖片交付效能。在選擇於上傳時或請求時處理圖片時也可參考。
執行需求
不含指令碼,僅為說明性內容。需要 Tigris 帳號與儲存桶存取權限;框架指南涉及 Sharp、Multer、Active Storage、django-imagekit 與 Pillow、Intervention Image 等函式庫。CDN 交付與文件連結需要網路存取。

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          # originalavatars/user-123-thumb.jpg    # 100x100avatars/user-123-medium.jpg   # 400x400avatars/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:

typescript
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

來源與署名

來源:tigrisdata/skills位於skills/tigris-image-optimization提交668ea42

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架