שימוש ב-Imagemin עם Gulp

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

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

התקלה הזו כבר מכילה את gulp, gulp-cli ואת הפלאגין gulp-imagemin. כדי להוסיף את ההגדרות האישיות של Imagemin, צריך לערוך את הקובץ gulpfile.js.

• לוחצים על רמיקס לעריכה כדי שיהיה אפשר לערוך את הפרויקט.
• קודם כל, מפעילים את הפלאגין gulp-imagemin על ידי הוספת הקוד הבא בחלק העליון של gulpfile.js:

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

• לאחר מכן, מחליפים את התגובה //Add tasks here ב-gulpfile.js בבלוק הקוד הזה:

gulp.src('images/*')
  .pipe(imagemin())
  .pipe(gulp.dest('images/'))

הקוד הזה מוסיף משימת Gulp שמשתמשת ב-Imagemin כדי לדחוס את התמונות בספרייה images/. התמונות המקוריות מוחלפות ונשמרות באותה ספריית images/.

✔︎ צ'ק-אין

עכשיו קובץ gulpfile.js אמור להיראות כך:

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

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

עכשיו יש לך קובץ gulpfile.js שאפשר להשתמש בו כדי לדחוס תמונות.

הרצה של עיפרון

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

gulp

בסיום Gulp, אמורה להופיע הודעה כמו זו בטרמינל:

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

שיפור של 15% בגודל הקובץ הוא התחלה טובה, אבל אפשר לבצע שיפורים נוספים באמצעות הגדרות דחיסה שונות.

התאמה אישית של תצורת ה-Imagemin

imagemin-pngquant הוא פלאגין לציון רמות איכות דחיסה. כבר הוספנו את imagemin-pngquant לפרויקט הזה בקובץ package.json, כדי שתוכלו להשתמש בו כדי לדחוס את קובצי ה-PNG. כדי להשתמש בו, מצהירים על הפלאגין ומציינים את רמת איכות הדחיסה בקובץ ה-gulpfile.

• כדי להצהיר על הפלאגין imagemin-pngquant, מוסיפים את השורה הבאה בחלק העליון של gulpfile.js:

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

• מוסיפים את הפלאגין imagemin-pngquant (ואת ההגדרות שלו) על ידי העברת המערך הבא אל ImageminPlugin():

[pngquant({quality: [0.5, 0.5]})]

הקוד הזה מורה ל-Imagemin לדחוס קובצי PNG באמצעות הפלאגין Pngquant. השדה quality משתמש בטווח הערכים min ו-max כדי לקבוע את רמת הדחיסה: 0 הוא הנמוך ביותר ו-1 הוא הגבוה ביותר. כדי לאלץ את כל התמונות לדחוס באיכות של 50%, צריך להעביר את 0.5 כערך המינימלי וגם כערך המקסימלי.

✔︎ צ'ק-אין

עכשיו קובץ gulpfile.js אמור להיראות כך:

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/'))
});

אבל מה לגבי קובצי JPG? הפרויקט כולל גם תמונות JPG, וצריך לדחוס אותן גם כן.

התאמה אישית של תצורת Imagemin (המשך)

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

• להצהיר על הפלאגין imagemin-mozjpeg. לשם כך, יש להציב את השורה הזו בחלק העליון של ה-gulpfile.js.

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

• בשלב הבא מוסיפים את mozjpeg({quality: 50}) למערך שמועבר אל ImageminPlugin():

[
  pngquant({quality: [0.5, 0.5]}),
  mozjpeg({quality: 50})
]

✔︎ צ'ק-אין

עכשיו קובץ gulpfile.js אמור להיראות כך:

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/'))
});

הפעלה מחדש של Gulp ואימות התוצאות באמצעות Lighthouse

• הפעל מחדש את Gulp:

gulp

בסיום Gulp, אמורה להופיע הודעה כמו זו במסוף:

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

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

לסיום, כדאי להשתמש ב-Lighthouse כדי לאמת את השינויים שביצעתם.

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

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

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