יצירת תמונות 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.

לאחר מכן אתם אמורים לראות במסוף:

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`

הסקריפט הזה ממיר את כל הקבצים בספרייה images/ באיכות 50, ושומר אותם כקובץ חדש (עם אותו שם קובץ, אבל עם סיומת קובץ .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. מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
3. לוחצים על הכרטיסייה Lighthouse.
4. מוודאים שתיבת הסימון ביצועים מסומנת ברשימה קטגוריות.
5. לוחצים על הלחצן יצירת דוח.
6. מוודאים שהבדיקה בנושא הצגת תמונות בפורמטים של הדור הבא עברה.

הצלחת! תמונות WebP מוצגות עכשיו באתר שלך.