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

Katie Hempenius

למה כדאי לכם להקפיד על כך?

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

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

מדידה

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

Imagemin

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

יישומי פלאגין

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

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

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

Imagemin CLI

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

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

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

מודול npm של Imagemin

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

אפשר גם להשתמש ב-Imagemin בפני עצמו כסקריפט של Node. הקוד הזה משתמש בפלאגין imagemin-mosjpeg כדי לדחוס קובצי 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);
})();