שימוש ב-Imagemin לדחיסת תמונות

Katie Hempenius

למה זה חשוב לכם?

תמונות לא דחוסות גורמות לניפוח של הדפים בבייטים מיותרים. תמונות יכולות להיות מועמדות למדד המהירות שבה נטען רכיב התוכן הכי גדול (LCP), ולכן בייטים מיותרים יכולים להגדיל את משך טעינת המשאב של התמונה, ואולי לגרום לזמני LCP ארוכים יותר.

התמונה בצד ימין קטנה ב-40% מהתמונה בצד שמאל, אבל סביר להניח שהיא תיראה זהה למשתמש הממוצע.

מדידה

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

Imagemin

‫Imagemin היא בחירה מצוינת לדחיסת תמונות כי היא תומכת במגוון רחב של פורמטים של תמונות, וקל לשלב אותה עם סקריפטים וכלים לבנייה. ‫Imagemin זמין כCLI וגם כמודול npm. בדרך כלל, מודול npm הוא הבחירה הכי טובה כי הוא מציע יותר אפשרויות הגדרה, אבל ממשק שורת הפקודה יכול להיות חלופה טובה אם רוצים לנסות את Imagemin בלי לגעת בקוד.

פלאגינים

הכלי Imagemin מבוסס על 'תוספים'. תוסף הוא חבילת npm שדוחסת פורמט תמונה מסוים (למשל, התוסף mozjpeg דוחס קובצי JPEG). יכול להיות שיהיו כמה תוספים לבחירה עבור פורמטים פופולריים של תמונות.

הדבר הכי חשוב שצריך לקחת בחשבון כשבוחרים פלאגין הוא אם הוא 'דוחס עם אובדן נתונים' או 'דוחס ללא אובדן נתונים'. בדחיסה ללא אובדן נתונים, אף נתון לא הולך לאיבוד. דחיסה עם אובדן נתונים מקטינה את גודל הקובץ, אבל עלולה לפגוע באיכות התמונה. אם בתוסף לא מצוין אם הוא 'דוחס עם אובדן נתונים' או 'דוחס ללא אובדן נתונים', אפשר לדעת זאת לפי ה-API שלו: אם אפשר לציין את איכות התמונה של הפלט, אז הוא 'דוחס עם אובדן נתונים'.

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

Imagemin CLI

ממשק Imagemin CLI פועל עם 5 תוספים שונים: imagemin-gifsicle,‏ imagemin-jpegtran,‏ imagemin-optipng,‏ imagemin-pngquant ו-imagemin-svgo. ‫Imagemin משתמש בפלאגין המתאים על סמך פורמט התמונה של הקלט.

כדי לדחוס את התמונות בספרייה images/ ולשמור אותן באותה ספרייה, מריצים את הפקודה הבאה (הקובץ המקורי יוחלף):

$ imagemin images/* --out-dir=images

מודול Imagemin npm

אם רוצים להשתמש ב-Imagemin עם bundler, צריך לבדוק אם יש פלאגין זמין ל-bundler שבחרתם. לדוגמה, webpack הוא כלי פופולרי לאריזת קבצים, עם תמיכה מצוינת ב-Imagemin. בשיעור Codelab הזה מוסבר איך משתמשים ב-Imagemin עם webpack.

אפשר גם להשתמש ב-Imagemin לבד כסקריפט Node. הקוד הזה משתמש בפלאגין imagemin-mozjpeg כדי לדחוס קובצי JPEG לאיכות של 50 (0 היא האיכות הכי גרועה ו-100 היא האיכות הכי טובה):

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);
})();