Vì sao nên nén ảnh trước khi lưu, và nén ở trình duyệt hay ở máy chủ?

Người phỏng vấn muốn biết bạn hiểu ảnh ảnh hưởng thế nào đến dung lượng lưu trữ và tốc độ tải trang, và có nghĩ tới các chi tiết dễ sai khi xử lý ảnh hay không.

Lý do chính là ảnh gốc từ điện thoại hay ảnh chụp màn hình thường nặng vài MB đến hàng chục MB, trong khi trang chỉ hiển thị chúng ở chiều rộng vài trăm điểm ảnh. Lưu nguyên bản làm đầy kho lưu trữ nhanh (gói miễn phí thường chỉ có vài trăm MB đến vài GB) và bắt người đọc trên mạng di động tải một lượng dữ liệu họ không cần. Phần giảm nhiều nhất thường đến từ việc thu nhỏ kích thước về mức đủ dùng, ví dụ 1600 px cạnh dài để vẫn nét trên màn hình retina. Đổi định dạng sang WebP hay AVIF giảm thêm, nhưng mức giảm phụ thuộc vào ảnh nên cần đo trên ảnh thật.

Còn chọn nơi nén thì có hai hướng. Nén ở trình duyệt (vẽ lại ảnh lên canvas) tiết kiệm băng thông lúc tải lên và không tốn tài nguyên máy chủ, hợp với trường hợp tác giả đáng tin. Nén ở máy chủ (ví dụ bằng sharp) hợp khi bạn không tin người tải lên, hoặc cần nhiều kích thước cho nhiều màn hình, nhưng tốn thời gian và bộ nhớ của hàm xử lý. Thành phần ảnh của framework (như next/image) chỉ tối ưu lúc phục vụ, còn ảnh gốc vẫn nằm trong kho.

Những chi tiết dễ sai: ảnh chụp dọc có thẻ EXIF Orientation, nên phải xoay pixel trước khi bỏ metadata, nếu không ảnh hiện nằm ngang. GIF có thể là ảnh động nên không nên nén lại như ảnh tĩnh. Ảnh nhỏ sẵn có thể nặng hơn sau khi nén, vì vậy cần giữ bản gốc khi bản nén không nhỏ hơn.

Điểm cộng: nhắc rằng bỏ metadata còn che được vị trí GPS trong ảnh điện thoại, và đặt giới hạn kích thước ở phía kho lưu trữ làm lớp bảo vệ thứ hai.