דחיסת תמונות עבור האתר שלך או בתוך האפליקציה שלך יכולה לשפר באופן קיצוני את הביצועים. שארפ עושה את המשימות הכבדות.
תמונות גדולות שלא לצורך עלולות להוביל לזמני תגובה איטיים יותר, לצרוך רוחב פס מוגזם ולספק חוויה איטית למשתמשים, במיוחד לאלה בחיבורים איטיים יותר. זה יכול לגרום לשיעורי יציאה מדף הכניסה גבוהים יותר או פחות המרות.
דחיסת תמונות לפני העלאתן יכולה להקל על הבעיות הללו ולספק חווית משתמש טובה יותר. מודול Sharp הופך את התהליך הזה למהיר וקל.
הגדרת סביבת הפיתוח שלך
כדי להדגים את תהליך דחיסת התמונות, התחל ב הגדרת שירות העלאת תמונות באמצעות multer. אתה יכול להאיץ את התהליך על ידי שיבוט מאגר GitHub זה.
לאחר שיבוט מאגר GitHub, הפעל את הפקודה הזו כדי להתקין את התלות עבור שירות העלאת התמונות:
npm install
לאחר מכן, התקן את Sharp על ידי הפעלת הפקודה הזו:
npm install sharp
ה חַד מודול היא ספריית Node.js בעלת ביצועים גבוהים לעיבוד ומניפולציה של תמונות. אתה יכול להשתמש ב-Sharp כדי לשנות את הגודל, לחתוך, לסובב ולבצע פעולות שונות אחרות בתמונות ביעילות. ל-Sharp יש גם תמיכה מצוינת לדחיסת תמונות.
טכניקות דחיסה עבור פורמטים שונים של תמונה
פורמטים שונים של תמונה יש טכניקות דחיסה מובחנות. הסיבה לכך היא שכל אחד מהם עונה על שימושים ודרישות ספציפיות, והם מתעדפים גורמים שונים כולל איכות, גודל קובץ ותכונות כמו שקיפות ואנימציות.
JPG/JPEG
JPEG הוא תקן דחיסת תמונה שפותח על ידי Joint Photographic Experts Group כדי לדחוס תצלומים ותמונות ריאליסטיות עם גוונים מתמשכים והדרגתי צבע. זה משתמש אלגוריתם דחיסה אובדן, יצירת קבצים קטנים יותר על ידי השלכת נתוני תמונה מסוימים.
כדי לדחוס תמונת JPEG עם Sharp, ייבא את מודול Sharp והעביר את ה-filePath או מאגר של התמונה כארגומנט. לאחר מכן, התקשר ל- .jpeg שיטה על חַד למשל. לאחר מכן, העבר אובייקט תצורה עם a איכות מאפיין שלוקח מספר ביניהם 0 ו 100 בתור ערך. איפה 0 מחזיר את הדחיסה הקטנה ביותר עם האיכות הנמוכה ביותר ו 100 מחזיר את הדחיסה הגדולה ביותר עם האיכות הגבוהה ביותר.
אתה יכול להגדיר את הערך בהתאם לצרכים שלך. לתוצאות הדחיסה הטובות ביותר, שמור את הערך בין 50-80 כדי ליצור איזון בין גודל ואיכות.
סיים על ידי שמירת התמונה הדחוסה למערכת הקבצים באמצעות ה .לתייק שיטה. העבר את הנתיב של הקובץ שאליו אתה רוצה לכתוב כארגומנט.
לדוגמה:
await sharp(req.file.path)
.jpeg({ quality: 60 })
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
ערך ברירת המחדל עבור איכות הוא 80.
PNG
PNG (Portable Network Graphics) הוא פורמט קובץ תמונה הידוע בדחיסה ללא הפסדים שלו ובתמיכה ברקע שקוף.
דחיסת תמונת PNG עם Sharp דומה לדחיסת תמונת JPEG עם Sharp. עם זאת, ישנם שני שינויים שעליך לבצע כאשר התמונה בפורמט PNG.
- Sharp מעבד תמונות PNG באמצעות .png שיטה במקום ה .jpeg שיטה.
- ה .png שימוש בשיטה רמת דחיסה, שהוא מספר בין 0 ו 9 במקום איכות באובייקט התצורה שלו. 0 נותן את הדחיסה המהירה והגדולה ביותר האפשרית, בעוד 9 נותן את הדחיסה האיטית והקטנה ביותר האפשרית.
לדוגמה:
await sharp(req.file.path)
.png({
compressionLevel: 5,
})
.toFile(`./images/compressed-${req.file.filename}`)
.then(() => {
console.log(`Compressed ${req.file.filename} successfully`);
});
ערך ברירת המחדל עבור רמת דחיסה הוא 6.
פורמטים אחרים
Sharps תומך בדחיסה בפורמטים שונים אחרים של תמונה הכוללים:
- WebP: דחיסת תמונה של WebP עם Sharp פועלת באותו תהליך כמו JPG. ההבדל היחיד הוא שאתה צריך להתקשר ל- webp שיטה במקום ה .jpeg שיטה על מופע Sharp.
- רִיב: דחיסת תמונה TIFF (תג תמונה בפורמט קובץ) עם Sharp פועלת באותו תהליך כמו JPG. ההבדל היחיד הוא שאתה צריך להתקשר ל- רִיב שיטה במקום ה .jpeg שיטה על מופע Sharp.
- AVIF: דחיסת תמונה AVIF (פורמט קובץ תמונה AV1) עם Sharp פועלת באותו תהליך כמו JPG. ההבדל היחיד הוא שאתה צריך להתקשר ל- אביף שיטה במקום ה .jpeg שיטה על מופע Sharp. ערך ברירת המחדל של AVIF עבור איכות הוא 50.
- HEIF: HEIF (High Efficiency Image File Format) דחיסת תמונה עם Sharp פועלת באותו תהליך כמו JPG. ההבדל היחיד הוא שאתה צריך להתקשר ל- heif שיטה במקום ה .jpeg שיטה על מופע Sharp. ערך ברירת המחדל של AVIF עבור איכות הוא 50.
דחיסת תמונות עם Sharp
אם שיבטת את מאגר GitHub, פתח את שלך app.js קובץ והוסף את הייבוא הבא.
const sharp = require("sharp");
const { exec } = require("child_process");
exec היא פונקציה שמסופקת על ידי תהליך_ילד מודול המאפשר לך לבצע פקודות מעטפת או תהליכים חיצוניים מאפליקציית Node.js שלך.
אתה יכול להשתמש בפונקציה זו כדי להפעיל פקודה המשווה את גדלי הקבצים לפני ואחרי הדחיסה.
לאחר מכן, החלף את ה- POST '/singleמטפל עם בלוק הקוד למטה:
app.post("/upload-and-compress", upload.single("image"), async (req, res) => {
try {
if (!req.file) {
return res.status(404).send("Please upload a valid image");
}const compressedFileName = req.file.filename.split(".")[0];
const compressedImageFilePath = `./images/${compressedFileName}-compressed.png`;await sharp(req.file.path)
.jpeg({ quality: 50 })
.toFile(compressedImageFilePath)
.then(() => {
let sizeBeforeCompression, sizeAfterCompression;
const sizeBeforeCompressionCommand = `du -h ${req.file.path}`;
const sizeAfterCompressionCommand = `du -h ${compressedImageFilePath}`;exec(sizeBeforeCompressionCommand, (err, stdout, stderr) => {
sizeBeforeCompression = stdout.split("\\t")[0];exec(sizeAfterCompressionCommand, (err, stdout, stderr) => {
sizeAfterCompression = stdout.split("\\t")[0];
res.send({
message: "Image uploaded and compressed successfully",
sizeBeforeCompression,
sizeAfterCompression,
});
});
});
});
} catch (error) {
console.log(error);
}
});
בלוק הקוד שלמעלה מיישם את הטכניקה לדחיסת תמונות JPEG ומשווה את הגדלים לפני ואחרי השימוש ב- דו פקודה.
ה דו command הוא כלי עזר של יוניקס המייצג "שימוש בדיסק". הוא מעריך את השימוש בשטח הקבצים ומנתח את השימוש בדיסק בספריה או בסט של ספריות. כאשר אתה מפעיל את דו פקודה עם ה -ח flag, הוא מציג את שטח הקבצים שכל ספריית משנה משתמשת בו ואת תוכנו בצורה הניתנת לקריאה על ידי אדם.
הפעל את שירות ההעלאה שלך על ידי הפעלת הפקודה הזו:
node app.js
לאחר מכן, בדוק את האפליקציה שלך על ידי שליחת תמונת JPG למסלול מארח מקומי:
אתה אמור לראות תגובה דומה לזו:
{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}
שימושים אחרים במודול Sharp
בנוסף לדחיסת תמונות, המודול החד יכול גם לשנות את הגודל, לחתוך, לסובב ולהפוך תמונות למפרטים הרצויים. הוא תומך גם בהתאמות של מרחב צבע, פעולות ערוצי אלפא והמרות פורמטים.
