Sử dụng hình ảnh WebP

Katie Hempenius
Katie Hempenius
X

Tại sao bạn nên quan tâm?

Hình ảnh WebP nhỏ hơn hình ảnh JPEG và PNG – thường xuất hiện trên mức độ giảm kích thước tệp 25-35%. Điều này làm giảm kích thước trang và cải thiện hiệu suất.

  • YouTube nhận thấy rằng việc chuyển sang hình thu nhỏ WebP mang lại 10% tải trang nhanh hơn.
  • Facebook gặp phải Tiết kiệm 25-35% kích thước tệp đối với JPEG và giảm 80% kích thước tệp cho PNG khi họ đã chuyển sang dùng WebP.

WebP là giải pháp thay thế tuyệt vời cho hình ảnh JPEG, PNG và GIF. Ngoài ra, WebP cung cấp cả tính năng nén không tổn hao và có tổn hao. Trong tính năng nén không mất dữ liệu, không có dữ liệu bị mất. Nén có tổn hao giúp giảm kích thước tệp, nhưng dẫn đến khả năng làm giảm chất lượng ảnh.

Chuyển đổi hình ảnh sang WebP

Mọi người thường sử dụng một trong các phương pháp sau để chuyển đổi hình ảnh sang WebP: phương thức công cụ dòng lệnh cwebp hoặc trình bổ trợ WebP Imagemin (npm gói hàng). Trình bổ trợ WebP Imagemin thường là lựa chọn tốt nhất nếu dự án của bạn sử dụng bản dựng các tập lệnh hoặc công cụ bản dựng (ví dụ: Webpack hoặc Gulp), trong khi CLI là lựa chọn tốt cho các dự án đơn giản hoặc nếu bạn chỉ cần chuyển đổi hình ảnh một lần.

Khi chuyển đổi hình ảnh sang WebP, bạn có thể đặt nhiều loại cài đặt nén—nhưng đối với hầu hết mọi người, điều duy nhất bạn cần bạn cần quan tâm là chế độ cài đặt chất lượng. Bạn có thể chỉ định mức chất lượng từ 0 (tệ nhất) đến 100 (tốt nhất). Cũng đáng để thử đấy, tìm mức độ nào là sự cân bằng phù hợp giữa chất lượng hình ảnh và kích thước tệp cho của bạn.

Sử dụng cwebp

Chuyển đổi một tệp bằng các chế độ cài đặt nén mặc định của cwebp:

cwebp images/flower.jpg -o images/flower.webp

Chuyển đổi một tệp duy nhất, sử dụng mức chất lượng 50:

cwebp -q 50 images/flower.jpg -o images/flower.webp

Chuyển đổi tất cả tệp trong thư mục:

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

Sử dụng Imagemin

Bạn có thể tự sử dụng trình bổ trợ WebP Imagemin hoặc với công cụ tạo bản dựng mà bạn yêu thích (Webpack/Gulp/Grunt/etc.). Việc này thường bao gồm việc thêm khoảng 10 dòng mã vào một tập lệnh bản dựng hoặc tệp cấu hình cho công cụ xây dựng của bạn. Sau đây là ví dụ về cách làm việc đó cho Gói web, Vịnh và Tiếng chém.

Nếu không sử dụng một trong các công cụ xây dựng đó, bạn có thể tự sử dụng Imagemin làm tập lệnh Nút. Tập lệnh này sẽ chuyển đổi các tệp trong thư mục images và lưu chúng vào thư mục compressed_images.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*'], {
  destination: 'compressed_images',
  plugins: [imageminWebp({quality: 50})]
}).then(() => {
  console.log('Done!');
});

Phân phát hình ảnh WebP

Nếu trang web của bạn chỉ hỗ trợ định dạng WebP trình duyệt, bạn có thể dừng đọc. Nếu không, phân phát WebP cho các trình duyệt mới và phân phát hình ảnh dự phòng cho các trình duyệt cũ:

Trước: html <img src="flower.jpg" alt="">

Sau: html <picture> <source type="image/webp" srcset="flower.webp"> <source type="image/jpeg" srcset="flower.jpg"> <img src="flower.jpg" alt=""> </picture>

Chiến lược phát hành đĩa đơn <picture>! <source>, và <img>, bao gồm cả cách chúng được sắp xếp tương ứng với nhau, tất cả tương tác để đạt được kết quả cuối cùng này.

<picture>

Thẻ <picture> cung cấp một trình bao bọc cho 0 hoặc nhiều thẻ <source> và một thẻ <img>.

<source>

Thẻ <source> chỉ định một tài nguyên nội dung nghe nhìn.

Trình duyệt sử dụng nguồn được liệt kê đầu tiên ở định dạng mà trình duyệt hỗ trợ. Nếu trình duyệt không hỗ trợ định dạng nào nêu trong thẻ <source>, thì trình duyệt sẽ quay lại tải hình ảnh do thẻ <img> chỉ định.

<img>

Thẻ <img> giúp mã này hoạt động trên trình duyệt không hỗ trợ thẻ <picture>. Nếu trình duyệt không hỗ trợ thẻ <picture>, bỏ qua các thẻ mà nó không hỗ trợ. Do đó, hệ thống chỉ "nhìn thấy" thời gian <img src="flower.jpg" alt=""> gắn thẻ và tải hình ảnh đó.

Đọc tiêu đề HTTP Accept

Nếu có một ứng dụng phụ trợ hoặc máy chủ web cho phép bạn ghi lại các yêu cầu, bạn có thể đọc giá trị của tiêu đề HTTP Accept. Tiêu đề này sẽ quảng cáo những định dạng hình ảnh thay thế được hỗ trợ:

Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8

Việc đọc tiêu đề yêu cầu này và viết lại phản hồi dựa trên nội dung có lợi ích là đơn giản hoá mã đánh dấu hình ảnh của bạn. Mã đánh dấu <picture> có thể mất khá nhiều thời gian với nhiều nguồn. Dưới đây là quy tắc Apache mod_rewrite có thể phân phát các phiên bản thay thế của WebP:

RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]

Nếu đi theo cách này, bạn cần thiết lập tiêu đề phản hồi HTTP Vary để đảm bảo bộ nhớ đệm hiểu được rằng hình ảnh có thể được phân phát cùng với nhiều loại nội dung:

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Content-Type"
  </IfModule>
</FilesMatch>

Quy tắc ghi lại ở trên sẽ tìm phiên bản WebP của mọi hình ảnh JPEG hoặc PNG được yêu cầu. Nếu tìm thấy một WebP thay thế, thì phiên bản này sẽ được phân phát cùng với tiêu đề Content-Type phù hợp. Thao tác này sẽ cho phép bạn sử dụng mã đánh dấu hình ảnh tương tự như sau với tính năng hỗ trợ WebP tự động:

<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">

Xác minh việc sử dụng WebP

Bạn có thể dùng Lighthouse để xác minh rằng tất cả hình ảnh trên trang web của bạn đang được phân phát sử dụng WebP. Chạy Kiểm tra hiệu suất Lighthouse (Lighthouse > Tuỳ chọn > hiệu suất) và tìm kiếm kết quả của tính năng Phân phát hình ảnh thế hệ mới kiểm tra định dạng. Lighthouse sẽ liệt kê mọi hình ảnh không được phân phát WebP.