ماهي WebP
هي صيغة للصور شبيهة بصيغ jpg - png لكن الصور بصيغة WebP تمتاز عن غيرها بالحجم الصغير للصور والمحافظة على الدقة الأساسية للصورة.
تم الاعلان لأول مرة عن صيغ WebP في 30 أيلول عام 2010 من قبل شركة غوغل، وقد أعلنت شركة غوغل انه عند تحويل اي صورة من png (مثلا) الى WebP سوف ينقص حجم الصورة حوالي 45% وسيتم المحافظة على دقة الصورة كما هي.
مثال
عند تحميل الشعار الخاص بكورتابز سوف تجد أنه بالصيغة png ويبلغ حجمه تقريبا 3.89KB وعند تحويله الي الصيغة webp ( قمت بستخدام موقع online-convert ) سوف يصبح حجمه تقريبا 2.81KB فتخيل معي لو أنك تعمل على موقع يضم عدد كبير من الصور وذات قياس وحجم كبير
هل صيغة webp تدعم جميع المتصفحات:
منذ أن تم الاعلان عن صيغ webp من قبل شركة غوغل وهي تسعى ليتم دعمه من قبل جميع المتصفحات وتقوم بتحديثها وتطويرها بشكل مستمر وحتى الآن هناك حوالي 70% من المتصفحات تدعم هذه الصيغة ( تعرف على المتصفحات التي تدعم هذه الصيغة بالضغط هنا ).
ولكن من المهم جدا تذكر أن صيغة webp ليست بديلا عن الصيغ الأخرى فهي صيغة تعمل فقط من خلال المتصفحات التي تدعمها، ولهذا عليك المحافظة على الصور بصيغ png - jpg إلى جانب الصور بصيغة WebP وغيرها وذلك من أجل المتصفحات الأخرى.
تحويل الصيغ المختلفة إلى صيغة WebP :
اذا كنت من مستخدمي برنامج الفوتوشوب فهذه الإضافة سوف تسهل الأمر عليك وهي webp Photoshop plugin
كما أن هناك العديد من المواقع على الإنترنت التي تقوم بتحويل مختلف انواع الصيغ. (شاركنا في التعليقات أهم المواقع التي تستخدمها في تحويل الصيغ)
والان وبعد أن تعرفنا على هذه الصيغة وكيف يمكننا الحصول عليها لندخل في الموضوع العملي وهو
كيف يمكن أن أستخدم WebP في ملف HTML
الأمر بسيط جدا 
يتم التعامل مع الصور بصيغة WebP كما يتم التعامل مع أي صورة من الصيغ الأخرى من خلال الكود التالي:
<img src="img/myAwesomeWebPImage.webp" alt="WebP rules." />
لكن هناك مشكلة 
فهذا الكود سوف يعمل فقط على المتصفحات التي تدعم الصيغة WebP أما المتصفحات التي لا تدعم هذه الصيغة فإن الصورة لن يتم تحميلها أبد.
ولكي نتجنب هذه المشكلة سوف نستخدم الكود التالي وذلك حتى يتم دعم صيغة WebP من قبل جميع المتصفحات والكود هو:
<picture>
<source srcset="img/awesomeWebPImage.webp" type="image/webp">
<source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>
هذا الكود سوف يعمل على جميع المتصفحات ليس فقط تلك المتصفحات التي تدعم العنصر والسبب في العنصر والذي سوف يظهر الصورة في المتصفحات التي لا تدعم WebP.
كما انه يوجد كود أخر لإظهار الصورة ويمتاز ببساطته وسهولته وهو:
<img src="img/awesomeWebPImage.webp" onerror="this.src = 'img/creakyOldJPEG.jpg';" alt="story-image">
كيف يمكن أن أستخدم WebP في ملف CSS
في حال أردنا إظهار صورة من خلال ملف css هنا تكمن بعض المشكلات البسيطة فنحن نعلم أنه لإظهار صورة من خلال ملف css نستخدم الخاصية التالية:
background-image: url("img/creakyOldJPEG.jpg");
ولاكن أولا يجب أن نتأكد فيما إذا كان المتصفح يدعم الصيغة WebP أم لا ويمكننا ذلك بتحميل مكتبة Modernizr وهي مكتبة توفر لك إكتشاف ميزات المتصفح وبعتبار أن WebP هي أحدى ميزات المتصفح فمن خلال هذه المكتبة سوف نعلم فيما إذا كان المتصفح يدعم WebP أم لا.
ملاحظة: بإمكانك تحميل مكتبة Modernizr كاملة أو تخصيص ما أنت بحاجة إليه بإمكانك تحميل المكتبة المخصص للتحقق من دعم المتصفح للصيغة WebP من خلال الضغط هنا
نقوم بربط مكتبة Modernizr مع ملف HTML الخاص بمشروعنا من خلال الكود التالي:
<script type="text/javascript" src="js/modernizr-custom.js"></script>
وبعد أن قمنا بربط مكتبة Modernizr مع ملف HTML سوف تلاحظ أنه تم إضافة كلاس (class) تلقائيا للوسم < html > كما هو واضح في الصور التالية:
حيث أن الكلاس webp يضاف بشكل تلقائي للمتصفحات التي تدعم الصيغة WebP في حين أن الكلاس no-webp هي للمتصفحات التي لا تدعم الصيغة WebP.
(( بإمكانك تجربة ذلك بفتح المشروع على أكثر من متصفح ))
وفي النهاية نقوم بوضع الصور بستخدام الكود التالي:
/* WebP من أجل المتصفات التي لا تدعم */
.no-webp .img-class {
background-image: url('/img/your_image.png');
}
/* WebP من أجل المتصفات التي تدعم */
.webp .img-class {
background-image: url('/img/your_image.webp');
}
