תמונות WebP: מה זה, והאם הפורמט הזה באמת יאיץ את האתר שלכם?

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

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

אבל הרבה פעמים השאלה עמוקה יותר. לא רק באיזה פורמט נשמרה התמונה, אלא למה התמונה הזאת נטענת כך, בגודל הזה, במקום הזה, ובעמוד הזה.

WebP הוא פורמט תמונה שנבנה לשימוש באינטרנט. בהרבה אתרים הוא יכול להקטין משקל של תמונות ולעזור לעמודים להיטען מהר יותר. לפי התיעוד של Google, קבצי WebP ללא איבוד מידע קטנים בכ־26 אחוזים מ־PNG, וקבצי WebP בדחיסה מאבדת קטנים בכ־25 עד 34 אחוזים מקבצי JPEG דומים באיכות חזותית מקבילה. הנתונים האלה מסבירים למה הפורמט הפך לנפוץ, אבל הם לא מבטיחים שכל תמונה באתר שלכם תרזה באותה מידה או שכל עמוד יהפוך למהיר רק בגלל שינוי הפורמט.

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

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

האם מקור הכבדות הוא הפורמט, או הדרך שבה התמונה מוגשת

WebP מתאים להרבה תמונות באתר: תמונות תוכן, תמונות מוצר, תמונות רקע ותמונות שמלוות עמודי שירות, מאמרים ועמודי נחיתה. הוא יודע לשמור על איכות טובה במשקל נמוך יותר לעומת פורמטים ותיקים כמו JPEG ו־PNG, ולכן הוא בהחלט יכול להיות חלק חשוב מהפתרון.

אבל פורמט הוא רק שכבה אחת בטיפול בתמונות.

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

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

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

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

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

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

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

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

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

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

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

למה התוסף לא תמיד פותר את הציון האדום

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

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

בוורדפרס, WebP כבר לא נחשב פורמט חריג. WordPress הוסיפה תמיכה בהעלאה ושימוש בקבצי WebP בגרסה 5.8, כך שבאתרים מודרניים אפשר בדרך כלל לעבוד איתו בצורה רגילה, כל עוד סביבת האחסון והתוספים תומכים בכך. אבל התמיכה הזאת לא אומרת שכל קבצי JPEG ישנים באתר יומרו אוטומטית ל־WebP. לפי WordPress, ברירת המחדל היא לייצר גדלי משנה מאותו סוג קובץ שהועלה. כלומר, אם העליתם WebP, ייווצרו גם גדלים ב־WebP. תמונות ישנות דורשות בדרך כלל כלי או תהליך נוסף כדי לעבור המרה.

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

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

אם התוסף לא מצליח ליצור קבצי WebP, או אם הקבצים קיימים אבל הדפדפן עדיין מקבל JPEG, צריך לבדוק את התשתית. לפעמים הבעיה נמצאת בהגדרות השרת, בתוסף, ב־CDN, בקאש או בדרך שבה התבנית מושכת תמונות. זה לא אומר ש־WebP לא עובד. זה אומר שהאתר עדיין לא מגיש אותו כמו שצריך.

באיזה עמודים שווה להתחיל לבדוק את התמונות

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

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

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

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

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

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

מה לגבי AVIF ודפדפנים ישנים

יש פורמטים חדשים יותר, ובראשם AVIF, שיכולים לדחוס טוב מאוד בחלק מהתמונות. גם Chrome מציג את WebP ו־AVIF כפורמטים מודרניים שיכולים להפחית את גודל ההורדה לעומת JPEG ו־PNG.

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

לגבי WebP, התמיכה בדפדפנים המרכזיים רחבה מאוד, ו־MDN מתאר אותו כפורמט שתומך בדחיסה מאבדת ולא מאבדת, שקיפות ואנימציה. עם זאת, יש הסתייגויות סביב גרסאות ישנות מסוימות של Safari במחשבי macOS, ולכן באתרים עם קהל שמשתמש במכשירים או דפדפנים ישנים במיוחד כדאי לוודא שהתוסף או המערכת יודעים להגיש חלופה מתאימה.

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

שלוש שאלות לפני שמטפלים בתמונות

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

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

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

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

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

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

איך מתחילים בלי להפוך את זה לפרויקט גדול

הדרך הפשוטה ביותר להתחיל היא לא להמיר את כל האתר ביום אחד.

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

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

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

תהליך טוב של תמונות לא מתחיל בפורמט. הוא מתחיל בהרגל.

לא מעלים תמונה כמו שהיא יצאה מהמצלמה או מהמעצב. לא משתמשים בתמונת רקע כבדה רק כי היא נראית יפה. לא מכניסים גלריה שלמה לעמוד אם שלוש תמונות היו מספיקות. ולא מתייחסים ל־WebP כאל מדבקה שמדביקים על אתר כדי להפוך אותו למהיר.

WebP עובד כשהוא פוגש את הבעיה הנכונה

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

אבל WebP הוא לא תחליף לחשיבה.

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

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

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

WebP הוא טיפול נכון כשהבעיה היא משקל של תמונה מתאימה.

הוא טיפול חלקי כשהבעיה היא תמונה שלא הייתה צריכה להיטען כך מלכתחילה.