עדכון על האופן שבו AVIF אומץ בסביבה העסקית.
AVIF הוא פורמט תמונה חדש שצובר פופולריות במהירות באינטרנט בגלל שיעורי הדחיסה הגבוהים, הביצועים היעילים והאימוץ הנרחב שלו. AVIF הוא פורמט תמונה פתוח וללא תמלוגים שמבוסס על קודק הווידאו AV1, שנקבע כסטנדרט על ידי Alliance for Open Media. בפוסט הזה בבלוג נסביר איך AVIF משתלב בסביבה העסקית, ואילו יתרונות מבחינת ביצועים ואיכות המפתחים יכולים לצפות לקבל מ-AVIF לתמונות סטטיות ולאנימציות.
מה חדש בסביבה העסקית של AVIF?
מאז שהוצג פורמט AVIF ב-Chrome, ב-Firefox וב-Safari, השימוש ב-AVIF באינטרנט גדל בהתמדה. כיום כמעט כל הדפדפנים תומכים ב-AVIF.
ב-Chrome לבד, השימוש ב-AVIF גדל לכאחוז אחד תוך קצת יותר משנה אחרי ש-Chrome הוסיף תמיכה ב-AVIF בגרסה יציבה.
יש כמה רשתות CDN לתמונות, כמו Akamai, Cloudflare, Cloudinary ו-Imgix, שמציגות תמונות בפורמט AVIF. בפוסט בבלוג שבו הוכרזה התמיכה ב-AVIF, Imgix דיווחה על חיסכון של 60% בגודל הקובץ בהשוואה ל-JPEG וחיסכון של 35% בהשוואה ל-WebP. החיסכון בגודל הקובץ מוביל לחיסכון משמעותי בנפח האחסון, אבל גם עוזר לדפים להיטען מהר יותר, וכך מקצר את זמני המהירות שבה נטען רכיב התוכן הכי גדול (LCP). המדד LCP הוא אחד מהמדדים הבסיסיים של חוויית המשתמש (Core Web Vitals), והוא מייצג את המהירות שבה נטען בלוק התוכן הכי גדול בדף. שימוש בקודקים מודרניים לדחיסת תמונות הוא אחת מהשיטות העיקריות לצמצום ה-LCP. Lighthouse הוא כלי נהדר למפתחים ב-Chrome שמאפשר לבדוק את האתר ולראות כמה מקום אפשר לחסוך באמצעות AVIF.
WordPress היא פלטפורמת האתרים הכי פופולרית בעולם, ויש כמה יישומי פלאגין שזמינים למפתחים כדי להמיר את התמונות שלהם ל-AVIF, למשל:
למפתחים שמעדיפים לעבוד באופן מעשי, כלים כמו ImageMagick ו-FFmpeg הם נקודת התחלה טובה.
מהירות הקידוד של AVIF
מהירות קידוד גבוהה ואיכות חזותית גבוהה הן קריטיות לפריסת דחיסת תמונות בקנה מידה גדול. מהירות הקידוד של תוכנת AVIF השתפרה באופן משמעותי בשנתיים האחרונות. בהשוואה לפורמטים מודרניים אחרים של תמונות סטילס, AVIF יוצר קבצים קטנים יותר עם איכות חזותית דומה (ראו את התרשים הבא, ככל שהערך נמוך יותר, כך הוא טוב יותר), אבל גם מהיר יותר לקידוד.
התרשים הבא (ככל שהערך גבוה יותר, כך המהירות גבוהה יותר) ממחיש את מהירות הקידוד של AVIF בהשוואה לפורמטים אחרים של תמונות. קודקים מהדור הקודם, כמו WebP, נהנים מאלגוריתמים פחות מורכבים (אבל גם פחות יעילים) של דחיסה. עם סכימת קידוד מרובת-תהליכים, AVIF משיג ביצועים דומים בתרחישים נפוצים, תוך שיפור משמעותי בדחיסה.
מפתחים שמעוניינים בהשוואות מפורטות יותר של מהירות הקידוד ואיכות התמונה יכולים למצוא באתר Image Coding Comparisons תוצאות של בדיקות השוואה שניתן לשחזר.
הטמעות תוכנה של רכיבי codec מודרניים של תמונות כמו AVIF ו-WebP מותאמות לארכיטקטורות של מעבדי x86 ו-ARM, אבל דחיסה של כמויות גדולות של תמונות בקנה מידה נרחב יכולה להיות יקרה מבחינת משאבי המחשוב. אפשרות אחת לצמצום עלויות הדחיסה היא לבדוק את האפשרות של שיפור מהירות באמצעות חומרה. חברת Bluedot פיתחה מקודד Pulsar-AVIF עם שיפור מהירות באמצעות חומרה שפועל על מערכי שערים הניתנים לתכנות (FPGA), כמו 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 הוא הדרך היעילה ביותר להציג אנימציות באינטרנט. אם יש לכם שאלות, הערות או הגשת בקשה להוספת תכונה, אתם יכולים לפנות אלינו דרך רשימת התפוצה av1-discuss, קהילת AOM ב-GitHub והוויקי של AVIF.