استخدام صور WebP

Katie Hempenius
Katie Hempenius
X

أهمية ذلك بالنسبة إليك

تكون صور WebP أصغر حجمًا من نظيراتها بتنسيقَي JPEG وPNG، ويقل حجمها عادةً بنسبة تتراوح بين 25% و35%. ويؤدي ذلك إلى تقليل أحجام الصفحات و تحسين الأداء.

يُعدّ WebP بديلاً ممتازًا للصور بتنسيقات JPEG وPNG وGIF. بالإضافة إلى ذلك، يقدّم WebP ضغطًا مع وبدون فقدان. في تقنية الضغط بدون فقدان البيانات، لا يتم فقدان أي بيانات. يعمل الضغط غير القابل للاسترداد على تقليل حجم الملف، ولكن على حساب احتمال تقليل جودة الصورة.

تحويل الصور إلى WebP

يستخدم المستخدمون بشكل عام إحدى الطريقتَين التاليتَين لتحويل صورهم إلى WebP: أداة سطر الأوامر cwebp أو مكوّن Imagemin WebP الإضافي (حزمة npm ). بشكل عام، يُعدّ المكوّن الإضافي Imagemin WebP هو الخيار الأفضل إذا كان مشروعك يستخدم ملفّات برمجية لإنشاء الصفحات أو أدوات إنشاء الصفحات (مثل Webpack أو Gulp)، في حين أنّ واجهة برمجة التطبيقات هي خيار جيد للمشاريع الصغيرة أو إذا كنت بحاجة إلى تحويل الصور مرة واحدة فقط.

عند تحويل الصور إلى تنسيق WebP، يمكنك ضبط مجموعة كبيرة من إعدادات الضغط، ولكن بالنسبة إلى معظم المستخدمين، فإنّ الإعداد الوحيد الذي يحتاجون إلى الاهتمام به هو إعداد الجودة. يمكنك تحديد مستوى الجودة من 0 (أسوأ) إلى 100 (أفضل). ننصحك بتجربة هذه الإعدادات للعثور على المستوى المناسب الذي يوازن بين جودة الصورة وحجم الملف لتلبية احتياجاتك.

استخدام cwebp

تحويل ملف واحد باستخدام إعدادات الضغط التلقائية في cwebp:

cwebp images/flower.jpg -o images/flower.webp

تحويل ملف واحد باستخدام مستوى جودة 50:

cwebp -q 50 images/flower.jpg -o images/flower.webp

تحويل جميع الملفات في دليل:

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

استخدام Imagemin

يمكن استخدام المكوّن الإضافي Imagemin WebP بمفرده أو مع أداة الإنشاء المفضّلة لديك (Webpack/Gulp/Grunt/etc.). يتطلّب ذلك عادةً إضافة 10 أسطر من التعليمات البرمجية تقريبًا إلى نص برمجي للإنشاء أو ملف الإعدادات الخاص بأداة الإنشاء. في ما يلي أمثلة على كيفية إجراء ذلك باستخدام Webpack و Gulp و Grunt.

إذا كنت لا تستخدم إحدى أدوات الإنشاء هذه، يمكنك استخدام Imagemin بمفرده كأحد النصوص البرمجية لـ Node. سيحوِّل هذا النص البرمجي الملفات في الدليل images ويحفظها في الدليل compressed_images.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*'], {
  destination: 'compressed_images',
  plugins: [imageminWebp({quality: 50})]
}).then(() => {
  console.log('Done!');
});

عرض صور WebP

إذا كان موقعك الإلكتروني متوافقًا فقط مع المتصفّحات المتوافقة مع WebP، يمكنك التوقف عن القراءة. بخلاف ذلك، قدِّم WebP للمتصفحات الأحدث وصورة احتياطية للمتصفحات الأقدم:

قبل:

<img src="flower.jpg" alt="">

بعد:

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

تتفاعل علامات <picture> و <source> و <img> مع بعضها لتحقيق هذه النتيجة النهائية، بما في ذلك ترتيبها بالنسبة إلى بعضها.

<picture>

توفّر علامة <picture> عنصرًا ملفّفًا لصفر أو أكثر من علامات <source> وعلامة <img> واحدة.

<source>

تحدّد العلامة <source> مورد وسائط.

يستخدم المتصفّح المصدر الأول المدرَج بتنسيق متوافق. إذا كان المتصفّح لا يتيح أيًا من التنسيقات المدرَجة في علامات <source>، سيستخدم علامة <img> لتحميل الصورة المحدّدة.

<img>

تسمح علامة <img> بتشغيل هذا الرمز على المتصفّحات التي لا تتيح استخدام علامة <picture>. إذا كان المتصفّح لا يتيح استخدام علامة <picture>، سيتم تجاهل العلامات التي لا يتوافق معها. وبالتالي، لا "يرى" سوى علامة <img src="flower.jpg" alt=""> ويحمّل هذه الصورة.

قراءة عنوان HTTP Accept

إذا كان لديك خلفية تطبيق أو خادم ويب يتيح لك إعادة كتابة الطلبات، يمكنك قراءة قيمة رأس HTTP Accept، الذي سيعلن عن تنسيقات الصور البديلة المتوافقة:

Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8

إنّ قراءة عنوان الطلب هذا وإعادة كتابة الردّ استنادًا إلى محتواه تؤدي إلى تبسيط ترميز الصورة. يمكن أن تصبح علامة <picture> طويلة جدًا مع العديد من المصادر. في ما يلي قاعدة mod_rewrite في Apache يمكنها عرض بدائل WebP:

RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]

إذا اتّبعت هذا المسار، عليك ضبط عنوان استجابة HTTP‏ Vary لضمان أن تفهم ذاكرات التخزين المؤقت أنّه قد يتم عرض الصورة بشكل مختلف استنادًا إلى عنوان Accept:

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Accept"
  </IfModule>
</FilesMatch>

ستبحث قاعدة إعادة الكتابة السابقة عن إصدار WebP لأي صورة JPEG أو PNG مطلوبة. في حال العثور على بديل بتنسيق WebP، سيتم عرضه مع العنوان Content-Type المناسب. سيتيح لك ذلك استخدام ترميز الصور المشابه لما يلي مع إتاحة WebP تلقائيًا:

<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">

التحقّق من استخدام WebP

يمكن استخدام Lighthouse للتحقّق من أنّه يتم عرض كل الصور على موقعك الإلكتروني باستخدام WebP. يمكنك إجراء تدقيق الأداء في Lighthouse (Lighthouse > الخيارات > الأداء) والبحث عن نتائج تدقيق عرض الصور بتنسيقات الجيل التالي . سيُدرج Lighthouse أي صور لا يتم عرضها بتنسيق WebP.