עדכון על אופן ההטמעה של AVIF בסביבה העסקית.
AVIF הוא פורמט תמונה חדש שצובר פופולריות במהירות באינטרנט בגלל שיעורי הדחיסה הגבוהים שלו, הביצועים היעילים והשימוש הנרחב בו. AVIF הוא פורמט תמונות פתוח ללא תמלוגים שמבוסס על קודק הווידאו AV1 שהוגדר כתקן על ידי Alliance for Open Media. בפוסט הזה בבלוג נספק סקירה כללית על אימוץ AVIF בסביבה העסקית, ועל היתרונות של AVIF לביצועים ולאיכות של תמונות סטילס ואנימציות.
מה חדש בסביבת AVIF?
מאז תחילת השימוש ב-AVIF ב-Chrome, ב-Firefox וב-Safari, השימוש ב-AVIF באינטרנט הולך וגדל. כמעט כל הדפדפנים תומכים ב-AVIF היום.
ב-Chrome בלבד, השימוש ב-AVIF גדל לכ-1% תוך קצת יותר משנה אחרי שנוספה ל-Chrome תמיכה ב-AVIF בגרסה היציבה.
כמה רשתות CDN של תמונות, כמו Akamai, Cloudflare, Cloudinary ו-Imgix מציגות היום תמונות AVIF. בפוסט בבלוג שמכריז על תמיכה ב-AVIF, חברת Imgix דיווחה על חיסכון של 60% בגודל הקובץ בהשוואה ל-JPEG וחיסכון של 35% בהשוואה ל-WebP. החיסכון בגודל הקבצים מוביל לחיסכון משמעותי בנפח האחסון, אבל הוא גם עוזר לדפים להיטען מהר יותר, וכך מפחית את זמני ה-Largest Contentful Paint (LCP). מדד LCP הוא אחד ממדדי הליבה לבדיקת חוויית המשתמש באתר, והוא מייצג את מהירות הטעינה של גוש התוכן הגדול ביותר בדף. שימוש בקודקים מודרניים לדחיסת תמונות הוא אחת מהשיטות העיקריות להפחתת זמן ה-LCP. Lighthouse הוא כלי מצוין למפתחי Chrome לבדיקה של האתר שלכם ולבדיקה של החיסכון שאפשר להשיג באמצעות AVIF.
WordPress היא פלטפורמת האתרים הפופולרית ביותר בעולם, ויש מספר פלאגינים שזמינים למפתחים כדי להמיר את התמונות שלהם ל-AVIF, כמו:
למפתחים שמעדיפים לעבוד באופן מעשי, כלים כמו ImageMagick ו-FFmpeg הם נקודת התחלה טובה.
מהירות קידוד AVIF
מהירות קידוד מהירה ואיכות ויזואלית גבוהה הם חיוניים לפריסה של דחיסת תמונות בקנה מידה גדול. מהירות הקידוד של תוכנת AVIF השתפרה באופן משמעותי בשנתיים האחרונות. בהשוואה לפורמטים מודרניים אחרים של תמונות סטילס, קובצי AVIF קטנים יותר באיכות חזותית דומה (ראו את התרשים הבא, ככל שהערך נמוך יותר, כך האיכות טובה יותר), אבל גם הקידוד שלהם מהיר יותר.
התרשים הבא (עדיף גבוה יותר) ממחיש את מהירות הקידוד של AVIF בהשוואה לפורמטים אחרים של תמונות. קודיקים מדור קודם כמו WebP נהנים מאלגוריתמי דחיסה פחות מורכבים (אבל גם פחות יעילים). באמצעות סכימה של קידוד בכמה שרשורים, פורמט AVIF משיג ביצועים דומים בתרחישים לדוגמה נפוצים, תוך שיפור משמעותי של דחיסת הנתונים.
למפתחים שמעוניינים בהשוואות מפורטות יותר של מהירות הקידוד ואיכות התמונה, האתר Image Coding Comparisons מכיל תוצאות של מדדי ביצועים שאפשר לשחזר.
הטמעות תוכנה לקודקים מודרניות של תמונות, כמו AVIF ו-WebP, מותאמות לארכיטקטורות של מעבדי x86 ו-ARM, אבל דחיסת כמויות גדולות של תמונות בקנה מידה נרחב יכולה להיות יקרה מבחינה ממוחשבת. חלופה אחת להפחתת עלויות הדחיסה היא לבדוק את שיפור המהירות באמצעות חומרה. חברת Bluedot פיתחה מקודד Pulsar-AVIF שמואץ בחומרה שפועל ב-FPGAs לתכנות, כמו Alveo U250 של AMD. בהשוואה ל-avifenc מבוסס-תוכנה, Pulsar-AVIF מספק שיפור מהירות של פי 7 עד 23 עם יעילות דחיסה דומה.
- קבוצת בדיקה: Kodak (24 תמונות בגודל 768x512)
- קידוד של 24 תמונות בו-זמנית (24 תהליכים)
- כל תהליך קידוד תוכנה מבוצע באמצעות 4 שרשורים. (-j 4)
מפתחים יכולים לפרוס את הקודק של Pulsar-AVIF במכונות וירטואליות בענן, כמו Azure NP-Series.
תכונות AVIF לדפי אינטרנט רספונסיביים
ל-AVIF יש כמה תכונות מעניינות שיעזרו להציג דפי אינטרנט עם תגובה מהירה יותר. הפעם נתעמק קצת בקובצי AVIF מונפשים, שהם ללא ספק הדרך היעילה ביותר להציג אנימציות מגניבות באינטרנט.
קובץ AVIF מונפש
GIF מונפש הוא עדיין פורמט פופולרי לתמונות מונפשות, למרות שגילו הוא 35. החסרונות העיקריים של קובצי GIF מונפשים הם התמיכה ב-256 צבעים בלבד ודחיסת נתונים ירודה, שמובילה לקבצים גדולים מאוד ומגבילה את הרזולוציה או את קצב הפריימים בתרחישי שימוש מעשיים. לעומת זאת, קידוד של אנימציות בפורמט AVIF זהה למעשה לתוכנית הקידוד של סרטוני AV1, שמספקת חיסכון משמעותי בגודל הקובץ בהשוואה ל-GIF מונפש.
הרצנו בדיקת ביצועים פשוטה שבה קידודנו קבוצה של קובצי GIF מונפשים גם ל-AVIF וגם ל-JPEG XL. בקבוצת הבדיקה, אחוז החיסכון הממוצע בגודל הקובץ היה כ-86% בהשוואה לקובצי GIF מקוריים וכ-73% בהשוואה לקובצי JPEG XL מונפשים*.
Chrome, Firefox ו-Safari תומכים בהפעלות של קובצי AVIF עם אנימציה.
FFmpeg הוא אחד הכלים ליצירת קובצי AVIF מונפשים. הנה דוגמה בסיסית להמרת קובץ GIF ל-AVIF באמצעות FFmpeg:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF הוא איכות הפלט הרצויה בסולם שנע בין 0 ל-63. ערכים נמוכים יותר מציינים איכות טובה יותר וגודל קובץ גדול יותר. אפליקציית 0 משתמשת בדחיסת נתונים ללא אובדן נתונים. התחלה עם ערך של 23 לקובצי AVIF של אנימציה קטנה.
ברירת המחדל של FFmpeg היא להשתמש ב-libaom לקידוד תמונות AVIF, אבל אפשר גם להשתמש ב-rav1e או ב-SVT-AV1 כשהם זמינים. מידע נוסף על אפשרויות הקידוד ועל כוונון פרמטרים של קידוד לצורך איזון בין מהירות לבין איכות זמין במדריך של FFmpeg לקידוד AV1.
תרחיש לדוגמה נוסף הוא אריזה מחדש של סרטון AV1 בפורמט AVIF בלי לקודד מחדש את הקובץ המקורי. הפתרון הזה זול בהרבה מפענוח או קידוד של קובץ AV1 המקורי, והוא מאפשר להשתמש בסרטון AV1 עם האלמנט <img>. אפשר לעשות זאת על ידי העברת -c:v copy ל-FFmpeg.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
מסקנות
השימוש ב-AVIF באינטרנט גדל בהתמדה מאז ההשקה, והוא נתמך באופן נרחב על ידי דפדפנים, רשתות CDN לתמונות, פלאגינים ל-WordPress וכלי קידוד. בסיכום, AVIF הוא בחירה מצוינת להצגת תמונות באינטרנט. הקודק של AVIF מאפשר קידוד ופענוח מהירים, תוך שמירה על האיכות הטובה ביותר או על גודל הקובץ הקטן ביותר, בהתאם לבחירה שלכם לאתר. AVIF היא הדרך היעילה ביותר להעביר אנימציות באינטרנט. אם יש לכם שאלות, תגובות או בקשות להוספת תכונות, אתם יכולים לפנות אלינו ברשימת התפוצה av1-discuss, בקהילת AOM ב-GitHub ובוויקיפדיה של AVIF.