يمكن أن يؤدي ضغط الصور لموقعك على الويب أو داخل تطبيقك إلى تحسين الأداء بشكل جذري. يقوم Sharp برفع الأحمال الثقيلة.

يمكن أن تؤدي الصور الكبيرة غير الضرورية إلى أوقات استجابة أبطأ، وتستهلك نطاقًا تردديًا زائدًا، وتوفر تجربة بطيئة للمستخدمين، خاصة أولئك الذين يستخدمون اتصالات أبطأ. يمكن أن يؤدي هذا إلى ارتفاع معدلات الارتداد أو تحويلات أقل.

يمكن أن يؤدي ضغط الصور قبل تحميلها إلى تخفيف هذه المشكلات وتوفير تجربة أفضل للمستخدم. تجعل وحدة Sharp هذه العملية سريعة وسهلة.

إعداد بيئة التطوير الخاصة بك

لتوضيح عملية ضغط الصور، ابدأ بما يلي: إعداد خدمة تحميل الصور باستخدام multir. يمكنك تسريع العملية عن طريق الاستنساخ مستودع جيثب هذا.

بعد استنساخ مستودع GitHub، قم بتشغيل هذا الأمر لتثبيت التبعيات لخدمة تحميل الصور:

npm install

بعد ذلك، قم بتثبيت Sharp عن طريق تشغيل هذا الأمر:

npm install sharp

ال حاد الوحدة هي مكتبة Node.js عالية الأداء لمعالجة الصور ومعالجتها. يمكنك استخدام Sharp لتغيير حجم الصور واقتصاصها وتدويرها وتنفيذ العديد من العمليات الأخرى على الصور بكفاءة. تتمتع Sharp أيضًا بدعم ممتاز لضغط الصور.

instagram viewer

تقنيات الضغط لتنسيقات الصور المختلفة

تنسيقات الصور المختلفة لديها تقنيات ضغط متميزة. وذلك لأن كل منها يلبي استخدامات ومتطلبات محددة، ويعطي الأولوية لعوامل مختلفة بما في ذلك الجودة وحجم الملف وميزات مثل الشفافية والرسوم المتحركة.

جبغ/جبيغ

JPEG هو معيار لضغط الصور تم تطويره بواسطة Joint Photography Experts Group لضغط الصور الفوتوغرافية والصور الواقعية ذات الدرجات اللونية المستمرة والتدرجات اللونية. يستخدم خوارزمية الضغط المفقودة، وإنشاء ملفات أصغر عن طريق التخلص من بعض بيانات الصورة.

لضغط صورة JPEG باستخدام Sharp، قم باستيراد وحدة Sharp وتمرير filePath أو المخزن المؤقت للصورة كوسيطة. التالي، اتصل ب .jpeg الطريقة على حاد مثال. ثم قم بتمرير كائن التكوين باستخدام ملف جودة الخاصية التي تأخذ رقما بين 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 باستخدام Sharp ضغط صورة JPEG باستخدام Sharp. ومع ذلك، هناك تغييران يتعين عليك إجراؤهما عندما تكون الصورة بتنسيق PNG.

  1. تقوم Sharp بمعالجة صور PNG باستخدام .بي إن جي الطريقة بدلا من .jpeg طريقة.
  2. ال .بي إن جي يستخدم الأسلوب مستوى الضغط، وهو رقم بين 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 باستخدام Sharp نفس العملية التي تتبعها JPG. والفرق الوحيد هو أنه عليك الاتصال بالرقم webp الطريقة بدلا من .jpeg الطريقة على مثيل Sharp.
  • شجار: يتبع ضغط الصور TIFF (تنسيق ملف صورة العلامة) باستخدام Sharp نفس العملية التي تتبعها JPG. والفرق الوحيد هو أنه عليك الاتصال بالرقم شجار الطريقة بدلا من .jpeg الطريقة على مثيل Sharp.
  • AVIF: يتبع ضغط الصور AVIF (تنسيق ملف الصورة AV1) باستخدام Sharp نفس العملية التي تتبعها JPG. والفرق الوحيد هو أنه عليك الاتصال بالرقم avif الطريقة بدلا من .jpeg الطريقة على مثيل Sharp. القيمة الافتراضية AVIF لـ جودة يكون 50.
  • هيف: يتبع ضغط الصور HEIF (تنسيق ملف الصورة عالي الكفاءة) باستخدام Sharp نفس العملية التي تتبعها JPG. والفرق الوحيد هو أنه عليك الاتصال بالرقم هيف الطريقة بدلا من .jpeg الطريقة على مثيل Sharp. القيمة الافتراضية AVIF لـ جودة يكون 50.

ضغط الصور ببرنامج Sharp

إذا قمت باستنساخ مستودع GitHub، فافتح ملف app.js ملف وإضافة الواردات التالية.

const sharp = require("sharp");
const { exec } = require("child_process");

com.exec هي وظيفة تقدمها Child_process الوحدة التي تسمح لك بتنفيذ أوامر shell أو العمليات الخارجية من تطبيق 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 وتقارن الأحجام قبل وبعد استخدام du يأمر.

ال du الأمر هو أداة مساعدة تعمل بنظام Unix وترمز إلى "استخدام القرص". يقوم بتقدير استخدام مساحة الملف وتحليل استخدام القرص في دليل أو مجموعة من الدلائل. عند تشغيل du الأمر مع -ح العلم، فإنه يعرض مساحة الملف التي يستخدمها كل دليل فرعي ومحتوياته في شكل يمكن قراءته بواسطة الإنسان.

ابدأ تشغيل خدمة التحميل الخاصة بك عن طريق تشغيل هذا الأمر:

node app.js

بعد ذلك، اختبر تطبيقك عن طريق إرسال صورة JPG إلى المسار المضيف المحلي:/upload-and-compressباستخدام تطبيق عميل Postman أو أي أداة اختبار API الأخرى.

يجب أن ترى ردًا مشابهًا لهذا الرد:

{
"message": "Image uploaded and compressed successfully",
"sizeBeforeCompression": "13M",
"sizeAfterCompression": "3.1M"
}

استخدامات أخرى لوحدة Sharp

بالإضافة إلى ضغط الصور، يمكن للوحدة الحادة أيضًا تغيير حجم الصور واقتصاصها وتدويرها وقلبها حسب المواصفات المطلوبة. كما أنه يدعم تعديلات مساحة اللون وعمليات قناة ألفا وتحويلات التنسيق.