Tại sao bạn nên quan tâm?
Hình ảnh không nén làm đầy trang của bạn với các byte không cần thiết. Vì hình ảnh có thể là ứng cử viên cho Thời gian hiển thị nội dung lớn nhất (LCP), nên những byte không cần thiết đó có thể làm tăng thời gian tải tài nguyên không cần thiết, dẫn đến thời gian LCP lâu hơn.
Ảnh bên phải nhỏ hơn 40% so với ảnh bên trái, nhưng có thể trông giống với người dùng thông thường.
|
|
|
|---|
Đo
Chạy Lighthouse để kiểm tra các cơ hội cải thiện tốc độ tải trang bằng cách nén hình ảnh. Những cơ hội này được liệt kê trong phần "Mã hoá hình ảnh hiệu quả":
Hình ảnh tối thiểu
Imagemin là lựa chọn tuyệt vời để nén hình ảnh vì hỗ trợ nhiều định dạng hình ảnh, đồng thời dễ dàng tích hợp với tập lệnh bản dựng và công cụ xây dựng. Imagemin có sẵn ở cả hai dạng CLI và mô-đun npm. Nhìn chung, mô-đun npm là lựa chọn tốt nhất vì mô-đun này cung cấp nhiều tuỳ chọn cấu hình hơn, nhưng CLI có thể là một lựa chọn thay thế phù hợp nếu bạn muốn dùng thử Imagemin mà không cần chạm vào bất kỳ mã nào.
Trình bổ trợ
Imagemin được xây dựng dựa trên "trình bổ trợ". Trình bổ trợ là một gói npm nén một định dạng hình ảnh cụ thể (ví dụ: "jpeg" nén các tệp JPEG). Các định dạng hình ảnh phổ biến có thể có nhiều trình bổ trợ để chọn.
Điều quan trọng nhất cần cân nhắc khi chọn một trình bổ trợ là trình bổ trợ đó "không mất dữ liệu" hay "không mất dữ liệu". Khi nén không tổn hao, dữ liệu sẽ không bị mất. Nén tổn hao 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. Nếu một trình bổ trợ không đề cập đến việc liệu trình bổ trợ là "có tổn hao" hay "không mất dữ liệu", thì bạn có thể nhận biết qua API của trình bổ trợ đó: nếu bạn có thể chỉ định chất lượng hình ảnh của đầu ra, thì trình bổ trợ sẽ "có bóng".
Đối với hầu hết mọi người, trình bổ trợ có tổn hao là lựa chọn tốt nhất. Các định dạng này giúp tiết kiệm đáng kể kích thước tệp và bạn có thể tuỳ chỉnh các mức nén để đáp ứng nhu cầu của mình. Bảng dưới đây liệt kê các trình bổ trợ Imagemin phổ biến. Đây không phải là những trình bổ trợ duy nhất hiện có, nhưng tất cả đều là lựa chọn tốt cho dự án của bạn.
| Định dạng hình ảnh | (Các) trình bổ trợ có tổn hao | (Các) trình bổ trợ không tổn hao |
|---|---|---|
| JPEG | imagemin-mozjpeg | imagemin-jpegtran |
| PNG | imagemin-pngquant | imagemin-optipng |
| GIF | imagemin-giflossy | imagemin-gif |
| SVG | imagemin-svgo | |
| WebP | imagemin-webp | imagemin-webp |
CLI Imagemin
Imagemin CLI hoạt động với 5 trình bổ trợ: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant và imagemin-svgo. Imagemin sử dụng trình bổ trợ thích hợp dựa trên định dạng hình ảnh của đầu vào.
Để nén hình ảnh trong thư mục "images/" và lưu các hình ảnh đó vào cùng một thư mục, hãy chạy lệnh sau (ghi đè các tệp gốc):
$ imagemin images/* --out-dir=images
Mô-đun npm Imagemin
Nếu bạn sử dụng một trong các công cụ xây dựng này, hãy kiểm tra các lớp học lập trình về Imagemin bằng webpack, gulp hoặc grunt.
Bạn cũng có thể sử dụng Imagemin làm tập lệnh Nút. Mã này sử dụng trình bổ trợ "imagemin-mozjpeg" để nén các tệp JPEG tới chất lượng 50 ("0" là tệ nhất; "100" là tốt nhất):
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
(async() => {
const files = await imagemin(
['source_dir/*.jpg', 'another_dir/*.jpg'],
{
destination: 'destination_dir',
plugins: [imageminMozjpeg({quality: 50})]
}
);
console.log(files);
})();