יצירת תמונות WebP באמצעות שורת הפקודה

Katie Hempenius

כדי לעקוב אחר ה-Codelab הזה, פותחים את התקלה הזו בכרטיסייה שנייה.

כלי שורת הפקודה Webp כבר הותקן עבורכם, כך שאתם יכולים להתחיל. הכלי הזה ממיר תמונות JPG , PNG ו-TIFF ל-WebP.

המרת תמונות ל-WebP

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

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