אנחנו כותבים לעיתים קרובות על הבעיה של עודף נתונים באתרים שנובעת מתמונות, וכלים כמו Lighthouse מדגישים מתי טעינת התמונות משפיעה לרעה על חוויית המשתמש, למשל על ידי הארכת זמן הטעינה או על ידי שימוש ברוחב הפס במשאבים חשובים יותר. דרך אחת לפתור את הבעיה היא להשתמש בשיטת דחיסה מודרנית כדי להקטין את גודל הקובץ של התמונות. אפשרות חדשה למפתחי אתרים היא פורמט תמונה AVIF. בפוסט הזה נסביר על עדכונים אחרונים בכלים של קוד פתוח ל-AVIF, נציג את ספריות הקידוד libaom ו-libavif ונספק הדרכה לשימוש בספריות האלה כדי לקודד תמונות AVIF ביעילות.
AVIF הוא פורמט תמונה שמבוסס על קודק הווידאו AV1, והוא סטנדרטי על ידי Alliance for Open Media. בפורמט AVIF יש שיפור משמעותי בדחיסה בהשוואה לפורמטים אחרים של תמונות, כמו JPEG ו-WebP. החיסכון המדויק תלוי בתוכן, בהגדרות הקידוד וביעד האיכות, אבל אנחנו ואחרים חוסכים יותר מ-50% לעומת JPEG.
בנוסף, ב-AVIF נוסף קודק ותמיכה בקונטיינרים בתכונות תמונה חדשות כמו High Dynamic Range (טווח דינמי רחב וטווח צבעים רחב), סינתזת גרעיניות סרט ופענוח הדרגתי.
מה חדש
מאז שהוסיפה תמיכה ב-AVIF בגרסה M85 של Chrome, התמיכה ב-AVIF בסביבת הקוד הפתוח השתפרה בכמה מישורים.
Libaom
Libaom הוא מקודד ומפענח AV1 בקוד פתוח שמנוהל על ידי החברות ב-Alliance for Open Media, ומשומש בשירותי ייצור רבים ב-Google ובחברות אחרות שהצטרפו לארגון. בין הגרסה 2.0.0 של libaom – בערך באותו זמן שנוספה ל-Chrome תמיכה ב-AVIF – לבין הגרסה 3.1.0 האחרונה, נוספו לבסיס הקוד אופטימיזציות משמעותיות לקידוד תמונות סטילס. למשל:
- אופטימיזציות למספר רב של שרשורים ולקידוד בחלוקה לריבועים.
- הפחתה של פי 5 בשימוש בזיכרון.
- הפחתה של פי 6.5 בשימוש במעבד, כפי שמוצג בתרשים הבא.
השינויים האלה מפחיתים משמעותית את עלות הקידוד של ה-AVIF – במיוחד התמונות שנטענו בתדירות הגבוהה ביותר או עם העדיפות הגבוהה ביותר באתר. ככל שקידוד בהאצת חומרה של AV1 יהיה זמין יותר בשרתים ובשירותי ענן, העלות של יצירת תמונות AVIF תמשיך לרדת.
Libavif
Libavif, שהיא הטמעה של AVIF, היא מקודד ומנתח AVIF בקוד פתוח שמשמש ב-Chrome לפענוח תמונות AVIF. אפשר גם להשתמש בו עם libaom כדי ליצור תמונות AVIF מתמונות קיימות ללא דחיסה, או כדי לבצע המרה מתמונות אינטרנט קיימות (JPEG, PNG וכו').
לאחרונה נוספה ל-Libavif תמיכה במגוון רחב יותר של הגדרות מקודד, כולל שילוב עם הגדרות מקודד מתקדמות יותר של libaom. אופטימיזציות בצינור עיבוד הנתונים, כמו המרה מהירה של YUV ל-RGB באמצעות libyuv ותמיכה ב-alpha מוכפלת, מאפשרות להאיץ עוד יותר את תהליך הפענוח. לבסוף, התמיכה במצב קידוד intra בלבד שנוספה לגרסה 3.1.0 של libaom כוללת את כל השיפורים ב-libaom שצוינו למעלה.
קידוד תמונות AVIF באמצעות avifenc
דרך מהירה להתנסות ב-AVIF היא Squoosh.app. Squoosh מפעילה גרסה של libavif ל-WebAssembly, ומציגה הרבה מהתכונות של הכלים לשורת הפקודה. זו דרך קלה להשוות בין AVIF לפורמטים אחרים, ישנים וחדשים. יש גם גרסת CLI של Squoosh שמתאימה לאפליקציות Node.
עם זאת, ל-WebAssembly עדיין אין גישה לכל הרכיבים הבסיסיים של ביצועי המעבדים, ולכן אם רוצים להריץ את libavif במהירות הגבוהה ביותר, מומלץ להשתמש במקודד שורת הפקודה avifenc.
כדי להבין איך לקודד תמונות AVIF, נציג מדריך באמצעות אותה תמונה המקור ששימשה בדוגמה שלמעלה. כדי להתחיל, תצטרכו:
בנוסף, תצטרכו להתקין את חבילות הפיתוח של zlib, libpng ו-libjpeg. הפקודות במהדורות Debian ו-Ubuntu Linux הן:
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
פיתוח המקודד avifenc בשורת הפקודה
1. קבל את הקוד
בודקים את תג הגרסה של libavif.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. שינוי הספרייה ל-libavif
cd libavif
יש הרבה דרכים שונות להגדיר את avifenc ואת libavif לצורך פיתוח. מידע נוסף זמין בכתובת libavif. אנחנו נתכנן את avifenc כך שתהיה לה קישור סטטי לספריית המקודד והפעמון של AV1, libaom.
3. אחזור ויצירה של libaom
עוברים לספריית יחסי התלות החיצוניים של libavif.
cd ext
הפקודה הבאה תגרור את קוד המקור של libaom ותבנה את libaom באופן סטטי.
./aom.cmd
משנים את הספרייה ל-libavif.
cd ..
4. פיתוח כלי הקידוד בשורת הפקודה, avifenc
מומלץ ליצור ספריית build ל-avifenc.
mkdir build
עוברים לספריית ה-build.
cd build
יוצרים את קובצי ה-build של avifenc.
cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
פיתוח avifenc.
make
השלמת את ה-build של avifenc!
הסבר על הפרמטרים של שורת הפקודה של avifenc
avifenc משתמש במבנה של שורת הפקודה:
./avifenc [options] input.file output.avif
הפרמטרים הבסיסיים של avifenc שנעשה בהם שימוש במדריך הזה הם:
| avifenc | |
|---|---|
| --מינימום 0 | מגדירים את המכפיל המינימלי לקידוד הצבע כ-0 |
| --עד 63 | הגדרת הכמות המקסימלית של צבע כ-63 |
| --minalpha 0 | הגדרת הכמת דקות לאלפא ל-0 |
| --maxalpha 63 | הגדרת המונה המקסימלי לאלפא עד 63 |
| -a end-usage=q | מגדירים את מצב בקרת הקצב למצב איכות קבועה (Q) |
| -a cq-level=Q | הגדרת רמת כימות לצבע ולאלפא ל-Q |
| -a color:cq-level=Q | הגדרת רמת הקידוד של הצבע ל-Q |
| -a alpha:cq-level=Q | מגדירים את רמת ה-quantize של אלפא כ-Q |
| -a tune=ssim | כוונון ל-SSIM (ברירת המחדל היא כוונון ל-PSNR) |
| --jobs J | שימוש ב-J worker threads (ברירת המחדל: 1) |
| --speed S | מגדירים את מהירות המקודד מ-0 עד 10 (הכי איטי עד הכי מהיר. ברירת המחדל: 6) |
האפשרות cq-level מגדירה את רמת הקידוד (0 עד 63) כדי לשלוט באיכות של הצבע או של האלפא.
יצירת קובץ AVIF עם הגדרות ברירת המחדל
הפרמטרים הבסיסיים ביותר להרצת avifenc הם הגדרת קובצי הקלט והפלט.
./avifenc happy_dog.jpg happy_dog.avif
מומלץ להשתמש בשורת הפקודה הבאה כדי לקודד תמונה, למשל ברמת קידוד של 18:
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
ל-Avifenc יש הרבה אפשרויות שמשפיעות על האיכות ועל המהירות.
כדי לראות את האפשרויות ולקבל מידע נוסף עליהן, פשוט צריך להריץ את ./avifenc
עכשיו יש לכם תמונה בפורמט AVIF משלכם!
האצת המקודד
פרמטר אחד שיכול להיות כדאי לשנות בהתאם למספר הליבות במכונה הוא הפרמטר --jobs.
הפרמטר הזה מגדיר את מספר השרשור שבהם avifenc תשתמש כדי ליצור קובצי אימג' בפורמט AVIF.
נסו להריץ את הפקודה הזו בשורת הפקודה.
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif
הפקודה הזו מורה ל-avifenc להשתמש ב-8 שרשורים כשיוצרים את קובץ ה-AVIF, וכך מקצרת את זמן הקידוד של AVIF פי 5 בערך.
ההשפעה על המדד 'המהירות שבה נטען רכיב התוכן הכי גדול' (LCP)
תמונות הן מועמדות נפוצות למדד 'המהירות שבה נטען רכיב התוכן הכי גדול' (LCP). אחת מהמלצות הנפוצות לשיפור מהירות הטעינה של תמונות LCP היא לוודא שהתמונה אופטימיזציה. כשמקטינים את גודל ההעברה של משאב, משפרים את זמן הטעינה של המשאב. זהו אחד מארבעת השלבים העיקריים שצריך לטרגט כשמדובר בתמונות שיכולות להיות רכיבי LCP.
מומלץ מאוד להשתמש ב-CDN לתמונות כשמבצעים אופטימיזציה של תמונות, כי זה דורש הרבה פחות מאמץ מאשר להגדיר צינורות עיבוד נתונים לאופטימיזציה של תמונות בתהליך ה-build של האתר או להשתמש באופן ידני בקבצים הבינאריים של המקודד כדי לבצע אופטימיזציה של תמונות באופן ידני. עם זאת, רשתות CDN של תמונות עשויות להיות אסורות בעלות בפרויקטים מסוימים. אם זה המצב שלכם, מומלץ להביא בחשבון את הדברים הבאים כשמבצעים אופטימיזציה באמצעות המקודד avifenc:
- כדאי להכיר את האפשרויות שהקודק מציע. תוכלו לחסוך עוד יותר ועדיין לשמור על איכות תמונה מספקת על ידי ניסוי עם חלק מתכונות הקידוד הזמינות של AVIF.
- AVIF מספק קידוד עם איבוד נתונים (lossy) וגם קידוד ללא אובדן מידע. בהתאם לתוכן התמונה, סוג קידוד אחד עשוי להניב ביצועים טובים יותר מסוג אחר. לדוגמה, תמונות שמוצגות בדרך כלל כקובצי JPEG יהיו כנראה הכי טובות עם קידוד עם אובדן נתונים, ואילו קידוד ללא אובדן נתונים יתאים יותר לתמונות שמכילות פרטים פשוטים או גרפיקה לינארית שמוצגות בדרך כלל כקובצי PNG.
- אם אתם משתמשים ב-Bundler עם תמיכה מהקהילה בשביל imagemin, כדאי להשתמש בחבילת imagemin-avif כדי לאפשר ל-bundler להפיק וריאציות של תמונה בפורמט AVIF.
התנסות ב-AVIF עשויה לשפר את זמני ה-LCP באתר במקרים שבהם התמונה היא רכיב ה-LCP. במדריך הזה מוסבר איך לבצע אופטימיזציה של LCP.
סיכום
באמצעות libaom, libavif וכלים אחרים בקוד פתוח, תוכלו להשיג את איכות התמונה והביצועים הטובים ביותר באתר שלכם באמצעות AVIF. הפורמט עדיין חדש יחסית, ואנחנו מפתחים אופטימיזציות ושילובים של כלים. אם יש לכם שאלות, תגובות או בקשות להוספת תכונות, תוכלו ליצור קשר ברשימת התפוצה av1-Compliance, בקהילת AOM GitHub וב-AVIF wiki.