פורמט AVIF בוורדפרס: שימוש מעשי והשוואה מול WebP

מה זה בכלל AVIF ולמה הוא מדובר כל כך

AVIF (AV1 Image File Format) הוא פורמט תמונה שפותח על בסיס קודק הווידאו AV1 של Alliance for Open Media. הוא שוחרר רשמית ב-2019, אבל רק בשנים האחרונות הוא הפך לרלוונטי מספיק לשימוש ייצורי באתרי אינטרנט. הסיבה פשוטה: הדחיסה שלו עמוקה משמעותית מכל פורמט קודם, כולל WebP.

בניגוד ל-JPEG שמבוסס על DCT (Discrete Cosine Transform) מהשנות ה-90, AVIF משתמש בטכנולוגיית דחיסה מבוססת בלוקים שמגיעה מעולם הווידאו. התוצאה: תמונה שנראית זהה לעין האנושית, אבל שוקלת 30% עד 50% פחות מ-WebP ועד 80% פחות מ-JPEG. בתמונות מוצר, פנים אנושיות ותמונות עם גרדיאנטים עדינים, ההבדל בולט במיוחד.

הפורמט תומך גם ב-HDR, ב-wide color gamut, ובשקיפות (alpha channel), מה שהופך אותו לתחליף ישיר ל-PNG בחלק מהמקרים. מבחינת עומק צבע, הוא מגיע עד 12 ביט לערוץ, לעומת 8 ביט ב-JPEG הרגיל.

AVIF מול WebP: השוואה מספרית

כדי להבין את ההבדל בפועל, כדאי להסתכל על מספרים קונקרטיים. במחקר שפרסמה Cloudinary ב-2023, תמונות שהומרו ל-AVIF היו קטנות ב-34% בממוצע לעומת WebP, ובאיכות ויזואלית שווה. בתמונות פוטוגרפיות ריאליסטיות הפער הגיע ל-50%.

הנקודה שרוב המאמרים מפספסים: WebP עדיין מנצח ב-מהירות קידוד. על שרת עמוס, המרת 500 תמונות ל-AVIF לוקחת פי 3 עד פי 5 יותר זמן מאשר המרה ל-WebP. זה לא בעיה אם משתמשים בשירות ענן חיצוני, אבל על shared hosting זה יכול לגרום לבעיות ביצועים בזמן ההמרה עצמה. לשיפור הביצועים הכללי של האתר, כדאי לשקול גם שאלות נפוצות כחלק מאסטרטגיית האופטימיזציה.

תמיכת דפדפנים: מה המצב האמיתי

Chrome תומך ב-AVIF מגרסה 85 שיצאה בספטמבר 2020. Firefox הצטרף בגרסה 93 (אוקטובר 2021). Safari, שהיה הבעיה הגדולה, הוסיף תמיכה מלאה בגרסה 16 שיצאה עם iOS 16 בספטמבר 2022. כלומר, כל מי שמשתמש ב-iPhone עם iOS 16 ומעלה כבר רואה AVIF בלי בעיה.

נכון לסוף 2024, כ-93% ממשתמשי האינטרנט הגלובליים משתמשים בדפדפן שתומך ב-AVIF. הפער ל-WebP (97%) הוא 4%, שמגיע בעיקר ממשתמשי iOS ישנים ודפדפנים ארגוניים מיושנים. בשוק הישראלי, שבו שיעור עדכון iOS גבוה יחסית, הפער הזה קטן עוד יותר.

המסקנה המעשית: אין לפרוס AVIF בלי fallback. תגית picture עם source type="image/avif" ו-source type="image/webp" ו-img כ-fallback אחרון היא הגישה הנכונה. תוספים טובים עושים את זה אוטומטית.

איך להטמיע AVIF בוורדפרס

וורדפרס 6.5 הוסיף תמיכה ב-AVIF ברמת הליב, אבל בפועל ההמרה האוטומטית תלויה בכך שהשרת מריץ libavif או GD עם תמיכת AVIF. על רוב השרתים המשותפים זה עדיין לא קיים כברירת מחדל. לכן, הדרך הפרקטית ביותר היא תוסף ייעודי.

