Reducing Image File Size in the Photos Infrastructure
Bài tóm tắt Etsy 2017 3. Quy mô lớn Độ khó: Trung bình
Etsy · 2017 · 3. Quy mô lớn · Độ khó: Trung bình — bài gốc
Bối cảnh
- Hạ tầng ảnh: người bán upload, máy ImgWriter chuyển thành JPEG, lưu ở Mediastore (có dư thừa); khi xem, ImgCache lấy từ Mediastore, có cache trong bộ nhớ cho ảnh hay xem và hash để tránh làm trùng; trước đó là CDN.
- Ràng buộc lớn nhất là kích thước dữ liệu: CDN chỉ giữ được chừng ấy trước khi đẩy ảnh ra và request quay về origin; ảnh lớn đắt CDN hơn và làm trang chậm.
- Gần như suốt lịch sử Etsy, chất lượng JPEG cố định ở 85, coi là "cân bằng tốt" cho mọi ảnh.
Thay đổi chính
- Chất lượng theo từng ảnh: dùng dssim (đo độ khác nhau theo SSIM, xấp xỉ thị giác người) so ảnh nén với ảnh gốc, tìm nhị phân chất lượng JPEG thấp nhất mà điểm dssim còn dưới ngưỡng "trông vẫn tốt", với 85 làm trần (thuật toán theo cjpeg-dssim của Tobias Baldauf).
- Làm đồng bộ lúc upload để người bán thấy đúng ảnh sẽ hiển thị. Bản script ban đầu gọi shell từ PHP mất 15–20 giây với ảnh lớn; bỏ bước chuyển JPEG↔PNG (dssim đã so được JPEG) và port sang PHP để giữ ảnh trong bộ nhớ, còn thêm trung bình 500 ms, p90 khoảng 800 ms cho cỡ ảnh 570 px hay hiển thị.
- Chất lượng trung bình về khoảng 73; dung lượng ảnh lưu giảm 25–30% (so một tuần tháng 4/2016 với tháng 4/2017).
- Trên trang listing, sau khi js/font/css đã được cache, khoảng 92% số byte còn lại là ảnh, nên giảm ảnh gần như là giảm page weight khi người dùng đi từ listing này sang listing khác.
- Ảnh có nét mảnh, chữ, gradient bị giảm chất lượng nhiều hơn; công cụ cho chỉnh min/max chất lượng theo nhu cầu.
Vì sao
- Theo Etsy: thêm thời gian lúc upload trả về nhiều lần ở lúc tải; ảnh nhỏ hơn thì CDN giữ được nhiều file hơn trước khi đẩy ra, giảm chi phí CDN và tải về origin.
Bài học cho SWE
- Một hằng số "đủ tốt cho mọi trường hợp" (chất lượng 85) thường là chỗ còn tiền nằm lại; đo theo từng đối tượng bằng thước gần với người dùng.
- Chuyển chi phí sang lúc ghi (một lần) để tiết kiệm lúc đọc (rất nhiều lần), miễn độ trễ ghi còn trong ngưỡng chấp nhận.
- Theo Etsy, đổi tham số nén cần thử trên đủ loại ảnh và biết cách lùi, kể cả khi phải backfill lại ảnh đã xử lý.
Liên quan
- Chi phí hạ tầng và build vs buy · Kiến trúc frontend
- trivago 2024 · Wix 2021 · Meta 2020 (ngân sách byte) · Etsy 2024
#ảnh JPEG#chất lượng nén#SSIM#dssim#tìm nhị phân#CDN#chi phí băng thông#page weight#xử lý lúc upload
Được nhắc tới trong
Công ty (1)