מדוע וכיצד להשתמש בפורמט WebP לתמונות?

WebP הוא פורמט תמונות שפותח על ידי גוגל ב 2010 ונוצר בכדי להוות אלטרנטיבה לפורמטים כגון PNG ו JPG. הפורמט מציע גודל קובץ קטן בהרבה מאלו וכל זאת כאשר הוא שומר על איכות תמונה די זהה.

שימו לב לדוגמאות הבאות, JPEG משמאל ו WebP מימין, האם אתם רואים הבדל? (לחצו להגדלה):

WebP Image (172.82 KB)

JPG Image (251.03 KB)

מדוע להשתמש ב WebP?

WebP הוא פורמט יעיל בצורה בלתי רגילה מכיוון והוא מציע גם ביצועים וגם פיצ׳רים טובים יותר. שלא כפורמטים אחרים, WebP תומך גם ב loosy compression וגם ב loosless compression, כמו גם בשקיפות (transparency) ואנימציות. ראו טבלה המשווה בין הפורמטים:

WebPPNGJPGGIF
Lossy compression
Lossless compression
Transparency
Animation

ולמרות פיצ׳רים אלו, Webp מספקת משקל קבצים קטן יותר באופן קונסיסטנטי מהאלטרנטיבות. במחקר השוואתי בין הפורמטים השונים נמצא כי WebP loosy images הם בממוצע כ 30% קטנות יותר מ JPGs ו WebP loosless images בממוצע קטנות ב 25% מ PNG.

אם מעניין אתכם ציונים, השימוש ב WebP אף יסיר את ההודעה הבאה שפוגעת בציון שלכם בכלי בדיקת המהירות של גוגל (Google PageSpeed):

יש להציג תמונות בפורמטים עדכניים

כיצד להמיר תמונות לפורמט WebP

ישנם מספר כלים בהם אתם יכולים להשתמש בכדי להמיר JPGs & PNGs ופורמטים אחרים ל WebP:

1. כלים לוורדפרס

אם אתם בעלי אתר וורדפרס קיימים עבורכם מספר לא מועט של תוספים המאפשרים להמיר תמונות ל WebP. הנה דוגמה לכמה מהם:

  • WebP Express, תוסף עם מעל ל 60,00 התקנות, כם ציון  4.5 כוכבים ומתעדכן באופן קבוע.
  • התוסף Litespeed Cache בו אני משתמש בבלוג זה גם כן מאפשר להמיר תמונות ל WebP בצורה מאד נוחה מעבר להיותו תוסף קאש מעולה.
  • ShortPixel Image Optimizer – תוסף אופטימיזציה לתמונות המאפשר המרה ל WebP.

2. כלים אונליין

  • Squoosh – כלי אונליין המאפשר לכווץ ולהמיר תמונות.
  • Online-Convert – כלי המאפשר להמיר תמונות.

3. כלי Command Line

cwebp הוא הפופולרי מכלי ב command line להמרת תמונות לפורמט WebP. לאחר התקנתו תהיה עבורכם אף האופציה לקבוע את איכות ההמרה:

# cwebp -q [quality] [input_file] -o [output_file]

cwebp -q 75 image.png -o image.webp

4. Sketch

ב Sketch ניתן לייצא כל slice כתמונה בפורמט WebP:

המרת תמונה ל WebP ב Sketch

בשלב הנוכחי איני מכיר תוסף לפוטושופ שעושה את העבודה, אם אתם מכירים אשמח אם תשתפו.

כיצד להשתמש בפורמט WebP באתרים

נכון לזמן כתיבת הפוסט, WebP נתמך בכ 80% מהדפדפנים (גלובאלית):

ולמרות שתמיכה זו מספקת דיה בכדי להתחיל להשתמש ב WebP, לא יהיה זה נכון להשתמש בפורמט ללא עתודה מכיווון ודפדפנים שאינם תומכים יציגו את התמונה כ״שבורה״.

טכניקה אחת לספק עתודה היא באמצעות שימוש באלמנט <picture> של HTML5. אלמנט זה מאפשר לנו לספק מספר מקורות עבור תמונה יחידה.