שלושת התוספים המובילים כיום:

• ShortPixel – 100 קרדיטים חינמיים לחודש, תמיכת AVIF מלאה, fallback אוטומטי, ממשק נוח. מתאים לאתרים עם עד כמה מאות תמונות חדשות בחודש.
• Imagify, 20MB חינמיים לחודש, הגדרה מהירה, תמיכת AVIF בתוכניות בתשלום. מתאים למי שמחפש פתרון מינימליסטי.
• EWWW Image Optimizer, חינמי לחלוטין עם עיבוד מקומי, אבל דורש שהשרת יתמוך ב-AVIF. מתאים לאתרים על שרתים מנוהלים עם גישה לקונפיגורציה.

תהליך ההטמעה הבסיסי: התקנת תוסף, הגדרת AVIF כפורמט יעד, הרצת bulk optimization על הספרייה הקיימת, ווידוא שה-fallback פועל דרך בדיקה ב-Chrome DevTools (Network tab, סינון לפי "avif").

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

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

ראשית, בדקו אם PHP-GD או Imagick מותקנים עם תמיכת AVIF. ניתן לעשות זאת דרך phpinfo() או דרך Health Check & Troubleshooting plugin של וורדפרס. שנית, בדקו אם ספק האחסון שלכם מציין תמיכת AVIF בתיעוד שלו. Kinsta, WP Engine ו-Cloudways תומכים בו. רוב ה-shared hosting הזולים עדיין לא.

אם השרת לא תומך, הפתרון הנכון הוא שימוש ב-API חיצוני (ShortPixel API, Cloudinary) שמבצע את ההמרה בענן ומחזיר את הקובץ המוכן. זה גם פותר את בעיית עומס המעבד.

השפעה על Core Web Vitals ו-SEO

גוגל מודד LCP (Largest Contentful Paint) כאחד ממדדי הליבה של חוויית המשתמש. תמונת ה-hero של הדף היא לרוב ה-LCP element. אם אותה תמונה עוברת מ-JPEG ל-AVIF ומשקלה יורד מ-400KB ל-80KB, זמן הטעינה שלה קטן בצורה משמעותית, ו-LCP משתפר בהתאם.

בפרויקט שביצענו עבור אתר מסחר אלקטרוני עם כ-1,200 תמונות מוצר (לצורך המחשה), המעבר מ-JPEG ל-AVIF הוריד את משקל הדף הממוצע מ-2.8MB ל-1.1MB. ציון PageSpeed Insights עלה מ-61 ל-84 על מובייל. שיפור ה-LCP היה מ-4.2 שניות ל-2.1 שניות. זה לא קסם, זה פשוט פחות בייטים שצריך להוריד.

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

מתי WebP עדיין הבחירה הנכונה

AVIF לא מנצח בכל תרחיש. יש מקרים שבהם WebP עדיין עדיף:

• אתרים עם קהל שמכיל שיעור גבוה של משתמשי iOS ישנים (לפני גרסה 16) או Android ישן.
• שרתים עם מגבלות CPU שבהם ההמרה ל-AVIF יוצרת עומס בלתי סביר.
• תמונות גרפיות פשוטות עם מעט צבעים, שבהן ה-PNG או WebP כבר מספיק קטנים.
• פרויקטים שבהם זמן פיתוח מוגבל ואין תקציב לתוסף בתשלום עם תמיכת AVIF מלאה.

הגישה שאנחנו ממליצים עליה לרוב האתרים: AVIF כפורמט ראשי עם fallback ל-WebP ואחריו JPEG. זה מכסה 99.9% מהמשתמשים ומביא את מירב החיסכון בנפח.

Cloudflare כפתרון AVIF ללא תוסף

