שימוש ב-Imagemin עם גראנט

קייטי המפניוס
קייטי המפניוס
X

הגדרת הפלאגין Imagemin Graunt

התקלה הזו כבר מכילה את 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 */]);
  • לסיום, יש להחליף את התגובה /* list plugins here */ ב-'imagemin' כדי להוסיף את Imagemin כמשימת ברירת המחדל של Graunt. עכשיו השורה אמורה להיראות כך:
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 (המשך)

כדי לדחוס תמונות בפורמט JPEG, צריך להשתמש בפלאגין imagemin-mozjpeg, שכבר הותקן.

  • מצהירים על הפלאגין 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']);

הרצת גראנט ואימות התוצאות באמצעות Lighthouse

  1. לוחצים על הלחצן כלים.
  2. לאחר מכן לוחצים על הלחצן מסוף.
  3. הפעל את Graunt על ידי הקלדת הפקודה הבאה במסוף:
grunt

בסיום ה-GRunt אמורה להופיע הודעה כזאת במסוף:

Minified 6 images (saved 667 kB - 66.5%)

מעולה! התוצאות האלה הרבה יותר טובות.

לסיום, כדאי להשתמש ב-Lighthouse כדי לאמת את השינויים שביצעתם. בדיקת הביצועים מסוג 'קידוד יעיל של תמונות' של Lighthouse תאפשר לכם לדעת אם תמונות ה-JPEG בדף דחוסות בצורה אופטימלית.

  • כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen מסך מלא.
  • מפעילים את בדיקת הביצועים של Lighthouse (Lighthouse > אפשרויות > ביצועים) בגרסה הפעילה של התקלה, ומוודאים שהביקורת 'קידוד תמונות יעיל' עברה.

עובר את הבדיקה בנושא 'קידוד יעיל של תמונות' ב-Lighthouse

זהו! השתמשת ב-Imagemin כדי לדחוס באופן אופטימלי את התמונות בדף.