أخر الاخبار

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

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


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

أولا : اجراءات يجب القيام بها قبل استخدام الصور بصيغة WebP فى بلوجر

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

ثم
بهذه الخطوات انت قد قمت بحفظ الصوره بالمقاس المناسب والذى حددته أنت وتستطيع ان تعدل مقاسات الصوره فى الخطوه الثانيه كما بالصوره ،وكذلك حفظتها بأقصى ضغط عبر برنامج الفوتوشوب .
2- الخطوه التاليه وهى كيف أحول الصوره من امتداد الحفظ بجهازك وليك png او jpg .... الخ الى الامتداد موضوع الشرح وهو WebP.
يفضل استخدام موقع squoosh.app وسبق أن شرحته هنا :-
كيفية ضغط الصور بواسطة Google Squoosh أداة جوجل المجانيه
من خلال هذا الموقع تقوم برفع الصوره اى كان امتدادها وتحفظها بتنسيق 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 يكون الرابط لها على الشكل التالى :-
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrv0BkIxekyyN5M_A07xSUA2pOnwabcBZQeey06a3-6UnZIgNPoZ_SdcgJYp8rgIUdoovuvNaDRTDVr0kYYbmSeYGulFE89pI4pIGIN7-lP3S5wg_nkY0A_T_dsYndJ7ROLPAwGfFes52a/s1600/Squoosh.webp
وفى حالة استخدامه بالمدونه على صيغة webp يتم تحويله الى الشكل التالى بإضافة -rw كما بالكود التالى :-
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrv0BkIxekyyN5M_A07xSUA2pOnwabcBZQeey06a3-6UnZIgNPoZ_SdcgJYp8rgIUdoovuvNaDRTDVr0kYYbmSeYGulFE89pI4pIGIN7-lP3S5wg_nkY0A_T_dsYndJ7ROLPAwGfFes52a/-rw/Squoosh.webp
ولكى نضع الصوره بذات الامتداد بالمشاركه فيتم عبر الخطوات التاليه :-
قم بتحديد مكان الصوره وانتقل لوضع HTML بالمقاله بالمدونه ثم ضع الكود التالى مكان نقطة تحديد الصوره بالمقاله ،وقم بتغيير الروابط الموجوده بالكود الى رابط الصوره التى رفعتها بمدونتك مع استبدال مافى رابط الصوره بتعديله باالأكواد باللون الأصفر .
Alt Text! ضع مكانها وصف للصوره وليكن عنوان المقاله .
- المقاسات الموجوده بالكود ضعها او استبدلها بمقاسات الصوره بالحجم الأصلى.
<picture>
<source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrv0BkIxekyyN5M_A07xSUA2pOnwabcBZQeey06a3-6UnZIgNPoZ_SdcgJYp8rgIUdoovuvNaDRTDVr0kYYbmSeYGulFE89pI4pIGIN7-lP3S5wg_nkY0A_T_dsYndJ7ROLPAwGfFes52a/s1600-rw/Squoosh.webp" type="image/webp"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrv0BkIxekyyN5M_A07xSUA2pOnwabcBZQeey06a3-6UnZIgNPoZ_SdcgJYp8rgIUdoovuvNaDRTDVr0kYYbmSeYGulFE89pI4pIGIN7-lP3S5wg_nkY0A_T_dsYndJ7ROLPAwGfFes52a/s1600/Squoosh.webp" alt="Alt Text!" width="1000" height="600"/>
</picture>

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

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

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

تعليقات



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -