Định dạng hình ảnh WebP

WebP là định dạng hình ảnh Nguồn mở được phát triển tại Google, hứa hẹn tạo ra hình ảnh có kích thước nhỏ hơn so với định dạng JPG và PNG, đồng thời tạo ra hình ảnh đẹp hơn

Giới thiệu

WebP là định dạng hình ảnh Mã nguồn mở được phát triển tại Google, hứa hẹn tạo ra hình ảnh có kích thước nhỏ hơn so với định dạng JPG và PNG, đồng thời tạo ra hình ảnh đẹp hơn.

WebP hỗ trợminh bạch, như ảnh PNG và GIF.

WebP hỗ trợhình ảnh động, như ảnh GIF

Và, bằng cách sử dụng WebP, bạn có thể đặt tỷ lệ chất lượng của hình ảnh, do đó bạn quyết định xem bạn muốn có chất lượng tốt hơn hay kích thước nhỏ hơn (giống như nó xảy ra trong hình ảnh JPG).

Vì thếWebP có thể làm tất cả các hình ảnh GIF, JPG và PNG có thể làm được, ở một định dạng duy nhất và tạohình ảnh nhỏ hơn. Nghe có vẻ như một thỏa thuận.

Nếu bạn muốn so sánh hình ảnh trông như thế nào ở các định dạng khác nhau,đây là một thư viện tuyệt vời của Google.

WebP khôngMới, nó đã được khoảng vài năm nay.

Nhỏ hơn bao nhiêu?

Tiền đề của việc tạo ra các hình ảnh nhỏ hơn là rất thú vị, đặc biệt là khi bạn xem xét hơn hầu hết kích thước trang web được xác định bởi số lượng và kích thước của nội dung hình ảnh mà người dùng nên tải xuống.

Google đã xuất bản mộtnghiên cứu so sánhtrên kết quả của 1 triệu hình ảnh với kết quả này:

WebP đạt được độ nén tổng thể cao hơn so với JPEG hoặc JPEG 2000. Lợi ích khi thu nhỏ kích thước tệp đặc biệt cao đối với các hình ảnh nhỏ hơn, những hình ảnh phổ biến nhất được tìm thấy trên web.

Bạn nên thử nghiệm với loại hình ảnh bạn định phục vụ và hình thành ý kiến của bạn dựa trên đó.

Trong các thử nghiệm của tôi, nén không mất dữ liệu so với PNG tạo ra hình ảnh WebP nhỏ hơn 50%. PNG chỉ đạt đến kích thước tệp đó khi sử dụng tính năng nén mất dữ liệu.

Tạo hình ảnh WebP

Tất cả các công cụ chỉnh sửa hình ảnh và đồ họa hiện đại cho phép bạn xuất sang.webpcác tập tin.

Các công cụ dòng lệnh cũng tồn tại để chuyển đổi hình ảnh sang WebP trực tiếp. Googlecung cấp một bộ công cụcho điều này.

cwebplà tiện ích dòng lệnh chính để chuyển đổi bất kỳ hình ảnh nào thành.webp, sử dụng nó với

cwebp image.png -o image.webp

Kiểm tra tất cả các tùy chọn bằng cách sử dụngcwebp -longhelp.

Hỗ trợ trình duyệt

WebP hiện được hỗ trợ bởi

  • Trình duyệt Chrome
  • Opera
  • Opera Mini
  • trình duyệt UC
  • Internet Samsung

Tuy nhiên, chỉ Chrome dành cho Máy tính để bàn và Opera 19+ triển khai tất cả các tính năng của WebP, đó là:

  • nén mất mát
  • Nén không mất dữ liệu
  • minh bạch
  • hoạt hình

Các trình duyệt khác chỉ triển khai một tập hợp con. Safari và IE hoàn toàn không hỗ trợ WebP và không có dấu hiệu nào cho thấy WebP sẽ sớm được triển khai trong các trình duyệt đó.

Nhưng Firefox hỗ trợ WebP kể từ phiên bản 65 (tháng 1 năm 2019) và Edge kể từ phiên bản 18.

Vì vậy, nếu chúng tôi có thể cung cấp cho những người dùng đó một hình ảnh được tối ưu hóa, để tăng tốc độ phục vụ họ và tiêu tốn ít băng thông hơn, thì thật tuyệt. Nhưng hãy kiểm tra xem nó có thực sự làm giảm kích thước hình ảnh của bạn hay không.

Kiểm tra kết quả công cụ tối ưu hóa hình ảnh JPG / PNG của bạn và xem việc thêm một lớp phức tạp bổ sung do WebP giới thiệu có hữu ích hay không.

Bạn có thể sử dụng WebP ngày hôm nay như thế nào?

Có một số cách khác nhau để làm như vậy.

Bạn có thể sử dụng cơ chế cấp máy chủ cung cấp hình ảnh WebP thay vì JPG và PNG khiHTTP_ACCEPTtiêu đề yêu cầu chứaimage/webp.

Đầu tiên là thuận tiện nhất, hoàn toàn minh bạch đối với bạn và các trang web của bạn.

Một tùy chọn khác là sử dụng Modernizr và kiểm traModernizr.webpcài đặt.

Nếu bạn không cần hỗ trợ Internet Explorer, một cách rất tiện lợi là sử dụng<picture>thẻ, bây giờ làđược hỗ trợbởi tất cả các trình duyệt chính ngoại trừ Opera Mini và IE (tất cả các phiên bản).

Các<picture>thẻ thường được sử dụng cho hình ảnh đáp ứng, nhưng chúng tôi cũng có thể sử dụng nó cho WebP, nhưhướng dẫn này từ HTML5 Rocksgiải thích.

Bạn có thể chỉ định danh sách các hình ảnh và chúng sẽ được sử dụng theo thứ tự, vì vậy trong ví dụ tiếp theo, các trình duyệt hỗ trợ WebP sẽ sử dụng hình ảnh đầu tiên và dự phòng cho JPG nếu không:

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="An image">
</picture>

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn khác về trình duyệt: