שימוש בתמונות WebP

Katie Hempenius
Katie Hempenius
X

למה כדאי לכם להקפיד על כך?

תמונות 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 בדפדפנים חדשים ותמונה חלופית בדפדפנים ישנים יותר:

לפני:

<img src="flower.jpg" alt="">

אחרי:

<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 כדי לוודא שמטמון יבין שיכול להיות שהתמונה תוצג בצורה שונה בהתאם לכותרת Accept:

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Accept"
  </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.