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

ثم

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

2-شرح استخدام الصور بصيغة webp فى بلوجر

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

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

أو بصيغه أخرى

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

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

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

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

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

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

ولكى نضع الصوره بذات الامتداد بالمشاركه فيتم عبر الخطوات التاليه :-

1-قم بتحديد مكان الصوره وانتقل لوضع HTML بالمقاله بالمدونه .

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

مايهمنا فى النهاية هو الوصول لأصغر حجم للصورة مرفوع على مدونتك بأعلى جوده ممكنه.

<picture>
  <source 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 واستخرج رابطها بعد تحويلها للحجم الأصلى ثم استخدم الكود وغير مايلزم وهكذا.

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

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

مودتى لك