<picture>
    <source type="image/webp" srcset="image.webp">
    <source type="image/jpeg" srcset="image.jpg">
    <img src="image.jpg" alt="My Image">
</picture>

בכדי לספק מקור אלטרנטיבי לתמונה אנו משתמשים באלמנט בתוך האלמנט <picture>. לאלמנט <source> מספר תכונות לשימוש בכדי להגדיר את התמונה ומתי להשתמש בה:

  • type – ה MIME Type של המקור.
  • srcset – הנתיב לקובץ התמונה. ניתן להשתמש במספר מרובה של תמונות בכדי לספק תמונות שונות עבור גדלים שונים של מסכים (רספונסיביות).
  • sizes – רשימה של גדלים עבור כל מקור קובץ.
  • media – זהו media query הקובע מתי התמונה תהיה בשימוש.

עוד מידע על תכונות אלו בפוסט הבא על תמונות רספונסיביות.

בנוסף למקורות השונים, עליכם להשתמש באלמנט <img> בכדי לספק עתודה עבור דפדפנים שאינם תומכים במספר מרובה של פורמטים כמו שאפשרי עם האלמנט <picture>.

 

 

The post is mostly translated and based on the following post.

רועי יוסף
רועי יוסף

מפתח תבניות יעודייות על בסיס עיצוב. אוהב טיפוגרפיה, צבעים ומה שבינהם ומכוון לספק אתרים רספונסיבים עם ביצועים גבוהים, בעלי קוד ולידי, סמנטי ונקי.

12תגובות...
  • אריאל 26 במרץ 2020, 12:24

    תודה שוב על הפוסטים המחכימים!

    • רועי יוסף 26 במרץ 2020, 12:25

      על לא דבר, שמח שאתה נהנה מהתוכן אריאל 🙂

  • רוב 12 ביולי 2020, 11:19

    הכלים להמרה ל webp הם חינמיים או דורשים הרשמה ואו תשלום?

  • עדי 26 ביולי 2020, 11:23

    היי, איך ניתן להוסיף אופציה שלפיה ניתן להשתמש בתמונה אחרת אם דפדפן לא תומך בwebx אם אני משתמש באלמנטור?

    • רועי יוסף 26 ביולי 2020, 16:03

      היי עדי, לצערי איני מכיר את אלמנטור מספיק בשביל לומר לך. אולי אחד הקוראים יידע לענות…

  • אלרון 25 בספטמבר 2020, 6:13

    פוסט נהדר! תודה רבה

  • אייל 26 בינואר 2021, 18:55

    היי, האם השימוש ב- webp תורם בצורה כלשהי ל SEO?

    • רועי יוסף 26 בינואר 2021, 19:01

      היי אייל,

      אין שום הכרזה רשמית שהשימוש ב webp ישפר את דירוג האתר בתוצאות החיפוש של גוגל. אך גוגל הם אלו שפיתחו את הטכנולוגיה והם ממליצים להגיש תמונות webp בכדי לאפשר זמן טעינה טוב יותר של האתר.

      אם תבדוק Page Speed Insights את ביצועי האתר שלך, תגלה כי גוגל ממליצים על הימוש ב webp. ומכיוון ו webp תורם לזמן טעינה מהיר יותר של העמוד, ומכיוון ואנו יודעים שלמהירות האתר ישנה השפעה על דירוג האתר – אז התשובה היא כן. השימוש בתמונות webp תורמות ל SEO.

  • emh 5 במאי 2021, 13:43

    מאוד נחמד החידוש, אבל התוכנות שלי במחשב
    לא מכירות את הפורמט הזה ולכן לא מציגות אותו.
    (אין לי עדכון עבורן)
    אז הפתרון שלא התייחסת אליו, הוא האפשרות להמיר אותן
    דרך אתר האינטרנט easygif לפורמט PNG ו-JPG.

    אני מתחיל יותר להיתקל בפורמט הזה וזה הפתרון הנוח עבורי.
    מאוד ממליץ.

  • ירון 5 באוקטובר 2021, 22:18

    ביצעתי את זה באתר:
    https://www.cleansofa.co.il/
    הציון עלה בכמעט 15 נקודות:)
    90 במובייל
    תודה רבה!!

השאירו תגובה

 

Up!
לבלוג