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