tigris-image-optimization

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tigris Image Optimization

Tigris 图片优化

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

调整、裁剪并优化存储在Tigris中的图片。上传时生成缩略图，提供响应式图片，借助Tigris的全球CDN实现快速交付。

Strategy Overview

策略概览

Approach	When to Use	Pros	Cons
Process on upload	Thumbnails, fixed sizes	Fast serving, predictable	Storage cost per variant
Process on request	Many size variations	Flexible, less storage	Latency on first request
Client-side resize	Before upload	Saves bandwidth, fast upload	Less 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.

方法	适用场景	优点	缺点
上传时处理	缩略图、固定尺寸场景	交付速度快，效果可预期	每个变体都会产生存储成本
请求时处理	多种尺寸变体场景	灵活，存储成本更低	首次请求存在延迟
客户端调整大小	上传前处理	节省带宽，上传速度快	对质量的控制度较低

推荐方案： 针对已知尺寸（头像、缩略图、封面图）采用上传时处理。使用公共存储桶进行CDN交付——Tigris会自动从最近的全球边缘节点提供公共文件。

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.

文件上传时生成不同变体，将每个变体作为单独的对象存储：

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"

。

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

阅读对应框架的资源文件：

Next.js — 阅读
```
./resources/nextjs.md
```
了解next/image配置和Sharp处理方案
Remix — 阅读
```
./resources/remix.md
```
了解action函数中的Sharp用法和响应式srcset实现
Express — 阅读
```
./resources/express.md
```
了解搭配Multer的Sharp中间件用法
Rails — 阅读
```
./resources/rails.md
```
了解Active Storage变体用法
Django — 阅读
```
./resources/django.md
```
了解django-imagekit和Pillow处理方案
Laravel — 阅读
```
./resources/laravel.md
```
了解Intervention Image用法

CDN Delivery

CDN交付

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.

Tigris公共存储桶会从最近的全球边缘节点提供文件，无需额外配置CDN。

图片缓存头配置：

typescript

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

对于不可变的内容哈希文件名（例如

hero-abc123.jpg

），可设置长缓存时间。对于可变路径，使用更短的TTL或ETag。

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

必须遵守： 对外提供的图片需设置

access: "public"

（启用CDN）| 针对已知尺寸在上传时生成缩略图 | 使用WebP/AVIF格式减小文件体积 | 设置明确的

contentType

禁止操作： 未加缓存的情况下每次请求都处理图片 | 如果需要频繁提供缩略图，仅存储原文件 | 下载完全尺寸图片后再在浏览器中调整大小