אנחנו כותבים לעיתים קרובות על ריבוי האתרים מתמונות, וכלים כמו 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 — בערך באותה תקופה נוספה ל-Chrome תמיכה ב-AVIF — לבין גרסת 3.1.0 האחרונה, נוספו ל-codebase אופטימיזציות משמעותיות של קידוד תמונות סטילס. האפשרויות הן:
- אופטימיזציות של ריבוי שרשורים וקידוד משבצות.
- הפחתה פי 5 בשימוש בזיכרון.
- השימוש במעבד (CPU) ירד פי 6.5, כמוצג בתרשים הבא.
השינויים האלה מפחיתים משמעותית את העלות של קידוד AVIF. בייחוד את העלות של תמונות שנטענים בתדירות הגבוהה ביותר, או את התמונות בעלות העדיפות הגבוהה ביותר באתר. ככל שהקידוד עם שיפור המהירות באמצעות חומרה של AV1 הופך לזמין יותר בשרתים ובשירותי ענן, העלות ליצירת תמונות AVIF תמשיך לרדת.
ליבאוויף
Libavif, ההטמעה של קובצי AVIF, היא כלי לפענוח ושילוב של קובצי AVIF בקוד פתוח, שמשמשים ב-Chrome לפענוח תמונות בפורמט AVIF. אפשר להשתמש בו גם עם libaom כדי ליצור תמונות AVIF מהתמונות הלא דחוסות הקיימות, או כדי להמיר קידוד מתמונות אינטרנט קיימות (JPEG, PNG וכו').
לאחרונה נוספה תמיכה ב-Libavif למגוון רחב יותר של הגדרות מקודד, כולל שילוב עם הגדרות מקודד libaom מתקדמות יותר. אופטימיזציה בצינור העיבוד, כמו המרה מהירה מ-YUV ל-RGB באמצעות libyuv ותמיכה באלפא מראש, מזרזות את תהליך הפענוח. ולסיום, תמיכה במצב הקידוד all-intra שנוסף לאחרונה ב-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 הן:
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 ..
Build 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) |
| --jobs J | שימוש בשרשורים של J worker (ברירת מחדל: 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.
הפרמטר הזה מגדיר את מספר השרשורים שישתמשו ב-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)
תמונות הן מועמדים נפוצות למדד Largest Contentful Paint (LCP). אחת ההמלצות הנפוצות לשיפור מהירות הטעינה של תמונות LCP היא להבטיח אופטימיזציה של תמונה. הקטנת נפח ההעברה של משאב משפרת את זמן הטעינה של המשאב שלו, וזהו אחד מארבעת שלבי המפתח שצריך לטרגט כשמתמודדים עם מועמדי LCP שהם תמונות.
שימוש ב-CDN של תמונה מומלץ מאוד כאשר מבצעים אופטימיזציה של תמונות, מכיוון שהפעולה הזו דורשת הרבה פחות מאמץ מהגדרה של צינורות עיבוד נתונים לאופטימיזציה של תמונות בתהליך ה-build של האתר, או שימוש ידני בקבצים הבינאריים של המקודד כדי לבצע אופטימיזציה ידנית של תמונות. עם זאת, רשתות CDN של תמונות עשויות להיות בעייתיות בפרויקטים מסוימים. במקרה כזה, מומלץ לשקול את הנקודות הבאות כשמבצעים אופטימיזציה באמצעות מקודד avifenc:
- הכר את האפשרויות שמציע המקודד. אפשר לחסוך עוד יותר תוך שמירה על איכות תמונה מספקת באמצעות התנסות בכמה מתכונות הקידוד הזמינות של AVIF.
- פרוטוקול AVIF מספק קידוד עם אובדן נתונים וגם קידוד ללא אובדן נתונים. בהתאם לתוכן התמונה, ייתכן שסוג קידוד אחד יניב ביצועים טובים יותר מסוג אחר. לדוגמה, תמונות שבדרך כלל מוצגות בפורמט JPEG מתאימות ככל הנראה לקידוד עם אובדן נתונים, וקידוד ללא אובדן נתונים הוא כנראה המתאים ביותר לתמונות שמכילות פרטים פשוטים או גרפיקה קווית בדרך כלל בפורמט PNG.
- אם אתם משתמשים ב-bundler עם תמיכה מהקהילה ב-imagemin, מומלץ להשתמש בחבילה imagemin-avif כדי לאפשר ל-bundler להפיק פלט של וריאציות של תמונות בפורמט AVIF.
ביצוע ניסויים עם AVIF יוכל ליישם שיפור בזמני ה-LCP באתר, במקרים שבהם מועמד ה-LCP הוא תמונה. מידע נוסף על אופטימיזציה של LCP זמין במדריך לאופטימיזציה של LCP.
סיכום
באמצעות libaom, libavif וכלים אחרים של קוד פתוח, אפשר לקבל את איכות התמונות והביצועים הטובים ביותר לאתר באמצעות AVIF. הפורמט עדיין חדש יחסית, ומתבצע כרגע פיתוח פעיל של אופטימיזציות וכלים. אם יש לכם שאלות, תגובות או בקשות להוספת תכונות, תוכלו לפנות אל רשימת הדיוור av1-OPEN, קהילת AOM GitHub ווויקי של AVIF.