WebP כלי שורת הפקודה כבר הותקן עבורך, כך שאתה מוכן להתחיל. הכלי הזה ממיר תמונות JPG, PNG ו-TIFF ל-WebP.
המרת תמונות ל-WebP
- לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.
- לוחצים על Terminal (הערה: אם הלחצן Terminal לא מופיע, יכול להיות שתצטרכו להשתמש באפשרות 'מסך מלא').
- מקלידים את הפקודה הבאה:
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.
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא .
- מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
- לוחצים על הכרטיסייה Lighthouse.
- מוודאים שתיבת הסימון ביצועים מסומנת ברשימה קטגוריות.
- לוחצים על הלחצן יצירת דוח.
- מוודאים שהבדיקה בנושא הצגת תמונות בפורמטים של הדור הבא עברה.
הצלחת! תמונות WebP מוצגות עכשיו באתר שלך.