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

Katie Hempenius

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

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

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

מדידה

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

תמונה מינימלית

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

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

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

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

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

Imagemin CLI

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

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

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

מודל Imagemin npm

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

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