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 中存储的图片的缩放、缩略图生成与响应式交付,覆盖六种 Web 框架。

功能
该技能提供对存储在 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 从公开仓库中收录这些内容。

举报或申请下架