سبق وتم تثبيت أداة سطر الأوامر Webp من أجلك، لذا فأنت جاهز للبدء. تحوِّل هذه الأداة صور JPG وPNG وTIFF إلى WebP.
تحويل الصور إلى تنسيق WebP
- انقر على إنشاء ريمكس لتعديله ليصبح المشروع قابلاً للتعديل.
- انقر على المحطة الطرفية (ملاحظة: إذا لم يظهر زر المحطة الطرفية، فقد تحتاج إلى استخدام خيار ملء الشاشة).
- اكتب الأمر التالي:
cwebp -q 50 images/flower1.jpg -o images/flower1.webp
يؤدّي هذا الأمر إلى تحويل ملف images/flower1.jpg بجودة 50 (0 هي الأسوأ جودة، و100 هي الأفضل)، ويحفظه كملف images/flower1.webp.
بعد القيام بذلك، من المفترض أن ترى شيئًا مثل هذا في وحدة التحكم:
Saving file 'images/flower1.webp'
File: images/flower1.jpg
Dimension: 504 x 378
Output: 29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12 35.09 dB
(1.24 bpp)
block count: intra4: 750 (97.66%)
intra16: 18 (2.34%)
skipped: 0 (0.00%)
bytes used: header: 116 (0.4%)
mode-partition: 4014 (13.6%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 22%| 26%| 36%| 17%| 768
quantizer: | 52 | 42 | 33 | 24 |
filter level: | 16 | 9 | 6 | 26 |
لقد حوّلت الصورة إلى تنسيق WebP بنجاح.
مع ذلك، إنّ تنفيذ الأمر cwebp مع صورة واحدة في كل مرة مثل هذا يستغرق وقتًا طويلاً لتحويل العديد من الصور. إذا كنت بحاجة للقيام بذلك، فيمكنك استخدام برنامج نصي
بدلاً من ذلك.
- شغّل هذا النص البرمجي في وحدة التحكم (لا تنس الفواصل العليا المائلة):
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
يحوِّل هذا النص البرمجي، بجودة 50، جميع الملفات في دليل images/، ويحفظها كملف جديد (اسم الملف نفسه، ولكن باستخدام امتداد الملف .webp) في الدليل نفسه.
✔︎ تسجيل الوصول
من المفترض أن يكون لديك الآن 6 ملفات في دليل images/:
flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp
بعد ذلك، عليك تعديل هذا الخلل لعرض صور WebP على المتصفّحات المتوافقة.
إضافة صور WebP باستخدام العلامة <picture>
تسمح لك العلامة <picture> بعرض تنسيق WebP على متصفّحات أحدث مع الحفاظ على توافق المتصفِّحات القديمة في الوقت نفسه.
- في
index.html، استبدل<img src="images/flower1.jpg"/>بنص HTML التالي:
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>
- بعد ذلك، استبدِل علامات
<img>الخاصة بـflower2.jpgوflower3.pngبعلامات<picture>.
✔︎ تسجيل الوصول
بعد اكتمال عملية الإضافة، من المفترض أن تظهر علامات <picture> في index.html على النحو التالي:
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>
<picture>
<source type="image/webp" srcset="images/flower2.webp">
<source type="image/jpeg" srcset="images/flower2.jpg">
<img src="images/flower2.jpg">
</picture>
<picture>
<source type="image/webp" srcset="images/flower3.webp">
<source type="image/png" srcset="images/flower3.png">
<img src="images/flower3.png">
</picture>
بعد ذلك، استخدِم Lighthouse للتحقّق من تنفيذ صور WebP على موقعك الإلكتروني بشكل صحيح.
التحقّق من استخدام WebP باستخدام Lighthouse
إنّ عملية التدقيق في أداء عرض الصور بتنسيقات الجيل التالي من Lighthouse يمكن أن تتيح لك معرفة ما إذا كانت جميع الصور على موقعك الإلكتروني تستخدم تنسيقات الجيل التالي، مثل WebP.
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على
ملء الشاشة
. - اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
- انقر على علامة التبويب Lighthouse.
- تأكّد من وضع علامة في مربّع الاختيار الأداء في قائمة الفئات.
- انقر على زر إنشاء تقرير.
- تحقَّق من اجتياز عملية التدقيق في عرض الصور بتنسيقات الجيل التالي.
اكتمال عملية النقل بنجاح أنت تعرض الآن صور WebP على موقعك الإلكتروني.