الصور هي واحدة من اهم العوامل اللي بتأثر على سرعة الموقع جدًا؛ لأنها بتخلي الصفحة بتاعك بطيئة عشان كدا فيه نصائح معينة المفروض تتبعها عشان تقلل حجم الصورة قدر الامكان.
عشان تكون فاهم، النصائح دي مش كل الطرق ولكن هي أحد الطرق المقترحة وممكن تلاقي افضل منها كمان،
مبدئيًا فيه كذا عامل بيحدد مساحة الصورة بشكل عام سواء في الويب او غيره وهم:
- أبعاد الصورة
- جودة الصورة
- صيغة العرض
- عدد الألوان في الصورة
احنا بقى هنستخدم كذا طريقة عشان نلعب على العوامل اللي فوق دي بحيث نصغر مساحة الصورة وفي نفس الوقت منقللش جودتها بالشكل الملحوظ.
طرق تحسين الصور لزيادة سرعة الموقع
هنذكر في المقال دا 3 طرق سهلين جدا لتحسين الصور وزيادة سرعة الموقع ولازم تقراهم كلهم لاني في كل نقطة هقول معلومات مش في النقطة التانية:
- تعديل الصورة بالفوتوشوب
- تعديل الصور باستخدام موقع اونلاين
- استخدام بلجنز
-
اقرأ أيضًا: تسريع موقع ووردبريس باستخدام WP Rocket: ما هي الميزات التي تقدمها لك هذه الإضافة؟
أولًا: تعديل الصورة بالفوتوشوب:
- لما تصمم الصورة بتاعتك او حتى تنزلها من جوجل روح حطها على الفوتوشوب واعملها save مخصص للweb مش save as عادي، وعشان تعمل كدا هتدوس على اختصار Ctrl+Alt+Shift+S في الكيبورد او هتروح على File بعدين Save for web ..
- هتلاقي قائمة كبيرة اتفتحتلك هتختار صيغة الصورة jpg/jpeg لان دي من اكتر الصيغ اللي مش بتاخد مساحة طيب لو انا عندي ايقونة مثلا او صورة شفافة اعمل ايه؟؟ هتعملها خلفية بنفس الخلفة اللي موجودة في الموقع بحيث تتجنب صيغة الPNG تماما لانها بتاخد مساحة كبيرة جدا.
- وبعدين هتختار أبعاد الصورة بالظبط على مقاس الdiv او الbox اللي هتستخدم الصورة فيه عشان متعملش بكسلات اكتر من اللي موجودة
- وبعدين هتلعب في الquality وتبدأ تقلل تدريجيا لحد ما تلاقي الجودة اتأثرت بشكل ملحوظ ساعتها هتوقف وترجعها لاخر جودة كانت الصورة مش مشوهه عندها وتدوس Save وبس كدا ❤️
ثانيًا: تعديل الصور باستخدام موقع اونلاين:
- هتاخد الصورة بتاعتك وتروح على اى موقع تغيير ابعاد وصيغ الصور وتخلي الابعاد نفس ابعاد ال div وتخلي الصيغة jpeg/jpg .
- بعدها هتروح موقع اسمهcompressor.io وترفع فيه الصورة وتنزلها عندك وبس كدا دي اسهل واجمل طريقة وانا شخصيا بستخدمها، والجدير بالذكر انها بتقلل المساحة لحد 50% وساعات اكتر كمان وفيها tool بتخليك تعمل compare ما بين الصورة القديمة والجديدة، وفعلا مبيكنش فيه اى فرق خالص ملحوظ لدرجة انك ممكن تتلخبط اساسا.
اقرأ أيضًا: كيفية تحسين سرعة موقع ووردبريس الخاص بك؟
ثالثًا: استخدام بلجنز:
- فيه بقى الطريقة الاخيرة عن طريق الplugins ودي ميزتها انها بتعمل كل حاجة لوحدها منغير ما توجع دماغك بكل دا.
- مجرد ما تنزل البلجن تعمل optimize او resize وشكرا وكل ما صور جديدة تنزل هتروح تعملها optimize بضغطة زر واحدة وخلاص..
- دي اشهر البلجنز اللي بتعمل الموضوع دا:
Optimus.
EWWW Image Optimizer.
ShortPixel Image Optimizer.
Compress JPEG and PNG Images.
Imsanity.
Imagify.
اتمنى يكون المقال مفيد للجميع لو حابب تتابع مقالات تاني شرفنا في الجروب بتاعنا واعمل لايك للصفحة
