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

קייטי המפניוס

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

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

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

1. לוחצים על רמיקס לעריכה כדי שיהיה אפשר לערוך את הפרויקט.
2. לוחצים על טרמינל (הערה: אם הלחצן 'מסוף' לא מוצג, ייתכן שתצטרכו להשתמש באפשרות 'מסך מלא').
3. מקלידים את הפקודה הבאה:

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

הפקודה הזאת ממירה את הקובץ images/flower1.jpg באיכות 50 (האיכות הכי גרועה היא 0; 100 היא הכי טובה), ושומרת אותו בתור 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 באתר שלך.