‎كيفية تقليل مساحة الصور في الموقع‎

Youssuf Abramo

‎كيفية تقليل مساحة الصور في الموقع‎

مقدمة

الصور هي واحدة من اهم العوامل اللي بتخلي الصفحة بتاعك بطيئة عشان كدا فيه نصائح معينة المفروض تتبعها عشان تقلل حجم الصورة قدر الامكان.

خذ في الاعتبار ان المقال دا مش هيتكلم عن تحسين الاداء بشكل عام. عشان تكون فاهم النصائح دي مش كل الطرق ولكن هي احد الطرق المقترحة وممكن تلاقي افضل منها كمان.

عوامل تحدد مساحة الصورة

مبدئيًا فيه كذا عامل بيحدد مساحة الصورة بشكل عام سواء في الويب او غيره وهما:

أبعاد الصورة
جودة الصورة
صيغة الصورة
عدد الالوان في الصورة

طري تقليل مساحة الصورة

احنا بقى هنستخدم كذا طريقة عشان نلعب على العوامل اللي فوق دي بحيث نصغر مساحة الصورة وفي نفس الوقت منقللش جودتها بالشكل الملحوظ

هنذكر في المقال دا 3 طرق سهلين جدا ولازم تقراهم كلهم لاني في كل نقطة هقول معلومات مش في النقطة التانية:

تعديل الصورة بالفوتوشوب
تعديل الصور باستخدام موقع اونلاين
استخدام بلجنز

1- الطريقة الأولى: تعديل الصورة بالفوتوشوب

اما تصمم الصورة بتاعتك او حتى تنزلها من جوجل روح حطها على الفوتوشوب واعملها save مخصص للweb مش save as عادي، وعشان تعمل كدا هتدوس على اختصار Ctrl+Alt+Shift+S في الكيبورد او هتروح على File بعدين Save for web ..

هتلاقي قائمة كبيرة اتفتحتلك هتختار صيغة الصورة jpg/jpeg لان دي من اكتر الصيغ اللي مش بتاخد مساحة طيب لو انا عندي ايقونة مثلا او صورة شفافة اعمل ايه؟ هتعملها خلفية بنفس الخلفة اللي موجودة في الموقع بحيث تتجنب صيغة الPNG تماما لانها بتاخد مساحة كبيرة جدا

وبعدين هتختار أبعاد الصورة بالظبط على مقاس الdiv او الbox اللي هتستخدم الصورة فيه عشان متعملش بكسلات اكتر من اللي موجودة

وبعدين هتلعب في الquality وتبدأ تقلل تدريجيا لحد ما تلاقي الجودة اتأثرت بشكل ملحوظ ساعتها هتوقف وترجعها لاخر جودة كانت الصورة مش مشوهه عندها وتدوس Save وبس كدا

2- الطريقة الثانية: تعديل الصور باستخدام موقع اونلاين

هتاخد الصورة بتاعتك وتروح على اى موقع تغيير ابعاد وصيغ الصور وتخلي الابعاد نفس ابعاد الdiv وتخلي الصيغة jpeg/jpg وبعدها هتروح موقع اسمه www.compressor.io وترفع فيه الصورة وتنزلها عندك وبس كدا دي اسهل واجمل طريقة وانا شخصيا بستخدمها والجدير بالذكر انها بتقلل المساحة لحد 50% وساعات اكتر كمان وفيها tool بتخليك تعمل compare ما بين الصورة القديمة والجديدة وفعلا مبيكنش فيه اى فرق خالص ملحوظ لدرجة انك ممكن تتلخبط اساسا

3- الطريقة الثالثة: استخدام بلجنز

فيه بقى الطريقة الاخيرة عن طريق الplugins ودي ميزتها انها بتعمل كل حاجة لوحدها منغير ما توجع دماغك بكل دا، مجرد ما تنزل البلجن تعمل optimize او resize وشكرا وكل ما صور جديدة تنزل هتروح تعملها optimize بضغطة زر واحدة وخلاص..

ودي اشهر البلجنز اللي بتعمل الموضوع دا: