مقدمة عن تنسيق WebP

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

يمكن لتطبيقات Android وiOS دعم صيغة WebP بسهولة كبيرة بمجرد إضافة مكتبة فك الترميز التي توفرها Google. لكن دعم WebP على الويب ليس واسع الانتشار بعد، وفقًا لـ بيانات Can I Use، لا تدعم WebP حاليًا سوى متصفحات Chrome وOpera، وWebView في Android. ولكن مع كل هذه المزايا لصور WebP، هل يمكننا استخدامها في صفحات الويب؟ نعم. ستناقش هذه المقالة هذا الموضوع.

تحويل الصور الموجودة إلى صيغة WebP

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

بعد إضافة هذا الإعداد، يمكننا استخدام نسخ الموارد بصيغة WebP بإلحاق اللاحقة المناسبة بعنوان URL للصورة.

يمكنك أيضًا استخدام إضافات webpack وgulp لتحويل صيغ الصور دفعةً واحدة. لن نتوسع في ذلك هنا.

استخدام تنسيق WebP في المتصفح

بما أن بعض المتصفحات لا تدعم تنسيق WebP، فلدينا نهجان: استخدام تنسيق WebP في المتصفحات التي تدعمه فقط؛ أو تمكين المتصفحات التي لا تدعم WebP من دعمه.

الطريقة الأولى： <picture>وسم

<picture>هو وسم جديد في HTML5، يشبه <video>يمكنه أيضًا تحديد موارد بصيغ متعددة، ليختار المتصفح الصيغة التي يدعمها ويحمّلها.

<picture class="picture">
  <source type="image/webp" srcset="image.webp">
  <img class="image" src="image.jpg">
</picture>

إذا كان المتصفح يدعم تنسيق WebP، فسيحمّل image.webp، وإلا فسيُحمَّل image.jpg。

حتى إن كان المتصفح لا يدعم<picture>الوسم، وستظل الصورة تظهر بصورة طبيعية، لكن CSS قد يعجز عن تحديد picture العنصر. على سبيل المثال، لن تعمل تعليمات CSS التالية في IE8：

.picture img {  width: 100px;  height: 100px;
}

لكن يمكن كتابة أنماط الصورة بهذه الطريقة：

.image {  width: 100px;  height: 100px;
}

حتى إذا كان المتصفح يستخدم صورًا بتنسيق WebP، فسيُطبَّق في النهاية img نمط العنصر.

لكن ما دام قد استُخدم html5shiv، مما يجعل المتصفحات القديمة تدعم هذا الوسم، فتعمل محددات CSS بصورة طبيعية.

هذه أبسط طريقة، لكنها لا تعمل مع الصور الموجودة في CSS (مثل الخلفيات).

الطريقة الثانية：استخدام JS لاستبدال عنوان URL للصورة.

كثيرًا ما نستخدم «التحميل الكسول» للصور في صفحات عديدة — وعادةً ما نضع عنوان URL للصورة في img في سمة مخصصة للعنصر، ثم استخدام JS لإسناد URL في الوقت المناسب إلى src الخاصية. وبمبدأ مشابه، يمكننا، بحسب دعم المتصفح لتنسيق WebP، أن نعطي img إسناد خصائص مختلفة إلى العناصر src القيمة.

نحتاج أولًا إلى استخدام JS للتحقق مما إذا كان المتصفح يدعم صيغة WebP، وذلك بتقديم صورة بصيغة WebP إلى المتصفح واختبار قدرته على عرضها بصورة صحيحة. وهذه الطريقة غير متزامنة، لذا يجب كتابة العمليات اللاحقة داخل دالة رد النداء. ويمكننا تخزين النتيجة في localStorage فيه، وبذلك لن تكون هناك حاجة إلى التحقق مرة أخرى لاحقًا.

function checkWebp(callback) {  var img = new Image();
  img.onload = function () {    var result = (img.width > 0) && (img.height > 0);
    callback(result);
  };
  img.onerror = function () {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}

ثم استخدم الشيفرة التالية لاستبدال قيمة src المناسبة بحسب دعم WebP.

function showImage(useWebp){  var imgs = Array.from(document.querySelectorAll('img'));

  imgs.forEach(function(i){    var src = i.attributes['data-src'].value;    if (useWebp){
      src = src.replace(/\.jpg$/, '.webp');
    }

    i.src = src;
  });
}

checkWebp(showImage);

ميزة هذه الطريقة أنها قابلة للدمج مع دوال التحميل الكسول الموجودة. وباستخدام JS، يمكننا أيضًا معالجة الصور الموجودة في CSS（مثل صور الخلفية وغيرها）.

الطريقة الثالثة：استخدام JS لفك ترميز صور WebP

بما أن مفكك ترميز WebP مفتوح المصدر، فهل يمكن تنفيذه باستخدام JS؟ بالطبع يمكن،كتب أحدهم مفكّك ترميز WebP باستخدام JS。إدراج مكتبة JS هذه يعني فك ترميز جميع صور WebP باستخدام JS ثم تحويلها إلى base64، ثم استبدال عنوان URL الأصلي، وبذلك تستطيع المتصفحات التي لم تكن تدعم WebP عرض صور WebP بصورة طبيعية. استخدام هذه المكتبة بسيط جدًا، ويكفي الاطلاع على الشرح في صفحة الويب.

عيب هذه الطريقة هو أن JS، كي يفك ترميز صور WebP، يحتاج هنا إلى طلب غير متزامن لعنوان URL الموجود في src (لكن بما أن الصورة نفسها نُزّلت مرة من قبل، تُستخدم النسخة المخزنة مؤقتًا مباشرة)؛ كما أن فك الترميز باستخدام JS بطيء نسبيًا ويؤثر في الأداء، وقد يستغرق ظهور الصورة بعض الوقت.

هذه بعض طرائق استخدام صور WebP في المتصفح، ويمكن اختيار المناسب منها بحسب ظروفك الفعلية. وفي تجربتنا، انخفض حجم الصور عمومًا بأكثر من 1/3 بعد استخدام تنسيق WebP، مما سرّع التحميل ووفر استهلاك المستخدمين للبيانات، لذا نوصي بشدة بالبدء باستخدام هذا التنسيق من الآن.