למה כדאי לכם להקפיד על כך?
תמונות WebP קטנות יותר מתמונות JPEG ו-PNG מקבילות – בדרך כלל, גודל הקובץ שלהן קטן ב-25-35%. כך אפשר לצמצם את גודל הדפים ולשפר את הביצועים.
- ב-YouTube גילו שהמעבר לתמונות ממוזערות בפורמט WebP הביא לטעינות דפים מהירות יותר ב-10%.
- ב-Facebook חסכו 25%-35% בגודל הקובץ של קובצי JPEG ו-80% בגודל הקובץ של קובצי PNG אחרי שהם עברו להשתמש ב-WebP.
WebP הוא תחליף מצוין לתמונות בפורמטים JPEG, PNG ו-GIF. בנוסף, פורמט WebP מציע דחיסת נתונים מסוג lossless ו-lossy. בדחיסת נתונים ללא אובדן מידע, לא מתבצע אובדן נתונים. דחיסת נתונים עם אובדן נתונים מצמצמת את גודל הקובץ, אבל עלולה לגרום לירידה באיכות התמונה.
המרת תמונות ל-WebP
בדרך כלל, אנשים משתמשים באחת מהגישות הבאות כדי להמיר את התמונות שלהם ל-WebP: הכלי של שורת הפקודה cwebp או הפלאגין Imagemin WebP (חבילת npm). בדרך כלל, הפלאגין Imagemin WebP הוא הבחירה הטובה ביותר אם בפרויקט שלכם נעשה שימוש בסקריפטים ל-build או בכלים ל-build (למשל, Webpack או Gulp). לעומת זאת, ה-CLI הוא בחירה טובה לפרויקטים פשוטים או אם צריך להמיר תמונות רק פעם אחת.
כשממירים תמונות ל-WebP, יש אפשרות להגדיר מגוון רחב של הגדרות דחיסה – אבל לרוב האנשים, ההגדרה היחידה שחשובה היא הגדרת האיכות. אפשר לציין רמת איכות מ-0 (הגרוע ביותר) עד 100 (הטוב ביותר). כדאי לנסות כמה רמות כדי למצוא את האיזון הנכון בין איכות התמונה לגודל הקובץ בהתאם לצרכים שלכם.
שימוש ב-cwebp
ממירים קובץ יחיד באמצעות הגדרות ברירת המחדל של cwebp לדחיסת קובץ:
cwebp images/flower.jpg -o images/flower.webp
המרת קובץ יחיד, באיכות 50:
cwebp -q 50 images/flower.jpg -o images/flower.webp
המרת כל הקבצים בספרייה:
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
שימוש ב-Imagemin
אפשר להשתמש בפלאגין Imagemin WebP בפני עצמו או עם כלי ה-build האהוב עליכם (Webpack/Gulp/Grunt וכו'). בדרך כלל צריך להוסיף כ-10 שורות קוד לסקריפט build או לקובץ התצורה של כלי ה-build. ריכזנו כאן דוגמאות לאופן שבו עושים זאת ב-Webpack, ב-Gulp וב-Grunt.
אם אתם לא משתמשים באחד מכלי ה-build האלה, תוכלו להשתמש ב-Imagemin בעצמו כסקריפט של Node. הסקריפט הזה יהמיר את הקבצים בספרייה images וישמיר אותם בספרייה compressed_images.
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});
הצגת תמונות WebP
אם האתר שלכם תומך רק בדפדפנים תואמים ל-WebP, אתם יכולים להפסיק לקרוא. אחרת, תוכלו להציג תמונות בפורמט WebP בדפדפנים חדשים ותמונה חלופית בדפדפנים ישנים יותר:
לפני:
html
<img src="flower.jpg" alt="">
אחרי:
html
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>
התגים <picture>, <source> ו-<img>, כולל הסדר שבו הם מופיעים ביחס זה לזה, פועלים יחד כדי להשיג את התוצאה הסופית הזו.
<picture>
התג <picture> מספק עטיפה לאפס תגי <source> או יותר ולתג <img> אחד.
<source>
התג <source> מציין משאב מדיה.
הדפדפן משתמש במקור הראשון ברשימה שנמצא בפורמט שהוא תומך בו. אם הדפדפן לא תומך באף אחד מהפורמטים שמפורטים בתגי <source>, הוא יטען את התמונה שצוינה בתג <img>.
<img>
התג <img> מאפשר לקוד הזה לפעול בדפדפנים שלא תומכים בתג <picture>.
אם דפדפן לא תומך בתג <picture>, הוא יתעלם מהתגים שהוא לא תומך בהם. לכן, הוא 'רואה' רק את התג <img src="flower.jpg" alt=""> וטעון את התמונה הזו.
קריאת הכותרת Accept של HTTP
אם יש לכם קצה עורפי של אפליקציה או שרת אינטרנט שמאפשרים לשכתב בקשות, תוכלו לקרוא את הערך של כותרת ה-HTTP Accept, שבה יצוינו הפורמטים החלופיים של התמונות שנתמכים:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
קריאת הכותרת של הבקשה והכתיבה מחדש של התגובה על סמך התוכן שלה מאפשרת לכם לפשט את ה-markup של התמונה. כשיש הרבה מקורות, ה-markup של <picture> יכול להיות ארוך למדי. בהמשך מופיע כלל mod_rewrite של Apache שיכול להציג גרסאות חלופיות של WebP:
RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]
אם בוחרים באפשרות הזו, צריך להגדיר את כותרת התגובה Vary של HTTP כדי לוודא שמטמון יבין שיכול להיות שהתמונה תוצג עם סוגי תוכן שונים:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</IfModule>
</FilesMatch>
כלל הכתיבה מחדש שלמעלה יחפש גרסה של WebP לכל תמונה בפורמט JPEG או PNG שנדרשת. אם יימצא גרסה חלופית בפורמט WebP, היא תוצג עם הכותרת המתאימה Content-Type. כך תוכלו להשתמש בסימון תמונות דומה לזה שלמטה עם תמיכה אוטומטית ב-WebP:
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
אימות השימוש ב-WebP
אפשר להשתמש ב-Lighthouse כדי לוודא שכל התמונות באתר מוצגות באמצעות WebP. מריצים את ביקורת הביצועים של Lighthouse (Lighthouse > Options > Performance) ומחפשים את התוצאות של הביקורת Serve images in next-gen formats. ב-Lighthouse יופיעו תמונות שלא מוצגות בפורמט WebP.