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

Katie Hempenius

لمتابعة هذا الدرس التطبيقي حول الترميز، افتح هذا الخطأ في علامة تبويب ثانية في علامة تبويب ثانية.

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

تحويل الصور إلى WebP

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

cwebp -q 50 images/flower1.jpg -o images/flower1.webp

يحوِّل هذا الأمر، بجودة 50 (0 هو الأسوأ، و100 هو الأفضل)، ملف images/flower1.jpg ويحفظه باسم images/flower1.webp.

ملاحظة: هل تتساءل عن سبب كتابة cwebp بدلاً من webp؟ يتضمّن WebP أمرَين منفصلَين لترميز صور WebP وفك ترميزها. يعمل cwebp على ترميز الصور إلى WebP، بينما يعمل dwebp على فك ترميز الصور من 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.

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

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