لون الويب

أحدث المواضيع

طريقة عرض الصور بتنسيق WebP في Blogger


عندما قمت بتحليل أحد مواقع الويب الخاصة بي في أداة Google page speed، رأيت فرصة لزيادة سرعة موقع الويب الخاص بي. وهي عن طريق "عرض الصور في تنسيقات الجيل التالي" أو "Serve Images In Next-gen Formats" لجعل سرعة المدونة الخاص بك سريعة، يجب أن تعرض الصور بتنسيق الجيل التالي. ربما يمكنك إستخدام تنسيق WebP للصور. سأخبرك في هذا الدرس طريقة عرض الصور بتنسيق WebP أو Next-gen في Blogger، وما هو تنسيق WebP للصور، وما هي مزايا إستخدام هذه الصور، وما إلى ذلك.

ما هي صورة WebP؟

WebP هو تنسيق صورة مقدم من Google. يحتوي على إمتداد الملف كـ WebP. تم إصداره لأول مرة في عام 2010، ولديه القدرة على إستخدام ضغط الصور من أجل إنشاء صور أصغر دون تقليل سرعة تحميل موقع الويب.

بحسب جوجل: بإستخدام تنسيق صورة Webp، يمكنك الحصول على صور يكون حجمها أصغر بنسبة 25٪ بالمقارنة مع تنسيق صورة png، وأصغر حجماً بنسبة 25٪ - 34٪ من صور jpeg.

مزايا إستخدام تنسيقات صور WebP

  • WebP هي تقنية تنسيق صور مستجدة مقدمة من Google.
  • إنها مصممة لإستخدام الضغط أفضل من JPG و PNG.
  • يمكنه تقليل حجم الملف مع الحد الأدنى من فقدان الجودة.
  • بإستخدام تنسيق صورة WebP، يمكنك إنشاء موقع ويب سريع التحميل، ويستهلك نطاق ترددي أقل.

طريقة عرض الصور بتنسيق WebP في مدونة بلوجر

خطوات القيام بذلك هي كما يلي:
  • حدد المنشور المفضل لديك وإنقر فوق تحرير.

  • إنتقل إلى جانب HTML من المنشور أو المشاركة. 
  • الآن إبحث عن كود الصورة، ويكون بالصورة التالية:

<div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="340" data-original-width="640" src="https://1.bp.blogspot.com/-pkC_3SkchGo/X2Sm4Aum4YI/AAAAAAAACjI/mzH4Gou7NxwgMLoj_XDWnyuyZFitgBOOQCLcBGAsYHQ/s1600/1.webp" /></div>

ملاحظة: رابط الصورة يجب أن يكون بالإمتداد WebP. وبإمكانكم تحويل أي صورة الى الإمتداد WebP. من خلال الموقع التالي: Squoosh

  • بعد الرمز "s1600" فقط إكتب "rw-" في كلا الرابطين للصورة. إنظر الآن الكود المحدث والتغييرات الموضحة باللون الأحمر.

<div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="340" data-original-width="640" src="https://1.bp.blogspot.com/-pkC_3SkchGo/X2Sm4Aum4YI/AAAAAAAACjI/mzH4Gou7NxwgMLoj_XDWnyuyZFitgBOOQCLcBGAsYHQ/s1600-rw/1.webp" /></div>

ملاحظة: في بعض الأحيان بدل الرمز "s1600" قد ترى رموزاً أخرى مثل، "s200" ، "s320" ، "s400" ، "s640" إلخ. ولكن لا تقلق بشأن هذا الأمر. عليك فقط كتابة "rw-" بعد أي رمز.

  • قم بتحديث المنشور وتحقق منه في أداة Google page speed.


وللمزيد من التفصيل يمكنكم متابعة الفيديو في الأسفل...



 أداة قياس سرعة تحميل الموقع من جوجل: Google page speed
يمكنكم تحويل الصور الى التنسيق WebP. من خلال الرابط التالي: Squoosh

ليست هناك تعليقات:

إرسال تعليق

Adbox

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *