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

Katie Hempenius

למה זה חשוב לך?

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

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

מדידה

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

תמונה ממוזערת

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

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

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

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

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

Imagemin CLI

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

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

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

מודול NPM של Imagemin

אם אתם משתמשים באחד מכלי ה-build האלה, לבדוק את Codelabs ל-Imagemin webpack, gulp, או grunt.

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