أهمية ذلك بالنسبة إليك
تكون صور WebP أصغر حجمًا من نظيراتها بتنسيقَي JPEG وPNG، ويقل حجمها عادةً بنسبة تتراوح بين 25% و35%. ويؤدي ذلك إلى تقليل أحجام الصفحات و تحسين الأداء.
- تبيّن لفريق YouTube أنّ التبديل إلى استخدام الصور المصغّرة بتنسيق WebP أدى إلى تحميل الصفحات بشكلٍ أسرع بنسبة 10%.
- Facebook اختبرت توفيرًا في حجم الملفات بنسبة تتراوح بين %25 و%35 لملفات JPEG و%80 من حجم الملفات بتنسيق PNG عند التبديل إلى استخدام WebP.
يُعدّ 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 للمتصفحات الأحدث وصورة احتياطية للمتصفحات الأقدم:
قبل:
html
<img src="flower.jpg" alt="">
بعد:
html
<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 لضمان أن تفهم ذاكرات التخزين المؤقت أنّه قد يتم عرض الصورة بأنواع محتوى مختلفة:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</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.