עדכון בנוגע לאופן השימוש ב-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 הוא אחד ממדדי הליבה לבדיקת חוויית המשתמש באתר, והוא מייצג את המהירות שבה קטע התוכן הגדול ביותר בדף נטען. שימוש ברכיבי קודק מודרניים לדחיסת תמונות הוא אחת מהשיטות העיקריות להפחתת נתוני LCP. Lighthouse הוא כלי מצוין למפתחים ב-Chrome שבעזרתו תוכלו לבדוק את האתר שלכם ולראות כמה יחסוך השימוש ב-AVIF.
WordPress היא פלטפורמת האתרים הפופולריות ביותר בעולם, ויש מספר יישומי פלאגין שזמינים למפתחים כדי להמיר את התמונות שלהם לפורמט AVIF, למשל:
- AutoOptimize
- המרות למדיה
- הכלי לאופטימיזציית התמונות של EWWW
- אופטימיזציה
- כלי אופטימיזציית התמונות של ShortPixel
למפתחים מעשיים יותר, כלים כמו ImageMagick ו-FFmpeg הם נקודת התחלה טובה.
מהירות קידוד AVIF
מהירות קידוד מהירה ואיכות ויזואלית גבוהה הם חיוניים לפריסה של דחיסת תמונות בקנה מידה נרחב. מהירות הקידוד של תוכנת AVIF השתפרה באופן משמעותי בשנתיים האחרונות. בהשוואה לפורמטים מודרניים אחרים של תמונות סטילס, ה-AVIF מפיקה קבצים קטנים יותר עם איכות חזותית דומה (אפשר לעיין בתרשים הבא, איכות נמוכה יותר עדיף) אבל הקידוד מהיר יותר.
בתרשים הבא (הגבוהה יותר טובה יותר) ניתן לראות את מהירות קידוד ה-AVIF בהשוואה לפורמטים אחרים של תמונות. רכיבי קודק מדור קודם, כמו WebP, מפיקים תועלת מאלגוריתמים פחות מורכבים (אבל גם יעילים פחות) לדחיסה. עם סכימת קידוד עם מספר שרשורים, ה-AVIF משיגה ביצועים דומים בתרחישים נפוצים לדוגמה, עם שיפור משמעותי בדחיסת הנתונים.
למפתחים שמעוניינים בהשוואות מפורטות יותר של מהירות הקידוד ואיכות החזותית, האתר השוואות בין קידוד תמונות מכיל תוצאות הניתנות לשחזור.
הטמעות תוכנות לרכיבי קודק תמונות מודרניים כמו 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 נעשה שימוש בליבום כברירת מחדל לקידוד תמונות AVIF, אבל אפשר להשתמש גם ב-rav1e או ב-SVT-AV1 כשאפשר. במדריך לקידוד AV1 של FFmpeg, תוכלו למצוא מידע נוסף על כוונון הפרמטרים של הקידוד כדי לשפר את המהירות/איכות.
תרחיש לדוגמה נוסף הוא לארוז מחדש סרטון 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.