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

Katie Hempenius
Katie Hempenius
X

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

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

  1. انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.
  2. انقر على 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

بعد ذلك، يجب تعديل هذا الخيار لعرض صور 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

من خلال تدقيق الأداء في ميزة عرض الصور بتنسيقات الجيل التالي، يمكنك معرفة ما إذا كانت جميع الصور على موقعك الإلكتروني تستخدم تنسيقات الجيل التالي، مثل WebP.

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

اجتياز عملية تدقيق &quot;عرض الصور بتنسيقات الجيل التالي&quot; في Lighthouse

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