المستوى: متوسط — الشرح يفترض معرفة أساسية بـ Node.js وسطر الأوامر، لكن مفاهيم الصور نفسها مشروحة من الصفر بمثال بسيط قبل الدخول في التفاصيل.
لو بترفع صور المستخدمين زي ما هي، إنت بتبعت 2.4 ميجابايت لكل زائر علشان يشوف الصورة على موبايل عرضه 400 بكسل. ده إهدار في الباندويدث وبطء في التحميل. في الدليل ده هتبني endpoint واحد بـ Node.js يستقبل أي صورة، يصغّرها ويطلّعها بصيغة WebP، فينزّل الحجم لحوالي 180 كيلوبايت — أقل بنسبة 92% تقريبًا — من غير ما تغيّر شكل تطبيقك.
خدمة تصغير وضغط الصور بـ Sharp في Node.js
المشكلة باختصار
الصور هي أثقل جزء في أغلب الصفحات. صورة كاميرا موبايل عادية بتطلع 1600 بكسل أو أكتر وحجمها 2 إلى 4 ميجا. المتصفح بينزّلها كلها حتى لو هيعرضها في مربع صغير. النتيجة: LCP (أكبر عنصر مرئي) بيتأخر، وفاتورة الـ CDN بتعلى. الحل مش إنك تمنع الرفع، الحل إنك تعالج الصورة مرة واحدة على السيرفر: تصغّر أبعادها للمقاس اللي محتاجه فعلاً، وتضغطها بصيغة أحدث.
الفكرة ببساطة ثم علميًا
تخيّل إنك عايز تبعت صورة مقاس لوحة إعلانات لحد هيعلّقها في إطار صغير على مكتبه. المنطقي إنك تقصّها للمقاس المناسب الأول، وبعدين تلفّها كويس علشان متتكرمشش. Sharp بيعمل بالظبط الحاجتين دول: بيغيّر أبعاد الصورة (resize)، وبيعيد ترميزها بصيغة مضغوطة (encode).
علميًا: Sharp مكتبة Node.js مبنية فوق libvips، وهي محرّك معالجة صور بيشتغل على أجزاء من الصورة بشكل متدفّق بدل ما يحمّلها كلها في الذاكرة، فبيستهلك رام أقل وبيكون أسرع من البدائل التقليدية في عمليات التصغير الشائعة. WebP صيغة من Google بتدي حجم أصغر من JPEG بنفس الجودة تقريبًا، لأنها بتستخدم ضغط أكفأ. الافتراض هنا إن مدخلاتك صور فوتوغرافية بيرفعها المستخدم وحجمها أقل من 8 ميجا.
نبنيها خطوة بخطوة
- جهّز المشروع. أنشئ مجلد جديد وابدأ مشروع Node فاضي:
mkdir image-optimizer && cd image-optimizer npm init -y - ثبّت الاعتماديات. Express للسيرفر، multer لاستقبال الملف، وsharp للمعالجة:
npm install express multer sharp - اكتب السيرفر. ملف
server.jsفيه endpoint واحد اسمه :
