למה כדאי לכם להקפיד על כך?
תמונות לא דחוסות גורמות להגדלת נפח הדפים בבייט מיותרים. מכיוון שתמונות יכולות להיות מועמדות ל'המהירות שבה נטען רכיב התוכן הכי גדול' (LCP), הבייטים הלא נחוצים האלה יכולים להגדיל את משך הטעינה של המשאב של התמונה, וכתוצאה מכך להאריך את זמני ה-LCP.
התמונה בצד שמאל קטנה ב-40% מהתמונה בצד ימין, אבל סביר להניח שהמשתמש הממוצע לא יזהה את ההבדל.
|
|
|
|---|
מדידה
מריצים את Lighthouse כדי לבדוק אם יש הזדמנויות לשיפור טעינת הדף על ידי דחיסת התמונות. ההזדמנויות האלה מפורטות בקטע 'קידוד תמונות ביעילות':
Imagemin
Imagemin הוא פתרון מצוין לדחיסת תמונות כי הוא תומך במגוון רחב של פורמטים של תמונות, וקל לשלב אותו עם סקריפטים ל-build וכלי build. Imagemin זמין גם כ-CLI וגם כ-מודול npm. באופן כללי, מודול ה-npm הוא הבחירה הטובה ביותר כי הוא מציע יותר אפשרויות הגדרה, אבל ה-CLI יכול להיות אלטרנטיבה טובה אם אתם רוצים לנסות את Imagemin בלי לגעת בקוד.
יישומי פלאגין
Imagemin מבוסס על 'יישומי פלאגין'. פלאגין הוא חבילת npm שמדחסת פורמט תמונה מסוים (למשל, 'mozjpeg' מדחסת קובצי JPEG). לפורמטים פופולריים של תמונות יכולים להיות כמה יישומי פלאגין לבחירה.
הדבר החשוב ביותר שצריך להביא בחשבון כשבוחרים פלאגין הוא אם הוא 'אבדן נתונים' או 'ללא אובדן נתונים'. בלחץ ללא אובדן נתונים, הנתונים לא הולכים לאיבוד. דחיסת נתונים עם אובדן נתונים מצמצמת את גודל הקובץ, אבל עלולה לפגוע באיכות התמונה. אם בפלאגין לא מצוין אם הוא 'אבדן נתונים' או 'ללא אובדן נתונים', אפשר לבדוק זאת לפי ה-API שלו: אם אפשר לציין את איכות התמונה של הפלט, הוא 'אבדן נתונים'.
לרוב האנשים, יישומי פלאגין עם אובדן נתונים הם הבחירה הטובה ביותר. הם מאפשרים לחסוך הרבה יותר בגודל הקובץ, ואפשר להתאים אישית את רמות הדחיסה בהתאם לצרכים שלכם. בטבלה הבאה מפורטים יישומי פלאגין פופולריים של Imagemin. אלה לא הפלאגינים היחידים שזמינים, אבל כולם יהיו בחירה טובה לפרויקט שלכם.
| פורמט התמונה | יישומי פלאגין עם אובדן נתונים | יישומי פלאגין ללא אובדן נתונים |
|---|---|---|
| JPEG | imagemin-mozjpeg | imagemin-jpegtran |
| PNG | imagemin-pngquant | imagemin-optipng |
| GIF | imagemin-giflossy | imagemin-gifsicle |
| SVG | imagemin-svgo | |
| WebP | imagemin-webp | imagemin-webp |
Imagemin CLI
ממשק ה-CLI של Imagemin פועל עם 5 יישומי פלאגין שונים: imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant ו-imagemin-svgo. Imagemin משתמש בפלאגין המתאים על סמך פורמט התמונה של הקלט.
כדי לדחוס את התמונות בספרייה 'images/' ולשמור אותן באותה ספרייה, מריצים את הפקודה הבאה (היא מחליפה את הקבצים המקוריים):
$ imagemin images/* --out-dir=images
מודול Imagemin ב-npm
אם אתם רוצים להשתמש ב-Imagemin עם חבילה, כדאי לבדוק אם יש פלאגין זמין לחבילה שבחרתם. לדוגמה, webpack הוא חבילה פופולרית עם תמיכה רבה ב-Imagemin. בקודלאב הזה מוסבר איך משתמשים ב-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);
})();