Sử dụng Imagemin với Gulp

Katie Hempenius
Katie Hempenius
X

Thiết lập trình bổ trợ Imagemin Gulp

Nhiễu này đã chứa gulp, gulp-cli và trình bổ trợ gulp-imagemin. Để thêm cấu hình cho Imagemin, bạn cần phải chỉnh sửa tệp gulpfile.js.

  • Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
  • Trước tiên, hãy khởi chạy trình bổ trợ gulp-imagemin bằng cách thêm mã này vào đầu gulpfile.js:
const imagemin = require('gulp-imagemin');
  • Tiếp theo, hãy thay thế nhận xét //Add tasks here trong gulpfile.js bằng khối mã sau:
gulp.src('images/*')
  .pipe(imagemin())
  .pipe(gulp.dest('images/'))

Mã này thêm một tác vụ Gulp sử dụng Imagemin để nén hình ảnh trong thư mục images/. Các hình ảnh gốc sẽ bị ghi đè và lưu trong cùng một thư mục images/.

✔︎ Nhận phòng

Bây giờ, tệp gulpfile.js của bạn sẽ có dạng như sau:

const imagemin = require('gulp-imagemin');
const gulp = require('gulp');

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('images/'))
});

Bây giờ, bạn có một gulpfile.js có thể dùng để nén hình ảnh.

Chạy Gulp

  1. Nhấp vào nút Công cụ.
  2. Sau đó, hãy nhấp vào nút Bảng điều khiển.
  3. Chạy Gulp để nén hình ảnh của bạn bằng cách nhập lệnh sau vào bảng điều khiển:
gulp

Khi Gulp hoàn tất, bạn sẽ thấy thông báo như sau trong thiết bị đầu cuối:

gulp-imagemin: Minified 6 images (saved 50 kB—14.8%)

Kích thước tệp cải thiện được 15% là một khởi đầu tốt; tuy nhiên, bạn có thể cải thiện thêm bằng cách sử dụng các chế độ cài đặt nén khác nhau.

Tuỳ chỉnh cấu hình Imagemin

imagemin-pngquant là một trình bổ trợ để chỉ định mức chất lượng nén. Chúng tôi đã thêm imagemin-pngquant vào dự án này trong tệp package.json để bạn có thể sử dụng tệp này nhằm nén PNG. Để sử dụng trình bổ trợ này, hãy khai báo trình bổ trợ và chỉ định mức chất lượng nén trong gulpfile của bạn.

  • Khai báo trình bổ trợ imagemin-pngquant bằng cách thêm dòng này vào đầu gulpfile.js:
const pngquant = require('imagemin-pngquant');
  • Thêm trình bổ trợ imagemin-pngquant (và các chế độ cài đặt của trình bổ trợ đó) bằng cách truyền mảng sau đây đến ImageminPlugin():
[pngquant({quality: [0.5, 0.5]})]

Mã này yêu cầu Imagemin nén các tệp PNG bằng trình bổ trợ Pngquant. Trường quality sử dụng dải giá trị min và max để xác định mức nén – 0 là thấp nhất và 1 là cao nhất. Để buộc tất cả hình ảnh phải nén ở 50% chất lượng, hãy truyền 0.5 dưới dạng cả giá trị tối thiểu và tối đa.

✔︎ Nhận phòng

Bây giờ, tệp gulpfile.js của bạn sẽ có dạng như sau:

const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin([
      pngquant({quality: [0.5, 0.5]})
    ]))
    .pipe(gulp.dest('images/'))
});

Còn JPG thì sao? Dự án cũng có hình ảnh JPG; các hình ảnh này cũng cần được nén.

Tuỳ chỉnh cấu hình Imagemin (tiếp theo)

Sử dụng trình bổ trợ imagemin-mozjpeg đã được cài đặt cho bạn để nén hình ảnh JPG.

  • Khai báo trình bổ trợ imagemin-mozjpeg bằng cách đặt dòng này lên đầu gulpfile.js.
const mozjpeg = require('imagemin-mozjpeg');
  • Tiếp theo, hãy thêm mozjpeg({quality: 50}) vào mảng được chuyển đến ImageminPlugin():
[
  pngquant({quality: [0.5, 0.5]}),
  mozjpeg({quality: 50})
]

✔︎ Nhận phòng

Bây giờ, tệp gulpfile.js của bạn sẽ có dạng như sau:

const mozjpeg = require('imagemin-mozjpeg')
const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin([
      pngquant({quality: [0.5, 0.5]}),
      mozjpeg({quality: 50})
    ]))
    .pipe(gulp.dest('images/'))
});

Chạy lại Gulp và xác minh kết quả bằng Lighthouse

  • Chạy lại Gulp:
gulp

Khi Gulp hoàn tất, bạn sẽ thấy thông báo như sau trong dòng lệnh:

gulp-imagemin: Minified 6 images (saved 667 kB—66.5%)

Thật tuyệt! Những kết quả này tốt hơn nhiều.

Cuối cùng, bạn nên sử dụng Lighthouse để xác minh những thay đổi vừa thực hiện.

Quy trình kiểm tra hiệu suất "Mã hoá hình ảnh hiệu quả" của Lighthouse có thể cho bạn biết liệu hình ảnh JPEG trên trang của bạn đã được nén một cách tối ưu hay chưa.

  • Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen toàn màn hình (Toàn màn hình).
  • Chạy bài kiểm tra hiệu suất của Lighthouse (Lighthouse > Tuỳ chọn > Hiệu suất) trên phiên bản trực tiếp của Glitch và xác minh rằng bài kiểm tra "Mã hoá hình ảnh hiệu quả" đã được vượt qua.

Vượt qua quy trình kiểm tra "Mã hoá hình ảnh hiệu quả" trong Lighthouse

Thành công! Bạn đã sử dụng Imagemin để nén hình ảnh trên trang một cách tối ưu.