تعمل جوجل على تطوير صيغه جديده للصور بأسم WebP منذ عدة سنوات ،والهدف من ذلك هو تقليل أحجام ملفات الصور دون المساس بالجودة. ممايجعل أحجام الملفات مع الصور على الويب أصغر بكثير من JPEG أو PNG.
تنسيق WebP يقلل حجم ملف الصورة من 19 الى 64% واكثر من الحجم الأصلي. وهذا يؤدي إلى جعل مواقع الويب يتم تحميلها بشكل أسرع وتستهلك موارد أقل. وبسبب هذا، فإن الكثير من المواقع الكبيرة تستخدم تنسيق WebP، حيث أن موقع التحميل السريع يساوي تجربة أفضل للمستخدم.
1- اذا استخدمت برنامج الفوتوشوب فأحفظ الصوره بعد انتهاء العمل عليها بإتباع الخطوات التاليه :-
ثم
بهذه الخطوات انت قد قمت بحفظ الصوره بالمقاس المناسب والذى حددته أنت وتستطيع ان تعدل مقاسات الصوره فى الخطوه الثانيه كما بالصوره ،وكذلك حفظتها بأقصى ضغط عبر برنامج الفوتوشوب .
2- الخطوه التاليه وهى كيف أحول الصوره من امتداد الحفظ بجهازك وليك png او jpg .... الخ الى الامتداد موضوع الشرح وهو WebP.
يفضل استخدام موقع squoosh.app وسبق أن شرحته هنا :-
كيفية ضغط الصور بواسطة Google Squoosh أداة جوجل المجانيه
من خلال هذا الموقع تقوم برفع الصوره اى كان امتدادها وتحفظها بتنسيق WebP بعد الانتهاء من تنسيقها وستشاهد الفرق فى الحجم للصوره.
مدونتك... شاهد الصوره التاليه.
ثم احفظ القالب.
الصور المرفوعه على المدونه بأى صيغه ولتكن صيغة webp يكون الرابط لها على الشكل التالى :-
قم بتحديد مكان الصوره وانتقل لوضع HTML بالمقاله بالمدونه ثم ضع الكود التالى مكان نقطة تحديد الصوره بالمقاله ،وقم بتغيير الروابط الموجوده بالكود الى رابط الصوره التى رفعتها بمدونتك مع استبدال مافى رابط الصوره بتعديله باالأكواد باللون الأصفر .
- Alt Text! ضع مكانها وصف للصوره وليكن عنوان المقاله .
- المقاسات الموجوده بالكود ضعها او استبدلها بمقاسات الصوره بالحجم الأصلى.
ثم هكذا استكمل مقالك وكلما احتجت وضع صوره ارفعها على المدونه وهى بصيغة webp واستخرج رابطها بعد تحويلها للحجم الأصلى ثم استخدم الكود وغير مايلزم وهكذا.
ايضا من خلال المواقع التى تعمل اون لاين وتقدم خدمة تحويل الصور وحفظها بأى صيغه تريد.
اتمنى ان اكون وفقت فى الشرح وسأحاول اضافة كل ماهو جديد حول هذا الموضوع.
مودتى لك
تنسيق 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 تستطيع تحميلها واستخدامها فى حفظ الصوره بأى صيغه تريد .ايضا من خلال المواقع التى تعمل اون لاين وتقدم خدمة تحويل الصور وحفظها بأى صيغه تريد.
اتمنى ان اكون وفقت فى الشرح وسأحاول اضافة كل ماهو جديد حول هذا الموضوع.
مودتى لك
اترك لنا رأيك او تعليقك او فكره مميزه