Dùng Imagemin để nén hình ảnh

Katie Hempenius

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

Hình ảnh chưa nén sẽ làm tăng kích thước 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 Nội dung lớn nhất hiển thị (LCP), nên những byte không cần thiết đó có thể làm tăng thời lượng tải tài nguyên của hình ảnh, có thể dẫn đến thời gian LCP dài hơn.

Ảnh bên phải nhỏ hơn 40% so với ảnh bên trái, nhưng có lẽ sẽ trông giống hệt với người dùng thông thường.

Đo lường

Chạy Lighthouse để kiểm tra các cơ hội cải thiện quá trình 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ả":

Imagemin

Imagemin là lựa chọn tuyệt vời để nén hình ảnh vì công cụ này hỗ trợ nhiều định dạng hình ảnh và dễ dàng tích hợp với các tập lệnh và công cụ tạo bản dựng. Imagemin có sẵn dưới dạng cả CLI và mô-đun npm. Nhìn chung, mô-đun npm là lựa chọn tốt nhất vì cung cấp nhiều lựa 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ỉnh sửa bất kỳ mã nào.

Trình bổ trợ

Imagemin được xây dựng dựa trên "các 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ụ: "mozjpeg" 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ợ để bạn 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à liệu trình bổ trợ đó có phải là "có tổn hao" hay "không tổn hao". Trong quá trình nén không mất dữ liệu, không có dữ liệu nào bị mất. Nén có tổn hao giúp giảm kích thước tệp, nhưng có thể làm giảm chất lượng ảnh. Nếu một trình bổ trợ không đề cập đến việc nó là "có tổn hao" hay "không tổn hao", bạn có thể biết được thông qua API của trình bổ trợ đó: nếu có thể chỉ định chất lượng hình ảnh của đầu ra, thì đó là "có tổn hao".

Đối với hầu hết mọi người, các trình bổ trợ nén có tổn hao là lựa chọn tốt nhất. Chúng giúp bạn tiết kiệm đáng kể dung lượng 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 phù hợp cho dự án của bạn.

Imagemin CLI

Imagemin CLI hoạt động với 5 trình bổ trợ khác nhau: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant và imagemin-svgo. Imagemin sử dụng trình bổ trợ phù hợp dựa trên định dạng hình ảnh của dữ liệu đầu vào.

Để nén hình ảnh trong thư mục "images/" và lưu chúng 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 Imagemin npm

Nếu bạn muốn sử dụng Imagemin với một trình đóng gói, hãy kiểm tra xem trình đóng gói bạn chọn có trình bổ trợ nào cho Imagemin hay không. Ví dụ: webpack là một trình kết hợp phổ biến có khả năng hỗ trợ tuyệt vời cho Imagemin. Bạn có thể tìm hiểu thêm về cách sử dụng Imagemin với webpack trong lớp học lập trình này.

Bạn cũng có thể sử dụng Imagemin riêng biệt dưới dạng một tập lệnh Node. Mã này sử dụng trình bổ trợ "imagemin-mozjpeg" để nén các tệp JPEG xuống chất lượng 50 ("0" là chất lượng kém nhất; "100" là chất lượng 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);
})();