Nhân trong lúc làm việc đụng phải vấn đề hiển thị khi tải ảnh, mình tìm hiểu lại hai dạng ảnh là Baseline và Progressive JPEG. Tiện thể, viết ra để lưu lại sau này cần đọc lại.

Còn nhớ khi Save for Web một bức ảnh về định dạng JPEG, Adobe Photoshop cho thiết lập hai dạng là Optimized và Progressive. Google một hồi, mình tìm được tên gọi đúng của hai dạng JPEG này là Baseline và Progressive (một số chỗ còn gọi là Interlaced).

Android hỗ trợ hai dạng này trong bảng Supported Media Formats: Base+progressive JPEG (.jpg) - developer.android.com

Phân biệt Baseline và Progressive qua cách thức hiển thị ảnh

Ở dạng Baseline truyền thống, ảnh được tải về (tạm dịch, đúng nghĩa là "scan") tuần tự từng dòng ngang trông có vẻ như liên tục theo tiến trình dọc từ trên xuống (top-to-bottom).

Còn ở dạng Progressive, phức tạp hơn, ảnh được chia nhỏ thành từng phần để tải về và sẽ hiện lên rõ dần sau mỗi đợt tải.

Ưu điểm và nhược điểm

Ưu điểm của dạng Progressive là ở chỗ người xem sẽ nhìn thấy tổng quan toàn bộ bức ảnh ở chất lượng thấp ngay trong quá trình tải thay vì từng phần như ở dạng Baseline.

Một số chuyên gia của Yahoo! đã làm vài phép tính so sánh để thấy rằng với những bức ảnh có kích thước dưới 10kb thì Baseline nén hiệu quả hơn (nhỏ hơn ảnh gốc khoảng 75%). Nhưng nếu ảnh lớn hơn 10kb, Progressive lại nén tốt hơn (khoảng 94%). Kết luận, họ khuyên dùng Baseline cho ảnh thumbnail, các ảnh khác lớn hơn thì dùng Progressive.

So sánh về kích thước trong quá trình tải về thì hai dạng là gần như nhau nhưng có vẻ như thiết bị sẽ phải xử lý nhiều hơn, phức tạp hơn đối với định dạng Progressive. Nếu phải tải nhiều ảnh cùng lúc thì có thể đây sẽ là vấn đề cần tính toán. Ngoài ra, có những thiết bị, bộ giải mã ảnh không hỗ trợ định dạng này. Như vậy đây lại là nhược điểm của Progressive.

Cá nhân mình thấy một nhược điểm nữa của Progressive, với những bức ảnh chất lượng kém, ảnh vốn đã mờ và vỡ, người xem sẽ không biết thời điểm nào bức ảnh được tải về hoàn toàn do các đợt tải về (hình như) không xác định (chưa tìm hiểu sâu thêm vấn đề này). Nếu sử dụng trình duyệt, họ sẽ ấn refresh, còn nếu dùng mobile, họ sẽ bỏ qua không xem nữa.

Dĩ nhiên, dùng cách nào là sự lựa chọn trong mỗi trường hợp cụ thể của từng người, từng team phát triển sản phẩm.

Giải pháp

Dựa trên một số tìm hiểu trên, mình đưa ra để tìm hiểu thêm hai giải pháp hiển thị ảnh, kết hợp với một số hiệu ứng fade, slide... sao cho đẹp và hiệu quả:

1. Facebook: không rõ có dùng dạng Progressive hay không nhưng cách hiển thị thì có vẻ là như vậy. Tuy nhiên, bằng một cách tối ưu nào đó, ảnh ở Facebook chỉ cần tải về 2 lần: lần 1 hiển thị chất lượng trung bình, lần 2 hiển thị rõ nét khi ảnh đã tải về toàn bộ.

2. Sử dụng các thanh Loading:

Tìm hiểu và tổng hợp từ nhiều nguồn.