Tại sao bạn cần quan tâm? #
Hình ảnh WebP nhỏ hơn so với các hình ảnh JPEG và PNG — thường ở mức độ giảm 25–35% kích thước tệp. Đ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 giúp tải trang nhanh hơn 10% .
- Facebook đã tiết kiệm được 25-35% kích thước tệp cho JPEG và tiết kiệm 80% kích thước tệp cho PNG khi họ chuyển sang sử dụng WebP.
WebP là một sự thay thế tuyệt vời cho các hình ảnh JPEG, PNG và GIF. Ngoài ra, WebP cung cấp cả nén không mất dữ liệu và nén mất dữ liệu. Trong nén không mất dữ liệu, không có dữ liệu nào bị mất. Nén Lossy làm giảm kích thước tệp, nhưng có thể làm giảm chất lượng hình ảnh.
Chuyển đổi hình ảnh sang WebP #
Mọi người thường sử dụng một trong các cách tiếp cận sau để chuyển đổi hình ảnh của họ sang WebP: công cụ dòng lệnh cwebp hoặc plugin Imagemin WebP (gói npm). Plugin Imagemin WebP nói chung là lựa chọn tốt nhất nếu dự án của bạn sử dụng tập lệnh xây dựng hoặc công cụ xây 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 bạn chuyển đổi hình ảnh sang WebP, bạn có tùy chọn đặt nhiều cài đặt nén khác nhau — nhưng đối với hầu hết mọi người, điều duy nhất bạn cần quan tâm là cài đặt chất lượng. Bạn có thể chỉ định mức chất lượng từ 0 (kém nhất) đến 100 (tốt nhất). Điều này rất đáng để thử, 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 nhu cầu của bạn.
Sử dụng cwebp #
Chuyển đổi một tệp duy nhất, sử dụng cài đặt nén mặc định của cwebp:
cwebp images/flower.jpg -o images/flower.webpChuyể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.webpChuyển đổi tất cả các tệp trong một thư mục:
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; doneSử dụng Imagemin #
Plugin Imagemin WebP có thể được sử dụng bởi chính nó hoặc với công cụ xây dựng yêu thích của bạn (Webpack / Gulp / Grunt / etc.). Điều này thường liên quan đến việc thêm ~ 10 dòng mã vào tập lệnh xây dựng hoặc tệp cấu hình cho công cụ xây dựng của bạn. Dưới đây là các ví dụ về cách thực hiện điều đó cho Webpack , Gulp và Grunt .
Nếu bạn không sử dụng một trong những công cụ xây dựng đó, bạn có thể sử dụng Imagemin như một tập lệnh Node. Tập lệnh này sẽ chuyển đổi các tệp trong thư mục imagesvà lưu chúng trong 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!');
});Cung cấp hình ảnh WebP #
Nếu trang web của bạn chỉ hỗ trợ các trình duyệt tương thích với WebP , bạn có thể ngừng đọc. Nếu không, hãy cung cấp WebP cho các trình duyệt mới hơn và một hình ảnh dự phòng cho các trình duyệt cũ hơn:
Trước:
<img src="flower.jpg" alt="">Sau:
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>Các thẻ <picture>, <source>và <img>, bao gồm cả cách chúng được sắp xếp tương đối với nhau, tất cả đều tương tác để đạt được kết quả cuối cùng này.
hình ảnh #
Thẻ <picture>cung cấp một trình bao bọc cho không hoặc nhiều <source>thẻ và một <img>thẻ.
nguồn #
Thẻ <source>chỉ định một tài nguyên phương tiện.
Trình duyệt sử dụng nguồn được liệt kê đầu tiên có định dạng mà nó hỗ trợ. Nếu trình duyệt không hỗ trợ bất kỳ định dạng nào được liệt kê trong <source>thẻ, trình duyệt sẽ quay trở lại việc tải hình ảnh được chỉ định bởi <img>thẻ.
img #
Thẻ <img>là thứ làm cho mã này hoạt động trên các trình duyệt không hỗ trợ <picture>thẻ. Nếu trình duyệt không hỗ trợ <picture>thẻ, trình duyệt sẽ bỏ qua các thẻ mà trình duyệt không hỗ trợ. Do đó, nó chỉ "nhìn thấy" <img src="flower.jpg" alt="">thẻ và tải hình ảnh đó.
Xác minh việc sử dụng WebP #
Lighthouse có thể được sử dụng để xác minh rằng tất cả hình ảnh trên trang web của bạn đang được cung cấp bằng cách sử dụng WebP. Chạy Kiểm tra hiệu suất Lighthouse ( Ngọn hải đăng> Tùy chọn> Hiệu suất ) và tìm kiếm kết quả của việc cung cấp hình ảnh trong kiểm tra định dạng thế hệ tiếp theo . Lighthouse sẽ liệt kê bất kỳ hình ảnh nào không được cung cấp trong WebP.
