אנחנו לעיתים קרובות כותבים על כמות גדולה מדי באתרים מתמונות, וכלים כמו Lighthouse מדגישים מקרים שבהם לטעינת התמונה יש השפעה שלילית על חוויית המשתמש, למשל הארכת זמן הטעינה או צמצום רוחב הפס ממשאבים חשובים יותר. דרך אחת לפתור את הבעיה היא להשתמש בשיטת דחיסה מודרנית כדי להקטין את גודל הקובץ של התמונות. אפשרות חדשה למפתחי אתרים היא פורמט תמונה AVIF. הפוסט בבלוג מדבר על העדכונים האחרונים בכלים של קוד פתוח ל-AVIF, מציג את ספריות הקידוד libaom ו-libavif ומוסיף מדריך לשימוש בספריות האלה לקידוד יעיל של תמונות AVIF.
AVIF הוא פורמט תמונה שמבוסס על קודק הווידאו AV1, והוא סטנדרטי על ידי Alliance for Open Media. בפורמט AVIF יש שיפור משמעותי בדחיסה בהשוואה לפורמטים אחרים של תמונות, כמו JPEG ו-WebP. החיסכון המדויק תלוי בתוכן, בהגדרות הקידוד וביעד האיכות, אבל אנחנו ואחרים חוסכים יותר מ-50% לעומת JPEG.
בנוסף, ב-AVIF נוסף קודק ותמיכה בקונטיינרים בתכונות תמונה חדשות כמו High Dynamic Range (טווח דינמי גבוה ו- Wide Color Gamut), סינתזת גרעיניות סרט ופענוח הדרגתי.
מה חדש
מאז השקת התמיכה ב-AVIF ב-Chrome M85, התמיכה ב-AVIF בסביבה העסקית של הקוד הפתוח השתפרה בכמה חזיתות.
ליבום
Libaom הוא מקודד ומפענח AV1 בקוד פתוח שמנוהל על ידי החברות ב-Alliance for Open Media, ומשמש בשירותי הפקה רבים ב-Google ובחברות אחרות החברות במועדון. בין גרסת libaom 2.0.0 – בערך באותה תקופה שבה נוספה תמיכה ב-AVIF ב-Chrome – לבין גרסה 3.1.0 האחרונה, נוספו ל-codebase אופטימיזציה משמעותית של קידוד תמונות סטילס. האפשרויות הן:
- אופטימיזציות לקידוד מרובה שרשורים וקידוד משבצות.
- הפחתה של פי 5 בשימוש בזיכרון.
- ירידה של פי 6.5 בשימוש במעבד (CPU), כפי שמוצג בתרשים למטה.
השינויים האלה מפחיתים משמעותית את עלות הקידוד של ה-AVIF – במיוחד התמונות שנטענו בתדירות הגבוהה ביותר או עם העדיפות הגבוהה ביותר באתר. ככל שקידוד בהאצת חומרה של AV1 יהיה זמין יותר בשרתים ובשירותי ענן, העלות של יצירת תמונות AVIF תמשיך לרדת.
ליבייף
Libavif, שהיא הטמעה של AVIF, היא מקודד ומנתח AVIF בקוד פתוח שמשמש ב-Chrome לפענוח תמונות AVIF. אפשר להשתמש בה גם עם libaom כדי ליצור תמונות AVIF מתמונות לא דחוסות קיימות, או כדי לבצע המרת קידוד מתמונות קיימות לאינטרנט (JPEG, PNG וכו').
לאחרונה הוסיפה ב-Libavif תמיכה במגוון רחב יותר של הגדרות מקודד, כולל שילוב עם הגדרות מתקדמות יותר של מקודד libaom. כדי לזרז את תהליך הפענוח, כדאי לבצע אופטימיזציה של צינור עיבוד הנתונים, כמו המרת YUV ל-RGB באמצעות libyuv ושלבי אלפא מרובים מראש. ולבסוף, התמיכה במצב הקידוד הכולל של ממשק המשתמש החדש שנוסף ב-libaom 3.1.0 מובילה את כל השיפורים ב-libaom שצוינו למעלה.
קידוד תמונות AVIF באמצעות avifenc
דרך מהירה להתנסות ב-AVIF היא Squoosh.app. Squoosh מפעיל גרסת WebAssembly של libavif וחושף הרבה מהתכונות שיש בכלי שורת הפקודה. זו דרך קלה להשוות בין AVIF לפורמטים אחרים של ישן וחדש. קיימת גם גרסת CLI של Squoosh לאפליקציות Node.
עם זאת, ל-WebAssembly עדיין אין גישה לכל הרכיבים הבסיסיים של הביצועים של המעבדים (CPU), כך שאם אתם רוצים להריץ את 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
בנית בהצלחה את 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 | הגדרת רמת הכמות של אלפא ל-Q |
| -a tune=ssim | כוונון ל-SSIM (ברירת המחדל היא כוונון ל-PSNR) |
| --משרות J | שימוש בשרשורי עובדים J (ברירת מחדל: 1) |
| --מהירות S | הגדרת מהירות המקודד מ-0 עד 10 (המהירות הנמוכה ביותר. ברירת המחדל: 6) |
האפשרות ברמת cq מגדירה את רמת הכמות (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 הוא פרמטר שכדאי לשנות בהתאם למספר הליבות שיש במכונה.
הפרמטר הזה מגדיר את מספר ה-threads ש-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.
ההשפעות על Largest Contentful Paint (LCP)
תמונות יכולות להיות מועמדים נפוצים למדד המהירות שבה נטען רכיב התוכן הכי גדול (LCP). אחת ההמלצות הנפוצות לשיפור מהירות הטעינה של תמונות LCP היא לבצע אופטימיזציה של התמונה. צמצום גודל ההעברה של משאב משפר את זמן הטעינה של המשאב. זהו אחד מארבעת השלבים העיקריים שצריך לטרגט כשמטפלים במועמדי LCP שהם תמונות.
השימוש ב-image CDN מומלץ מאוד כאשר מבצעים אופטימיזציה של תמונות, מכיוון שהוא דורש הרבה פחות מאמץ מהגדרת צינורות עיבוד תמונות לאופטימיזציית תמונות בתהליך ה-build של האתר או שימוש ידני בקבצים בינאריים של מקודד כדי לבצע אופטימיזציה של תמונות באופן ידני. עם זאת, רשתות CDN של תמונות עשויות להיות אסורות בעלות בפרויקטים מסוימים. אם זה המצב במקרה שלכם, כדאי לשקול את הדברים הבאים כשמבצעים אופטימיזציה באמצעות מקודד avifenc:
- כדאי להכיר את האפשרויות שהמקודד מציע. אפשר לחסוך עוד יותר ולשמור על איכות תמונה מספקת על ידי ניסויים בחלק מתכונות הקידוד הזמינות של AVIF.
- AVIF מספק קידוד עם איבוד נתונים (Losty) וגם קידוד ללא אובדן מידע. בהתאם לתוכן התמונה, סוג קידוד אחד עשוי להניב ביצועים טובים יותר מסוג אחר. לדוגמה, תמונות שבדרך כלל מוצגות כקובצי JPEG יניבו את הביצועים הטובים ביותר עם קידוד עם איבוד נתונים, ואילו קידוד ללא איבוד נתונים הוא המתאים ביותר לתמונות שמכילות פרטים פשוטים או גרפיקה של קו, שלרוב מוצגות בפורמט PNG.
- אם אתם משתמשים ב-Bundler עם תמיכה מהקהילה בשביל imagemin, כדאי להשתמש בחבילת imagemin-avif כדי לאפשר ל-bundler להפיק וריאציות של תמונה בפורמט AVIF.
עריכת ניסויים ב-AVIF עשויה לעזור לכם לשפר את זמני ה-LCP של האתר במקרים שבהם אלמנט ה-LCP הוא תמונה. מידע נוסף על אופטימיזציה של LCP זמין במדריך לאופטימיזציה של LCP.
סיכום
באמצעות libaom, libavif וכלים אחרים בקוד פתוח, תוכלו לקבל את איכות התמונות והביצועים הטובים ביותר לאתר שלכם באמצעות AVIF. הפורמט עדיין חדש יחסית, ואנחנו מפתחים באופן פעיל שילובים של אופטימיזציות וכלים. אם יש לכם שאלות, תגובות או בקשות להוספת תכונות, תוכלו ליצור קשר ברשימת התפוצה av1-שיחה, בקהילת AOM GitHub וב-AVIF wiki.