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

Katie Hempenius
Katie Hempenius

תמונות 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.