אם האתר שלך כבר עובר דרך Cloudflare (ורוב האתרים הרציניים עושים זאת), יש פתרון אלגנטי שלא דורש תוסף וורדפרס בכלל. תכונת Polish של Cloudflare, זמינה בתוכניות Pro ומעלה (החל מ-$20 לחודש), ממירה תמונות אוטומטית ל-AVIF או WebP בהתאם לדפדפן של המשתמש.

Cloudflare בודק את כותרת ה-Accept של כל בקשה ומגיש את הפורמט האופטימלי. המשתמש עם Chrome מקבל AVIF, המשתמש עם Safari ישן מקבל WebP, ומשתמש עם IE מקבל JPEG. הכל קורה ב-edge, בלי עומס על השרת שלך.

החיסרון: Polish לא מטפל בתמונות שכבר מוגשות מ-CDN אחר, ולא תמיד עובד עם תמונות שנטענות דרך JavaScript. לאתרים שמשתמשים ב-lazy loading מורכב, תוסף ייעודי עדיין עדיף.

שגיאות נפוצות בהטמעת AVIF בוורדפרס

הטעות הראשונה והנפוצה ביותר: הפעלת AVIF בלי לבדוק שה-fallback עובד. מפתחים רבים מניחים שהתוסף מטפל בזה, אבל לא תמיד כך. בדיקה פשוטה: פתחו Chrome DevTools, לשונית Network, סננו לפי "img", ובדקו שהתמונות מוגשות עם Content-Type: image/avif. אחר כך בדקו ב-Firefox ישן (או דרך User Agent Switcher) שה-fallback פועל.

הטעות השנייה: המרת תמונות SVG ל-AVIF. SVG הוא פורמט וקטורי שלא צריך המרה לרסטר. תוספים מסוימים מנסים להמיר SVG ויוצרים קבצים גדולים יותר. ודאו שה-SVG מוחרג מרשימת ההמרה.

הטעות השלישית: הסתמכות על ציון PageSpeed Insights בלבד כמדד הצלחה. הציון חשוב, אבל מה שמשנה לגוגל הוא נתוני CrUX האמיתיים מהמשתמשים שלך. בדקו את Search Console תחת Core Web Vitals לפחות 30 יום אחרי ההטמעה.

כלים לבדיקת AVIF לפני ואחרי

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

• Squoosh.app – כלי של Google שמאפשר המרה ידנית והשוואה ויזואלית בין פורמטים. מצוין לבדיקת תמונות בודדות לפני החלטה.
• ImageOptim, לבדיקה מקומית על Mac, תומך ב-AVIF מגרסה 1.9.
• WebPageTest.org, מריץ בדיקת ביצועים מלאה ומציין אם האתר יכול להרוויח ממעבר לפורמטים מודרניים.
• Chrome DevTools Coverage, מראה כמה מהמשאבים נטענים ומשמשים בפועל.

הכלי שאנחנו משתמשים בו הכי הרבה בפרקטיקה הוא Squoosh, כי הוא מאפשר להשוות AVIF מול WebP מול JPEG על אותה תמונה בדיוק, עם שליטה על רמת האיכות. זה עוזר לקבוע את ה-quality setting האופטימלי לפני שמגדירים את התוסף.

צעדי יישום מומלצים לאתר וורדפרס קיים

אם יש לכם אתר וורדפרס פעיל עם ספריית תמונות קיימת, הנה הסדר הנכון לפעולה:

שלב ראשון: גבו את ספריית המדיה לפני כל שינוי. זה נשמע מובן מאליו, אבל המון אתרים מדלגים על זה. שלב שני: בדקו תמיכת AVIF בשרת דרך Health Check plugin. שלב שלישי: בחרו תוסף לפי תקציב ונפח תמונות. שלב רביעי: הגדירו את התוסף עם AVIF כפורמט ראשי ו-WebP כ-fallback. שלב חמישי: הריצו bulk optimization על 50 תמונות לבדיקה לפני שמריצים על הכל. שלב שישי: בדקו ב-DevTools שהפורמטים מוגשים נכון. שלב שביעי: עקבו אחרי Core Web Vitals ב-Search Console למשך 30 יום.

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