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

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

الحل
قررت أن أجد حلاً أفضل. من خلال محاكاة كيفية تعامل منصات الوسائط الاجتماعية مع تحميلات الصور، اعتقدت أنه من الجيد منح المستخدمين القدرة على اقتصاص الصور ومعاينتها قبل تحميلها. بعد قليل من البحث، وجدت أخيرًا حزمة React-image-crop. توفر هذه الحزمة للمستخدمين القدرة على اقتصاص صورهم في الوقت الفعلي، وبالتالي حل جزء من المشكلة.

أثناء اختبار وظيفة الاقتصاص، لاحظت أن حجم الصورة التي كنت أعمل عليها كان 9.5 ميغابايت. وهنا لفت انتباهي: لماذا لا يتم ضغط الصورة من جانب العميل قبل التحميل؟ على الرغم من أن الواجهة الخلفية تتعامل مع هذا أيضًا، فإن القدرة على تحسين الصورة في خطوة سابقة توفر عرض النطاق الترددي وتحسن أوقات التحميل.

قادني هذا إلى حزمة أخرى مفيدة: ضغط صور المتصفح. لقد سمح لي دمج هذا مع React-image-crop الآن باقتصاص الصور وضغطها بسرعة، وبتأثير رائع.

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

لقد قمت أيضًا بتصميمه باستخدام مكونات Shadcn UI وحزمة رد فعل Dropzone للسماح للمستخدمين بالنقر لتحديد صورهم أو سحبها وإفلاتها.

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

العرض التوضيحي وكود المصدر
يمكنك أيضًا تجربة العرض التوضيحي المباشر هنا

يوجد أيضًا مستودع الكود المصدري لـ GitHub. يرجى النجمة إذا وجدت أنها مفيدة! اسمحوا لي أن أعرف إذا كنت تفكر في استخدام هذا الحل في مشروعك.