شرح استخدام الصور بصيغة WebP فى بلوجر لزيادة سرعة المدونة

0

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

شرح استخدام الصور بصيغة WebP فى بلوجر لزيادة سعة المدونة

 

تنسيق WebP يقلل حجم ملف الصورة من 19 الى 64% واكثر من الحجم الأصلي، وهذا يؤدي إلى جعل مواقع الويب يتم تحميلها بشكل أسرع وتستهلك موارد أقل،وبسبب هذا، فإن الكثير من المواقع الكبيرة تستخدم تنسيق WebP، حيث أن موقع التحميل السريع يساوي تجربة أفضل للمستخدم.

أولا : شرح استخدام الصور بصيغة WebP فى بلوجر لزيادة سرعة المدونة،واجراءات يجب القيام بها قبل استخدام الصور بصيغة WebP فى بلوجر

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

شرح استخدام الصور بصيغة WebP فى بلوجر لزيادة سعة المدونة

ثم

شرح استخدام الصور بصيغة WebP فى بلوجر لزيادة سعة المدونة

بهذه الخطوات انت قد قمت بحفظ الصوره بالمقاس المناسب ،والذى حددته أنت وتستطيع ان تعدل مقاسات الصوره فى الخطوه الثانيه كما بالصوره ،وكذلك حفظتها بأقصى ضغط عبر برنامج الفوتوشوب .
2- الخطوه التاليه وهى كيف أحول الصوره من امتداد الحفظ بجهازك وليكن png او jpg …. الخ ،الى الامتداد موضوع الشرح وهو WebP.
يفضل استخدام موقع squoosh.app وسبق أن شرحته هنا :-
كيفية ضغط الصور بواسطة Google Squoosh أداة جوجل المجانيه
من خلال هذا الموقع تقوم برفع الصوره اى كان امتدادها ،وتحفظها بتنسيق WebP بعد الانتهاء من تنسيقها وستشاهد الفرق فى الحجم للصوره.

شرح استخدام الصور بصيغة WebP فى بلوجر لزيادة سعة المدونة

 

ثانيا: كيفية استخدام الصور بصيغة WebP فى بلوجر

يجب بداية ان يكون قالب مدونتك متجاوب لكافة الاجهزه المكتبيه أو الجوالات، ولإستخدام الصور بأقصى حجم ومقاس ولكى تتأكد من ذلك عليك بالبحث عن الكود التالى بقالب مدونتك :

.post-body img{width:auto;max-width:100%;height:auto}

أو بصيغه أخرى

.post-body img{width:auto;height:auto;display:inline;max-width:100%}

وفى حالة وجود الكود أنتقل للمرحله الثانيه ،وفى حالة خلاف ذلك ضف اى من هذه الأكواد السابقه داخل ملفات Css بقالب مدونتك… شاهد الصوره التاليه.

شرح استخدام الصور بصيغة WebP فى بلوجر لزيادة سعة المدونة

ثم احفظ القالب.
الصور المرفوعه على المدونه بأى صيغه ولتكن صيغة webp يكون الرابط لها على الشكل التالى :-

https://1.bp.blogspot.com/-VFjmqINwfps/XSJVp_SezII/AAAAAAAADwo/c2iSNPBUmMstDfFMGiC7l6PxCvbhaJPvwCLcBGAs/s1600/Squoosh.webp

وفى حالة استخدامه بالمدونه على صيغة webp يتم تحويله الى الشكل التالى بإضافة -rw كما بالكود التالى :-

https://1.bp.blogspot.com/-VFjmqINwfps/XSJVp_SezII/AAAAAAAADwo/c2iSNPBUmMstDfFMGiC7l6PxCvbhaJPvwCLcBGAs/s1600-rw/Squoosh.webp

ولكى نضع الصوره بذات الامتداد بالمشاركه فيتم عبر الخطوات التاليه :-
قم بتحديد مكان الصوره وانتقل لوضع HTML بالمقاله بالمدونه ،ثم ضع الكود التالى مكان نقطة تحديد الصوره بالمقاله ،وقم بتغيير الروابط الموجوده بالكود الى رابط الصوره التى رفعتها بمدونتك ،مع استبدال مافى رابط الصوره بتعديله باالأكواد باللون الأصفر .
– Alt Text! ضع مكانها وصف للصوره وليكن عنوان المقاله .
– المقاسات الموجوده بالكود ضعها او استبدلها بمقاسات الصوره بالحجم الأصلى.

<picture>
  <source  data-srcset="https://1.bp.blogspot.com/-VFjmqINwfps/XSJVp_SezII/AAAAAAAADwo/c2iSNPBUmMstDfFMGiC7l6PxCvbhaJPvwCLcBGAs/s1600-rw/Squoosh.webp" type="image/webp"/>
  <img src="https://1.bp.blogspot.com/-VFjmqINwfps/XSJVp_SezII/AAAAAAAADwo/c2iSNPBUmMstDfFMGiC7l6PxCvbhaJPvwCLcBGAs/s1600/Squoosh.webp" alt="Alt Text!" width="1000" height="600"/>
</picture>

ثم هكذا استكمل مقالك وكلما احتجت وضع صوره ارفعها على المدونه وهى بصيغة webp واستخرج رابطها بعد تحويلها للحجم الأصلى ثم استخدم الكود وغير مايلزم وهكذا.

هل استطيع تحويل الصور من صيغة webp الى صيغ أخرى؟

نعم يمكنك ذلك وبكل سهوله عبر متصفح جوجل كروم عبر اضافه رائعه وهى Save image as Type ،تستطيع تحميلها واستخدامها فى حفظ الصوره بأى صيغه تريد .
ايضا من خلال المواقع التى تعمل اون لاين وتقدم خدمة تحويل الصور وحفظها بأى صيغه تريد.
اتمنى ان اكون وفقت فى الشرح وسأحاول اضافة كل ماهو جديد حول هذا الموضوع.
مودتى لك

قد يعجبك ايضا

اترك تعليق

يرجي التسجيل لترك تعليقك

شكرا للتعليق

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More