Hình ảnh này: định dạng hình ảnh tốt nhất cho web vào năm 2019

JPEG, WEBP, HEIC, AVIF? Hướng dẫn này sẽ giúp bạn lựa chọn.

Sau nhiều thập kỷ thống trị vô song của JPEG, những năm gần đây đã chứng kiến ​​sự xuất hiện của các định dạng mới - WebP và HEIC - thách thức vị trí này. Họ chỉ có một phần, nhưng đáng kể, được hỗ trợ bởi những người chơi chính giữa các trình duyệt web và hệ điều hành di động. Một định dạng hình ảnh mới khác - AVIF - dự kiến ​​sẽ tham gia vào năm 2019 với lời hứa sẽ quét qua toàn bộ web.

Trong bài viết này, chúng tôi sẽ bắt đầu với một bản sửa đổi ngắn của các định dạng cổ điển, tiếp theo là phần mô tả về WebP và HEIC / HEIF. Sau đó, chúng tôi sẽ chuyển sang khám phá AVIF và kết thúc bằng một bản tóm tắt kết hợp tất cả các điểm chính lại với nhau.

Nhận xét về ưu điểm và nhược điểm xây dựng cả về việc xem xét các báo cáo có thẩm quyền và quan sát trực tiếp trong quá trình phát triển và triển khai các công cụ cho các đường ống tối ưu hóa hình ảnh trong quy trình thương mại điện tử.

Các định dạng hình ảnh cổ điển cho web với sự hỗ trợ phổ quát

Hãy để chúng tôi tự nhắc nhở mình, theo thứ tự thời gian, về ba định dạng cổ điển quan trọng nhất cho hình ảnh web.

QUÀ TẶNG

GIF hỗ trợ nén không mất dữ liệu LZW và nhiều khung cho phép chúng tôi tạo ra các hình động đơn giản.

Hạn chế chính của định dạng này là nó bị giới hạn ở 256 màu. Điều này đã trở lại hợp lý khi nó được tạo ra vào cuối 80, vì giới hạn tương tự được áp dụng cho các màn hình hiện có. Tuy nhiên, với sự cải tiến của công nghệ hiển thị, rõ ràng là nó không phù hợp để tái tạo bất kỳ độ dốc màu mịn nào, giống như những gì được tìm thấy trong các bức ảnh chụp. Chúng ta có thể dễ dàng phát hiện ra dải màu mà nó tạo ra.

Tuy nhiên, GIF cho phép hoạt hình nhẹ với sự hỗ trợ phổ quát. Tính năng này đã giữ định dạng tồn tại cho đến ngày hôm nay trong các trường hợp sử dụng không nhạy cảm với các vấn đề chất lượng, điển hình nhất là hình ảnh hoạt hình nhỏ với ít hoặc không có màu sắc.

JPEG

Vua của các định dạng hình ảnh cho web đã được phát triển để hỗ trợ quy trình chụp ảnh kỹ thuật số.

Với độ sâu 24 bit thông thường, nó cung cấp độ phân giải màu sắc hơn nhiều (không bị nhầm lẫn với phạm vi hoặc gam màu) so với mắt người có thể nhận thấy. Nó hỗ trợ nén tổn thất bằng cách khai thác các cơ chế đã biết của tầm nhìn của con người.

Mắt của chúng ta nhạy cảm với quy mô trung bình hơn là chi tiết tốt. Do đó, JPEG cho phép chúng ta loại bỏ các chi tiết tốt (tần số không gian cao), bằng một lượng được kiểm soát bởi một yếu tố chất lượng. Chất lượng ít hơn có nghĩa là ít chi tiết được bảo tồn. Bên cạnh đó, chúng tôi nhạy cảm hơn nhiều với các chi tiết có độ tương phản độ chói cao hơn các chi tiết chỉ có độ tương phản màu.

Vì vậy, JPEG nội bộ hóa lại các hình ảnh RGB (Đỏ, Xanh lục và Xanh lam) trong một kênh độ chói và hai màu sắc. Điều này cho phép chúng tôi sử dụng mẫu phụ sắc độ để loại bỏ chi tiết hơn chỉ trong các kênh màu. Điều đáng chú ý là JPEG mã hóa hình ảnh theo các khối 8 x 8 pixel.

Khi chúng tôi giảm yếu tố chất lượng và / hoặc áp dụng mẫu phụ sắc độ mạnh hơn, chúng tôi bắt đầu nhận được các tạo tác tăng dần của tiếng chuông, quầng sáng, chặn hoặc làm mờ. Một vấn đề với JPEG là tùy thuộc vào nội dung hình ảnh, các tạo phẩm có thể xuất hiện ở các giá trị yếu tố chất lượng khác nhau. Sự khác biệt hoang dã nhất xuất hiện khi so sánh các hiệu ứng trên nhiếp ảnh tự nhiên với các hiệu ứng trên tác phẩm nghệ thuật. Vì tác phẩm nghệ thuật (hình dạng, phông chữ) thường dựa vào các cạnh sắc nét, chúng bắt đầu tạo ra các tạo tác ngay cả đối với một lượng nhỏ chi tiết bị loại bỏ.

Đối với ảnh, JPEG dễ dàng giảm trọng lượng tệp xuống 10 lần với các thành phần hầu như không đáng chú ý, so với nén không mất dữ liệu.

PNG

Định dạng đồ họa lossless này được phát triển để thay thế GIF, giải quyết các vấn đề về dải màu (và cấp phép). Nó là cần thiết cho hình ảnh với số lượng tác phẩm nghệ thuật đáng kể, trong đó JPEG tạo ra các tạo tác lớn ngay cả với tốc độ nén tối thiểu.

Nó hỗ trợ tính minh bạch và nén được cải thiện so với GIF. Vì nó không loại bỏ thông tin, PNG không tạo ra các tạo phẩm. Tất nhiên, đây là chi phí của trọng lượng hình ảnh nặng hơn với sự hiện diện của nhiều độ dốc màu khác nhau, so với nén mất mát.

Nó thành công trong việc khai thác một đặc tính thường thấy của tác phẩm nghệ thuật: Không giống như nhiếp ảnh - có sự liên tục của màu sắc với các biến thể tinh tế - hình ảnh nghệ thuật thường có một vài màu sắc được xác định rõ.

Vì vậy, PNG nén hình ảnh bằng cách ánh xạ một lượng lớn pixel vào một bảng màu riêng biệt đơn giản và kết quả là tiết kiệm được rất nhiều bit. So với GIF, nó cung cấp chất lượng cao hơn nhiều với thường ít byte hơn.

Những người mới đến với sự hỗ trợ một phần: WEBP và HEIC dựa trên HEVC

Các cơ chế được sử dụng bởi các codec video để nén các luồng có thể được phân thành hai loại chính: inter-frame và inter-frame. Trong khi cái đầu tiên khai thác các dự phòng theo thời gian, các cơ chế trong khung tập trung vào việc giảm sự dư thừa bên trong một khung nhất định, mà không phụ thuộc vào phần còn lại. Cơ chế nén này có thể được áp dụng cho ảnh tĩnh.

Sự bùng nổ của việc chia sẻ video - với các mạng di động là cốt lõi của nó - và độ phân giải màn hình tăng đều đặn đã thúc đẩy các nỗ lực về các tiêu chuẩn mã hóa mới để đạt được hiệu quả cao nhất trong việc nén.

Vì vậy, các định dạng hình ảnh mới đang nổi lên như là dẫn xuất của các tiêu chuẩn mã hóa video mới. Các định dạng hình ảnh mới này cung cấp các bộ tính năng lớn hơn JPEG và hứa hẹn tiết kiệm có trọng lượng tập tin với chất lượng hình ảnh được cải thiện.

WEBP

Google đã phát triển định dạng này với mục đích cung cấp một định dạng hình ảnh có khả năng web duy nhất để đối phó với tất cả các trường hợp sử dụng thông thường.

Điều quan trọng, nó tìm cách đạt được hình ảnh nhẹ hơn JPEG, mà không bị phạt về chất lượng hình ảnh. Nó sử dụng các hoạt động phức tạp hơn - như dự đoán khối - và là một dẫn xuất của codec video VP8. Nó hỗ trợ nén không mất dữ liệu và không giống như JPEG, nó cho phép độ trong suốt và hình ảnh động có thể kết hợp hình ảnh được mã hóa với cả nén không mất dữ liệu và mất dữ liệu.

Về nguyên tắc, nó sẽ đóng vai trò thay thế cho JPEG, PNG và GIF. Một nhược điểm quan trọng là thiếu sự hỗ trợ phổ quát. Cho đến gần đây, WebP đã bị hạn chế đối với phần mềm được Google hỗ trợ như trình duyệt Chrome và các ứng dụng gốc Android.

Tuy nhiên, với thông báo rằng Edge và Firefox (không bao gồm iOS Firefox) sẽ giới thiệu hỗ trợ WebP vào năm 2019, nó rõ ràng đã đạt được lực kéo. Nó cũng đáng chú ý rằng Apple - Safari và iOS - chưa hỗ trợ WebP.

HEIC / HEIF

Định dạng này mang lại một sự tiến hóa đáng kể trong hai khía cạnh khác nhau.

Thứ nhất, bộ chứa tệp hỗ trợ tính năng lớn nhất được đặt trong số các định dạng hình ảnh có sẵn. Ví dụ, nó hỗ trợ hình ảnh đa khung với nén đa khung - một tính năng chính cho hình ảnh HDR, đa tiêu cự hoặc đa góc nhìn hiệu quả.

Thứ hai, nó hỗ trợ nhiều loại dữ liệu phi hình ảnh với tính linh hoạt đáng chú ý. Hiện tại, hầu hết các hình ảnh sử dụng bộ chứa này đều được nén với đạo hàm cho hình ảnh từ codec video H265 / HEVC, được phát triển để đối phó hiệu quả với độ phân giải 4k và 8k được hiển thị bởi các màn hình thế hệ mới nhất. Mã hóa HEVC bao gồm các hoạt động phức tạp hơn với ít hạn chế hơn JPEG. Nó đạt được hiệu quả nén cao hơn nhiều với chi phí thời gian mã hóa cao hơn một chút - hoàn toàn không phải là vấn đề trong quy trình làm việc trên web.

Giống như H265, HEIC dựa trên HEVC được Apple hỗ trợ. Nó có hỗ trợ riêng trong iOS và macOS và được hỗ trợ bởi các trình duyệt Safari, nhưng - chủ yếu là do vấn đề bằng sáng chế và cấp phép - nó không được hỗ trợ bởi phần còn lại (Android, Chrome, Firefox, Windows hoặc Edge).

Vì vậy, một câu hỏi lớn được đặt ra: chúng ta có nên cung cấp các lựa chọn thay thế WEBP / HEIC và JPEG, với các phiên bản PNG làm dự phòng không?

Hãy cùng xem xét từng trường hợp ...

Tôi có nên phục vụ các dẫn xuất WEBP?

Google tuyên bố rằng định dạng này tạo ra hình ảnh nhẹ hơn nhiều so với JPEG với chất lượng tương đương. Tuy nhiên, các thử nghiệm độc lập đã chỉ ra rằng kết quả này không nhất quán trong các biện pháp khác nhau về chất lượng và trong hầu hết các trường hợp, việc giảm cân được cân bằng bằng cách tăng độ mờ.

Trong các thử nghiệm riêng của chúng tôi với hình ảnh thương mại điện tử, chúng tôi đã thấy tiết kiệm tệp cho WebP, nhưng với mức giá mờ hơn và ít chi tiết hơn. Mặc dù, chúng tôi cũng thấy ít rủi ro hơn khi đổ chuông và chặn các cổ vật, điều mà chúng tôi coi là khó chịu về mặt thị giác hơn là mờ.

Vì WebP thiếu sự hỗ trợ của trình duyệt Apple và các hệ thống hoạt động, chúng tôi thường không khuyên bạn nên phục vụ các công cụ phái sinh WebP cạnh tranh với JPEG. Những động thái như vậy sẽ làm tăng sự phức tạp trong quản lý truyền thông với những lợi ích hạn chế.

Tình trạng này sẽ thay đổi nếu Apple bắt đầu hỗ trợ WebP.

Nếu đây là trường hợp, thì bộ tính năng mở rộng của WebP và hình ảnh nhẹ hơn được tạo ra có thể đáng để sử dụng, đơn giản hóa hiệu quả quy trình quản lý hình ảnh.

Để tự thử WebP, một công cụ cổ điển như ImageMagick là một lựa chọn tốt. Nó giúp các phiên bản hình ảnh dễ so sánh với các cài đặt khác nhau về chất lượng và độ phân giải cho cả WebP và JPEG. Kết quả có thể được xem bằng Chrome.

# Chuyển đổi sang WEBP chất lượng 60
chuyển đổi input.jpg -quality 60 output_60.webp
# Chuyển đổi sang chất lượng JPEG 60
chuyển đổi input.jpg -quality 60 output_60.jpg
# Chuyển đổi sang WEBP chất lượng 60 và chiều rộng 450px
chuyển đổi input.jpg -resize 450 -quality 60 output_450_60.webp

Các kết hợp khác nhau về chất lượng và độ phân giải sẽ có hiệu ứng khác nhau trong từng trường hợp, vì các thuật toán nén hoạt động khác nhau. Vì vậy, hãy kiểm tra kích thước tệp có liên quan của bạn trên một số hình ảnh để nắm được mức tiết kiệm tiềm năng và các cài đặt tốt nhất cho trường hợp sử dụng nhất định.

Tôi có nên phục vụ các dẫn xuất HEIC?

Ưu điểm của HEIC (hơn JPEG) là rõ ràng. Giảm cân luôn có ý nghĩa - khoảng 50% - mà không làm giảm chất lượng hình ảnh. Bộ tính năng được hỗ trợ đơn giản là tuyệt vời.

Vấn đề một lần nữa là trình duyệt và hỗ trợ hệ thống hoạt động.

Với các vấn đề bằng sáng chế của HEVC và tiền bản quyền khổng lồ liên quan, chúng tôi có thể mong đợi sự hỗ trợ sẽ vẫn bị hạn chế đối với những người trong thế giới Apple. Vì JPEG đã hiệu quả trong việc nén hình ảnh, 50% của một cái gì đó nhỏ có thể không đủ giá trị để thêm độ phức tạp vào quy trình xử lý hình ảnh của chúng tôi.

Một số trường hợp sử dụng hình ảnh lớn, với mối quan tâm lớn đến chất lượng hình ảnh VÀ với phần lớn thiết bị Apple trong cơ sở người dùng của họ nên xem xét việc phục vụ định dạng này.

Thực hiện các bài kiểm tra với HEIC rất dễ dàng với máy Mac. Xem trước cho phép chúng tôi xuất hình ảnh sang HEIC và JPEG với các giá trị chất lượng khác nhau và độ phân giải khác nhau. Bạn đã giành chiến thắng cần phải chạy nhiều bài kiểm tra để thấy sự khác biệt rõ ràng và có hệ thống giữa chúng.

Xuất sang HEIC trong bản xem trước

Nếu bạn muốn thử một cái gì đó linh hoạt hơn có thể được tích hợp trong quy trình xử lý hình ảnh web, GPAC rất đáng để xem xét.

Còn AVIF thì sao?

