למה זה חשוב לך?
תמונות WebP הן קטנות יותר מתמונות JPEG ו-PNG – בדרך כלל הקטנה של 25-35% בגודל הקובץ. כך אפשר להקטין את גודל הדפים ולשפר את הביצועים.
- ב-YouTube גילינו שהמעבר לתמונות ממוזערות של WebP הוביל לטעינה מהירה יותר של דפים ב-10%.
- כש-Facebook עברה להשתמש ב-WebP, נהנתה מחיסכון של 25-35% בגודל הקבצים בקובצי JPEG וחיסכון של 80% בגודל הקבצים בקובצי PNG.
WebP הוא תחליף מצוין לתמונות בפורמט JPEG, PNG ו-GIF. בנוסף, WebP מציעה גם דחיסה ללא אובדן נתונים וגם דחיסה עם אובדן נתונים. בדחיסה ללא אובדן נתונים, הנתונים לא אובדים. דחיסת נתונים מאבדת את גודל הקובץ, אבל עלולה לגרום לפגיעה באיכות התמונה.
המרת תמונות ל-WebP
בדרך כלל אנשים משתמשים באחת מהגישות הבאות להמרת התמונות שלהם ל-WebP: כלי שורת הפקודה cwebp או הפלאגין Imagemin WebP (חבילת npm). בדרך כלל מומלץ להשתמש בפלאגין Imagemin WebP אם בפרויקט שלכם משתמשים בסקריפטים לפיתוח או בכלי 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 בנפרד כסקריפט של צומת. הסקריפט ימיר את הקבצים בספרייה 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> מספק wrapper עבור אפס תגי <source> או יותר ותג <img> אחד.
<source>
התג <source> מציין משאב מדיה.
הדפדפן משתמש במקור הרשום הראשון בפורמט שהוא תומך בו. אם הדפדפן לא תומך בפורמטים שמפורטים בתגי <source>, הדפדפן יחזור לטעינת התמונה שצוינה בתג <img>.
<img>
התג <img> גורם לקוד הזה לפעול בדפדפנים שלא תומכים בתג <picture>.
אם דפדפן לא תומך בתג <picture>, הוא יתעלם מהתגים שהוא לא תומך בו. לכן, הוא רק 'רואה' רק את התג <img src="flower.jpg" alt=""> וטוען את התמונה.
קריאת הכותרת Accept של HTTP
אם יש לך יישום עורפי או שרת אינטרנט שמאפשרים לך לשכתב בקשות, באפשרותך לקרוא את הערך של כותרת ה-Accept של HTTP, שיפרסם את הפורמטים החלופיים של תמונות נתמכים:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
בזכות קריאת כותרת הבקשה הזו ושכתוב התשובה על סמך התוכן שלה, אפשר לפשט את תגי העיצוב של התמונות. תגי עיצוב של <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]
אם בוחרים באפשרות הזו, צריך להגדיר את כותרת תגובת ה-HTTP Vary כדי להבטיח שבמטמון יבינו שהתמונה עשויה להופיע עם סוגי תוכן שונים:
<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 > אפשרויות > ביצועים) ומחפשים את התוצאות של הביקורת הצגת תמונות בפורמטים של הדור הבא. ב-Lighthouse יופיעו כל התמונות שלא מוצגות ב-WebP.