Backend hay gặpTách lúc nhận ảnh khỏi lúc phục vụ ảnh.
Nhận (upload): client upload ảnh gốc thẳng lên object storage bằng presigned URL (như câu file lớn). Kiểm tra type/size trước khi cấp URL.
Xử lý (transform): hai hướng phổ biến —
- Xử lý sẵn (eager): sau upload, một worker/hàm (event-driven) tạo sẵn các biến thể (thumbnail, medium, WebP/AVIF) rồi lưu lại. Đơn giản khi số kích thước cố định, nhưng tốn chỗ và không linh hoạt.
- Xử lý theo yêu cầu (on-the-fly qua image CDN): giữ một bản gốc; CDN/dịch vụ ảnh resize + đổi định dạng + nén theo tham số URL (vd ?w=400&format=auto) lần đầu rồi cache. Linh hoạt, đỡ tốn chỗ — thường là lựa chọn nên có.
Phục vụ: đặt CDN trước storage; bật cache lâu + tên file có hash (content-addressed) để cache-bust khi đổi ảnh. Trả định dạng hiện đại (WebP/AVIF) theo Accept, kèm width/height để tránh layout shift.
Bẫy hay gặp: phục vụ ảnh gốc chưa nén (nặng trang), resize đồng bộ ngay trong request upload (chậm, dễ timeout), quên cache-bust khi thay ảnh cùng tên.