מדוע וכיצד להשתמש בפורמט 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.

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

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

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

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

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

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

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

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

השאירו תגובה

 

פעימות
Up!
לבלוג