طريقة ضغط الصور وعرضها بتنسيقات الجيل القادم لزيادة سرعة موقعك

سرعة المواقع الإلكترونية تعتبر من أهم الأسباب لإظهارها في الصفحة الأولي من نتائج البحث ، و أصبح محرك البحث جوجل خاصة يعتمد علي سرعة المواقع في الجوال و الكمبيوتر لترتيبها و إظهارها في الصفحة الأولي.

إضافة إلي ذلك لا يمكن للزوار أو العملاء البقاء في موقعك لفترة طويلة إذا كان موقعك بطئ و هذا سيؤدي إلي خسارة أرباحك إذا كنت تعتمد علي الإعلانات أو بيع المنتجات للربح من موقعك الإلكتروني.


ضغط الصور إلى WebP في بلوجر وزيادة سرعة الموقع
حل مشكلة عرض الصور بتنسيقات الجيل القادم بلوجر

حل مشكلة إظهار الصور بتنسيقات الجيل القادم

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

و ستظهر لكم عرض الصور بتنسيقات الجيل القادم علي PageSpeed Insight كوسيلة أو فرصة أولي يمكن إستغلالها لتحسين سرعة موقعك أو مدونتك علي الجوال و الكمبيوتر.



حل مشكلة عرض الصور بتنسيقات الجيل القادم
حل مشكلة عرض الصور بتنسيقات الجيل القادم في PageSpeed Insight

 كما تلاحظون في الصورة توجد مجموعة من الصور في موقعي و التي يجب عرضها بتنسيقات الجيل القادم لزيادة سرعة الموقع، ولحل هذه المشكلة يجب ضغط الصور و تحويلها من صيغة PNG أو JPEG  إلى WebP.


طريقة ضغط الصور و تحويلها إلى صيغة WebP

من خلال إستخدام الصور بتنسقات الجيل القادم ستزداد سرعة موقعك و سينخفض معدل إستهلاك البيانات إضافة إلي أن الصور ستظهر بدقة و جودة عالية، سنعتمد علي موقع Squoosh لضغط الصور و تحويلها إلي تنسيقات الجيل القادم.

  1. تقوم بالتوجه إلي موقع Squoosh.
  2. تضغط علي علامة + أو Drop OR PASTE.
  3. تقوم برفع الصور التي تريد أن تقوم بضغطها و تغييرها إلي تنسيق الجيل القادم.
  4. تقوم  بإختيار صيغة الصورة WebP.
  5. تقوم بضغط الصورة لتقليل حجمها.
  6. يمكنك كذلك التحكم بجودة الصورة.
  7. بعد الإنتهاء تقوم بتحميل الصورة.


حل مشكلة الحجم المناسب للصور  و عرض الصور بتنسيقات الجيل القادم بلوجر

سأقدم لك بعض الخطوات المجرية عند إتباعها ستقوم بحل جميع مشاكل الصور في مدونة بلوجر:
1. إختر الحجم المناسب للصورة: قبل إضافة أي صورة إلى الموضوع، تأكد من أن الحجم يتوافق مع القالب، قم بالتواصل مع صاحب القالب وإسئله عن الحجم المناسب لصور المواضيع.
يمكنك كذلك إستخدام هذه الأحجام فهي مناسبة لجميع القوالب تقريبا:
  • 600 بكسل × 360 بكسل
  • 640 بكسل × 360 بكسل
  • 640 بكسل × 380 بكسل
  • 400 بكسل × 290 بكسل
  • 800 بكسل × 600 بكسل
  • 800 بكسل × 450 بكسل
الحجم الذي أنصح بإستخدامه دائمًا هو 640 بكسل × 360 بكسل.

2. قم بضغط الصور وتحويلها إلي صغية WebP
3. الأن يمكنك إضافة الصورة إلى الموضوع لكن هناك بعض المراحل عليك القيام بها وهي إضافة النص البديل و نص العنوان ثم كتابة شرح للصورة.
4. بعد ذلك عليك الضغط على الصورة وعرضها بالحجم الأصلي.
5. توجه إلى عرض HTML داخل الموضوع.
6. إبحث عن 16000 من خلال الضغط علي ctrl+f و قم بإضافة هذا الرمز بجانبها -rw

كما هو مبين في هذه الصورة


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


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

الروابط المستخدمة في الشرح:




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