إنشاء صور WebP باستخدام سطر الأوامر

Katie Hempenius

سبق أن تم تثبيت أداة سطر الأوامر webp، لذا أنت جاهز للبدء. تحوِّل هذه الأداة الصور بتنسيقات JPG وPNG وTIFF إلى WebP.

تحويل الصور إلى تنسيق WebP

1. انقر على Remix to Edit (إنشاء ريمكس لتعديله) ليصبح المشروع قابلاً للتعديل.
2. انقر على Terminal (ملاحظة: إذا لم يظهر زر Terminal، قد تحتاج إلى استخدام خيار "ملء الشاشة").
3. اكتب الأمر التالي:

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

بعد ذلك، عدِّل Glitch هذا لعرض صور 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.

1. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة .
2. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.
3. انقر على علامة التبويب Lighthouse.
4. تأكّد من وضع علامة في مربّع الاختيار الأداء في قائمة الفئات.
5. انقر على زر إنشاء تقرير.
6. تأكَّد من اجتياز عملية تدقيق عرض الصور بتنسيقات الجيل القادم.

اكتمال عملية النقل بنجاح يتم الآن عرض صور WebP على موقعك الإلكتروني.