أهمية ذلك بالنسبة إليك
تكون صور 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)، بينما يعد CLI اختيارًا جيدًا لمشروعات بسيطة أو إذا كنت ستحتاج إلى تحويل الصور مرة واحدة فقط.
عند تحويل الصور إلى تنسيق 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، نخر
إذا كنت لا تستخدم إحدى أدوات التصميم هذه، يمكنك استخدام Imagemin بمفرده
نص برمجي للعقدة. سيُحوِّل هذا النص البرمجي الملفات في دليل 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=""> وتحميل تلك الصورة.
قراءة عنوان Accept HTTP
إذا كان لديك واجهة خلفية للتطبيق أو خادم ويب يسمح لك بإعادة كتابة الطلبات، يمكنك قراءة قيمة رأس HTTP Accept، والتي ستعلن عن تنسيقات الصور البديلة المتوافقة:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
تساعد قراءة عنوان الطلب هذا وإعادة كتابة الرد وفقًا لمحتوياته في تبسيط ترميز الصورة. قد يطول ترميز <picture> إلى حد ما مع وجود العديد من المصادر. في ما يلي قاعدة Apache mod_rewrite التي يمكنها عرض بدائل 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.