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

بالتأكيد أنت تستخدم الصور بحجمها الكامل وأيضًا لم تقم بضغطها مع استخدام صيغة مناسبة لكي لا تفقد جودتها، وتستطيع فعل ذلك من خلال الفوتشوب من خلال تصغير حجم الصور لتكون ضعف الحجم الذي تريد عرضها به، مثلاً لو تريد 500 بكسل ستكون الصورة 1000 بكسل لكي تظهر بجودة جيدة على الهواتف التي بها تقنية الـ double pixel.

ثم حفظها بصيغة webp أو avif.

وإذا لم ترد استخدام الفوتشوب تستطيع استخدام موقع Squoosh من خلال المتصفح، لتنفيذ ما سبق.

مرحبا احمد
دعني اشرح لك سبب المشكلة عند استخدام  صور بحجم كبير فانه الموقع يقوم بتحميل الصور مع ملفات html يعني مع الكود وبذاللك يكون تحميل الموقع بطئ ولا يعرض اللي عند الانتهاء من تحميل كل المصادر 
ولكي تتجنب هذه المشكلة من الممكن استخدام loading="lazy" مع tag img  وهذه بدورها  سوف تحمل الصورة بعد عرض الموقع يعني بمعني بعد تحميل ملفات ال html وبعد ذاللك تحميل الصور
تستطيع استخدامها بهذه الطريقة
 

<img src="largeImage.jpg" alt="Large Image" width="800" height="600" loading="lazy">

هناك عدة طرق لزيادة سرعة الموقع وهي كالتالي 

• يجب عليك تصغير حجم الصور دون التأثير على جودتها باستخدام برامج تحرير الصور مثل Photoshop. وحفظ الصور في صيغة WebP الأحدث والأكثر كفاءة..
• إذا كان هناك عدد كبير حاول تحميل الصور بشكل متأخر (lazy load).
• حاول أيضاً ضغط الصور باستخدام أدوات ضغط متخصصة مثل TinyPNG أو ImageOptim.
• استخدام خادم صور CDN مثل Cloudinary لتسريع تحميل الصور.
• تحميل أقل عدد ممكن من الصور عند الضرورة فقط.

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