在 Tigris 上处理图片并做缩略图/响应式/CDN…

适用于在 Tigris 存储图片并需要缩放、生成缩略图、提供响应式图片或优化图片交付的场景。

适用场景

解决思路

1. 上传时处理：文件上传时生成缩略图或固定尺寸变体，并把每个变体作为独立对象存储，以换取快速且可预测的交付。
2. 请求时处理：在请求时动态生成多种尺寸变体，以获得灵活性并减少存储，但需处理首次请求延迟。
3. 客户端缩放：在上传前先在客户端调整图片尺寸，以节省带宽并加快上传，但要接受质量控制较弱。
4. 推荐对已知尺寸（avatar、thumbnail、cover）在上传时处理。
5. 使用 public bucket 做 CDN 交付；Tigris 会自动从最近的全球边缘节点提供 public 文件，无需单独配置 CDN。
6. 上传时处理通用模式：文件上传时生成多个变体，每个变体存为单独对象。
7. 对象命名示例：avatars/user-123.jpg 为 original；avatars/user-123-thumb.jpg 为 100x100；avatars/user-123-medium.jpg 为 400x400；avatars/user-123-large.jpg 为 800x800。
8. 对需要快速、CDN 支持的图片设置 access: "public"。
9. Next.js：读取 ./resources/nextjs.md，使用 next/image 配置和 Sharp 处理。
10. Remix：读取 ./resources/remix.md，在 action functions 中使用 Sharp 并生成响应式 srcset。
11. Express：读取 ./resources/express.md，使用 Sharp middleware 配合 Multer。
12. Rails：读取 ./resources/rails.md，使用 Active Storage variants。
13. Django：读取 ./resources/django.md，使用 django-imagekit 和 Pillow 处理。
14. Laravel：读取 ./resources/laravel.md，使用 Intervention Image。
15. Tigris public buckets 会从最近的全球边缘节点提供文件，无需单独 CDN 设置。
16. 图片缓存头示例：await put("images/hero.jpg", buffer, { access: "public", contentType: "image/jpeg" });
17. 对不可变的内容哈希文件名（例如 hero-abc123.jpg），使用长缓存时间。
18. 对可变路径，使用较短 TTL 或 ETags。
19. 对提供给用户的图片使用 access: "public"，以启用 CDN。
20. 对已知尺寸在上传时生成缩略图。
21. 使用 WebP/AVIF 来减小文件大小。
22. 设置显式 contentType。
23. 不要在每次请求时处理图片且不加缓存。
24. 如果总是提供缩略图，不要只存储原图。
25. 不要下载完整尺寸图片后在浏览器中缩放。
26. 需要各框架完整上传模式时参考 tigris-file-uploads。
27. 需要降低图片分发带宽成本时参考 tigris-egress-optimizer。
28. 需要更多细节时查阅 Tigris SDK 文档 https://www.tigrisdata.com/docs/sdks/tigris/ 和 Sharp 文档 https://sharp.pixelplumbing.com/。

适用边界 · 注意事项

• 不使用 Tigris 作为对象存储或 CDN 时，本技能的具体配置不适用。
• 图片需要私有访问控制、不能通过 public bucket 暴露时，不应使用 access: "public"。
• 图片尺寸高度动态、变体数量极多且无法接受首次请求延迟或缓存复杂度时，不宜只依赖上传时预生成固定尺寸。