أهمية ذلك بالنسبة إليك
تكون صور WebP أصغر من نُسخها بتنسيق JPEG وPNG، بحجم الملف عادةً بنسبة تتراوح بين 25 و35% في حجم الملف. يؤدي ذلك إلى تقليل أحجام الصفحات وتحسين الأداء.
- تبيّن لمنصة YouTube أنّ التبديل إلى الصور المصغّرة بتنسيق WebP يؤدي إلى تحميل الصفحات بسرعة أكبر بنسبة 10%.
- شهدت Facebook إمكانية توفير في حجم ملفات JPEG بنسبة تتراوح بين 25 و35% وانخفاضًا بنسبة% 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، وما إلى ذلك). يتضمن ذلك عادةً إضافة حوالي 10 أسطر من الرمز إلى نص برمجي لإنشاء أو ملف الإعداد لأداة التصميم. إليك أمثلة على كيفية إجراء ذلك لكل من Webpack وGulp وGrunt.
إذا كنت لا تستخدم إحدى أدوات الإنشاء هذه، يمكنك استخدام 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=""> ويحمِّل تلك الصورة.
قراءة عنوان HTTP Accept
إذا كان لديك واجهة خلفية للتطبيق أو خادم ويب يسمح لك بإعادة كتابة الطلبات، يمكنك قراءة قيمة رأس 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.