การใช้ Imagemin กับ Grunt

Katie Hempenius

ตั้งค่าปลั๊กอิน Imagemin Grunt

กลิทช์นี้มี grunt, grunt-cli และปลั๊กอิน grunt-contrib-imagemin แล้ว หากต้องการเพิ่มการกำหนดค่าสำหรับ Imagemin คุณจะต้องแก้ไขไฟล์ gruntfile.js

• คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
• ใน gruntfile.js ให้แทนที่ความคิดเห็น //Add configuration here ด้วยโค้ดบล็อกต่อไปนี้

imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

โค้ดบล็อกนี้จะบอก Grunt ว่าควรบีบอัดไฟล์ใดด้วย Imagemin

• dynamic บ่งชี้ว่าระบบจะสร้างรายการไฟล์ที่จะบีบอัดแบบไดนามิกโดยการจับคู่ชื่อไฟล์กับรูปแบบไฟล์ที่ระบุ

• รูปแบบไฟล์ {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} จะตรงกับรูปภาพ JPEG และ PNG ทั้งหมดในไดเรกทอรี images/

• โหลดงาน Imagemin โดยเพิ่มบรรทัดนี้ก่อน grunt.registerTask(...):

grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);

• สุดท้าย ให้เพิ่ม Imagemin เป็นงาน Grunt เริ่มต้นโดยแทนที่ความคิดเห็นใน /* list plugins here */ ด้วย 'imagemin' บรรทัดดังกล่าวควรมีลักษณะดังนี้

grunt.registerTask('default', ['imagemin']);

✔︎ เช็คอิน

ไฟล์ gruntfile.js ที่สมบูรณ์ควรมีลักษณะดังนี้

const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    dynamic: {
      files: [{
        cwd: 'images/'
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

ปรับแต่งการกําหนดค่า Imagemin

imagemin-pngquant เป็นปลั๊กอินสำหรับระบุระดับคุณภาพการบีบอัด เราได้เพิ่ม imagemin-pngquant ในโปรเจ็กต์นี้ในไฟล์ package.json แล้ว เพื่อให้คุณใช้บีบอัด PNG ได้ หากต้องการใช้งาน ให้ประกาศปลั๊กอิน และระบุระดับคุณภาพการบีบอัดใน Gruntfile

• ประกาศปลั๊กอิน imagemin-pngquant ด้วยการเพิ่มบรรทัดนี้ที่ด้านบนของ gruntfile.js:

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...

• เพิ่มการตั้งค่าสำหรับการบีบอัดรูปภาพ PNG โดยการเพิ่มพร็อพเพอร์ตี้ options ลงในออบเจ็กต์ imagemin พร็อพเพอร์ตี้ options ควรมีลักษณะดังนี้

grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

โค้ดนี้จะบอกให้ Imagemin บีบอัด PNG โดยใช้ปลั๊กอิน Pngquant ช่อง quality ใช้ช่วงค่า min และ max เพื่อกำหนดระดับการบีบอัด โดย 0 คือต่ำสุด และ 1 คือค่าสูงสุด หากต้องการบังคับให้บีบอัดรูปภาพทั้งหมดที่คุณภาพ 50% ให้ส่ง 0.5 เป็นทั้งค่าต่ำสุดและสูงสุด

✔︎ เช็คอิน

ไฟล์ gruntfile.js ควรมีลักษณะดังนี้

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

แล้ว JPEG ล่ะ โปรเจ็กต์ยังมีรูปภาพ JPEG คุณจึงควรระบุวิธีบีบอัดรูปภาพด้วย

ปรับแต่งการกำหนดค่า Imagemin (ต่อ)

ใช้ปลั๊กอิน imagemin-mozjpeg ซึ่งติดตั้งให้คุณแล้ว เพื่อบีบอัดรูปภาพ JPEG

• ประกาศปลั๊กอิน imagemin-mozjpeg โดยวางบรรทัดนี้ที่ด้านบน gruntfile.js ของคุณ

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

• จากนั้น เพิ่ม mozjpeg({quality: 50}) ลงในอาร์เรย์ในออบเจ็กต์ options อาร์เรย์ควรมีลักษณะเช่นนี้

grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔︎ เช็คอิน

ไฟล์ gruntfile.js ควรมีลักษณะดังนี้

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

เรียกใช้ Grunt และยืนยันผลลัพธ์ด้วย Lighthouse

1. คลิกปุ่มเครื่องมือ
2. จากนั้นคลิกปุ่มคอนโซล
3. เรียกใช้ Grunt โดยพิมพ์คำสั่งต่อไปนี้ในคอนโซล:

grunt

เมื่อ Grunt เสร็จสมบูรณ์แล้ว คุณควรเห็นข้อความแบบนี้ในคอนโซล:

Minified 6 images (saved 667 kB - 66.5%)

ไชโย ผลลัพธ์เหล่านี้ดีขึ้นมาก

สุดท้าย ขอแนะนำให้ใช้ Lighthouse เพื่อตรวจสอบการเปลี่ยนแปลงที่คุณเพิ่งดำเนินการ การตรวจสอบประสิทธิภาพ "เข้ารหัสรูปภาพอย่างมีประสิทธิภาพ" ของ Lighthouse จะช่วยให้คุณทราบว่ารูปภาพ JPEG ในหน้าเว็บได้รับการบีบอัดอย่างมีประสิทธิภาพสูงสุดหรือไม่

• หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
• เรียกใช้การตรวจสอบประสิทธิภาพของ Lighthouse (Lighthouse > ตัวเลือก > ประสิทธิภาพ) ใน Glitch เวอร์ชันที่เผยแพร่อยู่ และตรวจสอบว่าผ่านการตรวจสอบ "เข้ารหัสรูปภาพอย่างมีประสิทธิภาพ" แล้ว

สำเร็จ! คุณได้ใช้ Imagemin เพื่อบีบอัดรูปภาพบนหน้าเว็บอย่างเหมาะสมแล้ว