WebP: פורמט תמונות שמקטין קבצים באתר, ומתי להשתמש בו

מה זה WebP ומתי הוא מתאים לאתר

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

הפורמט מתאים לבחינה עבור תמונות מוצרים, צילומי תוכן ובאנרים. הוא מציע דחיסה עם אובדן מידע, שבה חלק מפרטי התמונה משתנים כדי להקטין את הקובץ, וגם דחיסה ללא אובדן מידע. לפי התיעוד הרשמי של Google, הפורמט נתמך באופן מובנה ב־Chrome, Safari, Firefox, Edge ו־Opera.

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

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

כמה מקום אפשר לחסוך, ומה עלול להיפגע

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

גם לשקיפות יש נתונים: לפי אותו תיעוד, הוספת שקיפות לקובץ WebP ללא אובדן מידע דורשת כ־22% בתים נוספים, ו־WebP עם אובדן מידע ושקיפות קטן בכ־3 פעמים מקובץ PNG מקביל. אנימציה ב־WebP יכולה להיות קטנה יותר מ־GIF ומ־APNG.

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

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

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

הקשר למהירות האתר ולמיקום בגוגל

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

Google Search תומך בתמונות WebP. לפי ההנחיות לתמונות בחיפוש, הפורמטים הנתמכים הם BMP, GIF, JPEG, PNG, WebP, SVG ו־AVIF, וסיומת הקובץ צריכה להתאים לסוג שלו. Google ממליצה גם להשתמש בטכניקות של תמונות רספונסיביות, למשל רכיב picture או התכונה srcset, ובטקסט חלופי שמתאר את התמונה בהקשר של העמוד.

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

המרה והעלאה בוורדפרס

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

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

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

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

איזה סוג תמונה מתאים להמרה

לא כל תמונה מרוויחה באותה מידה, ולכן כדאי למיין את התמונות באתר לפי סוג לפני ההמרה.

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

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

מה לבדוק לפני שמחליפים את התמונות באתר

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

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

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

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