WebP לתמונות הוא פורמט קובץ של גוגל שמקטין כל תמונה בעשרות אחוזים, בלי שהעין תראה הבדל. זה אחד הצעדים הכי פשוטים להאיץ אתר: לא נוגעים בעיצוב ולא מוחקים תמונות, רק מחליפים את הקובץ שהדפדפן מוריד. כאן אני מסביר מה הוא נותן, כמה הוא חסך בבדיקה שעשיתי ואיך ממירים.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
מה זה WebP ומה הוא עושה לתמונה
WebP הוא פורמט תמונה שגוגל פיתחה כדי שתמונות באינטרנט ישקלו פחות. הוא עובד בשני מצבים: דחיסה שמוותרת על פרטים שהעין כמעט לא קולטת, כמו JPEG, ודחיסה שלא מאבדת אף פיקסל, כמו PNG. הוא תומך גם בשקיפות ובאנימציה, ולכן מחליף כמעט כל תמונה שיש לכם באתר.
לפי המדידות של גוגל עצמה, תמונת WebP קטנה ב-25 עד 34 אחוז מתמונת JPEG באותה איכות, וקטנה ב-26 אחוז מקובץ PNG כשלא מוותרים על אף פרט. בשביל גולש בטלפון עם קליטה בינונית, זה ההבדל בין עמוד שמופיע מיד לעמוד שמתמלא לאט מול העיניים.
כמה משקל WebP חוסך בפועל
המספרים של גוגל נמדדו בתנאי מעבדה, אז רציתי לראות מה קורה עם תמונה רגילה מהאתר. לקחתי צילום ברוחב 1,200 פיקסלים ושמרתי אותו בארבעה פורמטים, עם הגדרות האיכות שתוספי וורדפרס משתמשים בהן בדרך כלל.
קובץ JPEG שקל 93 קילובייט, וגרסת WebP שקלה 38, פחות ממחצית. קובץ PNG שקל 628 קילובייט, פי 16 מגרסת WebP, ולכן צילום ששמור בפורמט PNG הוא אחת הטעויות הכבדות שאני מוצא באתרים. בצילום מסך עם הרבה טקסט התמונה חזרה על עצמה: 87 קילובייט בפורמט JPEG מול 40 בפורמט WebP.
חשוב לי לדייק: הפער כאן גדול מהמספר של גוגל, כי השוויתי לפי אותה הגדרת איכות ולא לפי איכות נראית זהה. גם בהערכה השמרנית, WebP לתמונות מוריד מכל קובץ רבע עד שליש מהמשקל. בעמוד עם עשרים תמונות זה מצטבר מהר, וזה החלק הכי קל בשיפור מהירות אתר שאני מכיר.
WebP מול הפורמטים האחרים
לכל פורמט יש מקום, והשאלה היא מה מתאים לכל סוג תמונה. הטבלה מסכמת את מה שאני ממליץ ללקוחות, עם המשקל של אותו צילום מהבדיקה.
| פורמט | למה הוא מתאים | משקל הצילום בבדיקה |
|---|---|---|
| JPEG | צילומים, כשאין אפשרות אחרת | 93 קילובייט |
| PNG | לוגו או גרפיקה עם שקיפות, באתרים ישנים | 628 קילובייט |
| WebP | כמעט כל תמונה: צילומים, גרפיקה ושקיפות | 38 קילובייט |
| AVIF | צילומים, כשהאחסון והתוסף תומכים בו | 23 קילובייט |
פורמט AVIF דוחס עוד יותר, ובבדיקה שלי הוא ירד ל-23 קילובייט. החיסרון הוא שההמרה אליו כבדה יותר לשרת, ולא כל אחסון תומך בה. לרוב האתרים WebP הוא הבחירה הבטוחה: כל הדפדפנים המודרניים מציגים אותו, וההמרה מהירה.
WebP לתמונות לא מחליף את דחיסת התמונות עצמה. תמונה שהועלתה ברוחב 4,000 פיקסלים תישאר כבדה גם אחרי ההמרה, ולכן קודם מקטינים אותה לגודל שבו היא מוצגת באתר, ורק אז ממירים.
אילו תוספים ממירים את התמונות לפורמט WebP
באתר וורדפרס לא ממירים תמונות אחת אחת. תוסף ממיר את כל מה שכבר נמצא בספריית המדיה, ממיר אוטומטית כל תמונה חדשה, ומגיש WebP רק לדפדפנים שתומכים בו. אלה שלושת התוספים שאני מכיר הכי טוב.
ShortPixel Image Optimizer
גילוי נאות: בעמוד יש קישורי שותפים לכלים שאני עובד איתם. אם תירשמו דרכם אקבל עמלה קטנה, בלי שזה משנה לכם את המחיר.
ShortPixel דוחס את התמונות בשרתים שלו ולא בשרת שלכם, כך שהאתר לא מואט בזמן ההמרה. הוא יוצר גרסת WebP לכל קובץ JPEG, PNG או GIF ושומר את המקור. יש לו מכסה חינמית קטנה בכל חודש, ומעבר לה משלמים לפי כמות תמונות.
שורט פיקסל הוא התוסף שאני מתקין ברוב האתרים שאני משפר, בעיקר כי הוא לא מעמיס על אחסון חלש ויודע להמיר אלפי תמונות קיימות בהרצה אחת.
WebP Express
WebP Express חינמי לגמרי וממיר את התמונות על השרת שלכם. הוא עובד עם ספריית המדיה, עם גלריות ועם תמונות רקע שמוגדרות בקובצי העיצוב. החיסרון הוא העומס: באחסון זול, המרה של אלפי תמונות עלולה להאט את האתר בזמן שהיא רצה.
בשרת מסוג Nginx הוא דורש הוספה ידנית של כללים בהגדרות השרת, ולכן הוא מתאים יותר למי שהאחסון שלו מבוסס Apache או LiteSpeed, או למי שיש לו גישה לשרת.
EWWW Image Optimizer
EWWW חינמי בגרסה הבסיסית שלו, ודוחס את התמונות על השרת שלכם או בענן שלו בתשלום. ההפעלה פשוטה: מתקינים, מסמנים המרה לפורמט WebP בהגדרות, ומכאן כל תמונה חדשה מטופלת לבד. את התמונות הקיימות מריצים פעם אחת בהמרה מרוכזת.
בכל מקרה, תתקינו רק תוסף אחד מהשלושה. שני תוספי תמונות שרצים יחד ממירים את אותה תמונה פעמיים, משאירים קבצים כפולים בשרת ולפעמים מגישים לדפדפן את הגרסה הלא נכונה.
איך פותחים קובץ WebP במחשב
הורדתם תמונת WebP והמחשב לא פותח אותה? כמעט תמיד מספיק לגרור אותה לחלון של Chrome, Edge או Firefox. במחשב עם Windows 11 אפליקציית התמונות פותחת אותה ישירות, ובמק אפליקציית Preview פותחת אותה מאז גרסת macOS Big Sur.
כדי להפוך אותה לקובץ JPEG, במק פותחים אותה באפליקציית Preview, בוחרים ייצוא ומסמנים JPEG. במחשב Windows פותחים אותה בצייר (Paint), בוחרים שמירה בשם ומסמנים JPEG. אין צורך באתר המרה חיצוני ואין צורך להעלות את התמונה לשום מקום.
שאלות ותשובות על פורמט WebP
האם המרה לפורמט WebP פוגעת באיכות התמונה?
בהגדרות שהתוספים משתמשים בהן כברירת מחדל, ההבדל לא נראה לעין גם בהשוואה צמודה. הדחיסה מוותרת על פרטים זעירים שהעין לא קולטת. אם יש לכם תמונות שחייבות להישאר מושלמות, כמו לוגו או צילום מוצר מקרוב, אפשר לבחור במצב שלא מאבד אף פיקסל ועדיין לחסוך משקל.
האם כל הדפדפנים מציגים תמונות WebP?
כן, כל הדפדפנים המודרניים. לפי גוגל, Chrome, Firefox וגם Edge תומכים בו כבר שנים, וגם Safari מגרסה 14 באייפון ובמק. התוספים בודקים איזה דפדפן ביקש את העמוד, ולמכשיר ישן מאוד הם מגישים את קובץ JPEG המקורי, כך שאף גולש לא רואה תמונה שבורה.
מה קורה לתמונות המקוריות אחרי ההמרה?
שלושת התוספים שומרים את הקבצים המקוריים ויוצרים לידם עותק בפורמט WebP. אם משהו לא נראה טוב, מבטלים את ההמרה בלחיצה והאתר חוזר להגיש את המקור. בגלל זה גם אין סיכון לנסות: הצעד הפיך לגמרי, ואפשר לבדוק אותו קודם על כמה עמודים.
האם WebP משפיע על הקידום בגוגל?
בעקיפין. גוגל מודדת את מהירות הטעינה כחלק מחוויית הגולש, ותמונה ראשית כבדה היא הסיבה הנפוצה ביותר לעמוד שנטען לאט. המרה לפורמט WebP לא תקפיץ עמוד למקום הראשון לבד, אבל היא מסירה את אחד הדברים שהכי מאטים אותו, בלי לשנות שום דבר בתוכן.
הצעד הבא אחרי ההמרה
אחרי שהתמונות עברו לפורמט WebP, הצעד הבא הוא טעינה עצלה של תמונות שנמצאות מתחת לקו הגלילה, כך שהדפדפן לא מוריד אותן עד שהגולש מגיע אליהן. שני הצעדים יחד מורידים את משקל העמוד הראשון בצורה שמרגישים מיד.
אם אתם רוצים לדעת כמה משקל התמונות מוסיפות לאתר שלכם, שלחו לי את הכתובת ואבדוק. אני אגיד לכם בדיוק אילו תמונות הכי מכבידות, ואם המרה לפורמט WebP תספיק או שצריך לטפל גם בדברים אחרים.