AVIF là ứng cử viên cuối cùng của chúng tôi.

Giống như WebP và HEIC dựa trên HEVC, AVIF là một dẫn xuất của những nỗ lực mới nhất trong các tiêu chuẩn video. Nó cũng sử dụng các thùng chứa HEIC / HEIF và do đó hỗ trợ một bộ tính năng hoàn chỉnh, bao gồm tất cả các định dạng chính có sẵn. Nó mang lại hiệu quả cao hơn trong việc nén được kế thừa từ việc sử dụng các cơ chế mã hóa trong khung AV1. Những lợi thế làm cho định dạng này hấp dẫn.

Một lợi thế đáng kể khác đến từ Liên minh Truyền thông mở, tập đoàn lớn đằng sau sự phát triển của nó như một cách tiếp cận hoàn toàn mở, với giấy phép mở, không có tiền bản quyền. Những người chơi lớn như Google, Netflix, Adobe, Mozilla, Microsoft, Facebook và Amazon - những tác nhân chính trong lĩnh vực đồ họa và video trên web - đang ủng hộ định dạng mới này và tạo ra một trường hợp để áp dụng nhanh và rộng, cả về phần mềm và phần cứng. Mặc dù định dạng luồng đã bị đóng băng vào tháng 3 năm 2018 với mã tham chiếu có sẵn, các thiết bị đầu tiên có hỗ trợ phần cứng cho AV1 dự kiến ​​vào cuối năm 2019.

Tại thời điểm viết bài viết này, việc triển khai AV1 có sẵn vẫn có thể được coi là thử nghiệm và không phù hợp để sản xuất.

Tóm lược

JPEG sẽ vẫn là định dạng vua cho hình ảnh chung cho web vào năm 2019 và PNG sẽ vẫn là một tùy chọn mặc định cho hình ảnh có tác phẩm nghệ thuật quan trọng.

Nguyên nhân? Hỗ trợ toàn cầu.

Bất cứ điều gì mở một hình ảnh sẽ mở JPEG hoặc PNG vào năm 2019, giống như trong những năm và thập kỷ trước! Vì vậy, không có nghi ngờ rằng các định dạng phổ quát sẽ vẫn còn tại chỗ trong một thời gian.

Những lợi ích của WebP vẫn còn gây tranh cãi. Một lợi thế rõ ràng của WebP là khả năng thay thế PNG, có khả năng đơn giản hóa quy trình xử lý hình ảnh. Tuy nhiên, không có hỗ trợ phổ quát, lợi thế này biến mất. Điều này chỉ có thể thay đổi nếu Apple thay đổi ý định và WebP cuối cùng đã được áp dụng phổ biến, sau đó nó có thể được sử dụng thay thế cho tất cả các hình ảnh JPEG, PNG và GIF.
 
Ngược lại, hình ảnh HEIC dựa trên HEVC mang lại lợi ích rõ ràng, đặc biệt là đối với độ phân giải lớn. Nếu lưu lượng truy cập của người dùng iOS và macOS có liên quan đến một trang web có hình ảnh nặng lớn, có thể đáng cân nhắc việc cung cấp các lựa chọn thay thế HEIC cho họ, với các cải tiến UX tiềm năng, đặc biệt là cho các kết nối di động chậm. Bên cạnh việc tăng tốc, HEIC đảm bảo chất lượng, gần như không có các vật phẩm chặn và đổ chuông gây phiền nhiễu gây khó chịu cho các chính sách JPEG gây hấn.

Mặc dù AVIF dự kiến ​​cho năm 2019, hỗ trợ và áp dụng sẽ mất thời gian. Nhưng chắc chắn, nó là một định dạng hình ảnh để theo radar của bạn trong tương lai gần.

Tất nhiên, việc sử dụng dịch vụ đám mây để tối ưu hóa hình ảnh sẽ luôn là một lựa chọn dễ dàng và đơn giản để hoàn thành công việc.