הצגת תמונות AVIF

1. מבוא

תמונות מהוות יותר מ-60% מהבייטים שנדרשים בממוצע לטעינת דף אינטרנט. שימוש ב-AVIF מאפשר להקטין את התמונות ולהגביר את הטעינה של האתר.

מה זה AVIF?

AVIF הוא פורמט תמונה חדש שנגזר מהביטים של הווידאו AV1. טכנולוגיית AVIF נבנה כדי לשפר את יעילות הדחיסה.

למה כדאי להשתמש ב-AVIF?

תמונות בפורמט AVIF קטנות בהרבה מתמונות בפורמט JPEG, PNG, GIF או WebP באיכות זהה או טובה יותר.

מה תלמדו

  • איך יוצרים תמונות בפורמט AVIF מהתמונות
  • איך לעבד תמונות AVIF בדף אינטרנט

למה תזדקק?

2. יצירת תמונות AVIF באמצעות Squoosh

Squoosh היא אפליקציית אינטרנט לדחיסת תמונות. עם squoosh, תוכלו לדחוס בקלות את התמונות לתמונות בפורמט AVIF.

  1. פותחים את https://squoosh.app
  2. משחררים תמונה מקומית ב-Squoosh.

צילום מסך של Squoosh

  1. בוחרים באפשרות AVIF מהתיבה הנפתחת 'דחיסה'.

תיבה נפתחת ב-Squoosh

לאחר מכן, Squoosh יידחס את התמונה לתמונה בפורמט AVIF. לאחר ש-Squoosh יסתיים, יופיע לחצן הורדה עם נתונים סטטיסטיים מסוימים על תמונת ה-AVIF בפינה השמאלית התחתונה.

לחצן הורדה ב-Squoosh

גודל התמונה המקורית לדוגמה הוא 3,340 kB והתמונה הדחוסה היא 378 kB. התמונה לדוגמה נדחסה כמעט פי 10 פחות מהתמונה המקורית.

  1. הורדת תמונת ה-AVIF

לוחצים על לחצן ההורדה ותמונת ה-AVIF תישמר באחסון המקומי.

עכשיו יש לכם תמונת AVIF משלכם.

3. פיתוח מקודד של שורת הפקודה avifenc

avifenc היא אפליקציית שורת פקודה שיכולה להמיר תמונות PNG ו-JPEG לתמונות AVIF. avifenc משתמשת ב-libavif, ספרייה שיכולה לפענח ולקודד תמונות AVIF. אם רוצים להמיר הרבה תמונות ל-AVIF, כדאי להשתמש במקודד שורת הפקודה avifenc.

  1. מקבלים את הקוד.
git clone https://github.com/AOMediaCodec/libavif.git
  1. שינוי הספרייה ל-libavif.
cd libavif/

יש הרבה דרכים שונות להגדיר את avifenc ו-libavif לפיתוח. מידע נוסף זמין בכתובת libavif. אנחנו מתכננים לפתח את כלי ה-avifenc כך שיהיה מקושר סטטי למקודד-Av1 ולספריית המפענח, libaom.

  1. קבלה ופיתוח של libaom.

שינוי לספריית התוספים של libavif.

cd ext

הפקודה הבאה תשלוף את קוד המקור של libaom ותבנה את ה-libaom באופן סטטי.

./aom.cmd

שינוי הספרייה ל-libavif.

cd ../
  1. לפתח את כלי הקידוד של שורת הפקודה avifenc.

כדאי ליצור ספריית build ל-avifenc.

mkdir build

שינוי לספריית ה-build.

cd build

יוצרים את קובצי ה-build של avifenc.

cmake -DCMAKE_BUILD_TYPE=Release -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

יוצרים avifenc.

make

בנית בהצלחה את avifenc!

4. יצירת תמונות AVIF באמצעות avifenc

  1. יצירת תמונת AVIF עם הגדרות ברירת המחדל.

הפרמטרים הבסיסיים ביותר להרצה של avifenc הם הגדרת קובצי הקלט והפלט.

./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

ל-Avifenc יש הרבה אפשרויות שישפיעו גם על האיכות וגם על המהירות. כדי לראות את האפשרויות ולקבל מידע נוסף עליהן, פשוט צריך להריץ את ./avifenc

עכשיו יש לכם תמונת AVIF שנייה משלכם.

  1. האצת המקודד.

פרמטר אחד שכדאי לשנות בהתאם למספר הליבות שיש במחשב הוא הפרמטר --jobs. הפרמטר הזה מגדיר את מספר ה-threads ש-avifenc ישתמש בהם כדי ליצור תמונות AVIF. אפשר לנסות להריץ את שורת הפקודה הזו.

./avifenc happy_dog.jpg example.avif --jobs 8

זה מנחה את avifenc להשתמש ב-8 תהליכונים במקביל ליצירת תמונת AVIF. במחשב שלי, הקידוד של ה-AVIF מהיר פי 5.

5. עיבוד תמונות AVIF בדף אינטרנט.

בואו נראה לעולם את העבודה הקשה שלכם.

  1. יש ליצור דף אינטרנט כדי להציג את תמונת ה-AVIF.

יוצרים קובץ בשם avif_example.html.

פותחים את avif_example.html בכלי לעריכת טקסט ומקלידים את הקוד הבא:

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

מעתיקים את קובץ המקור (במקרה שלי happy_dog.jpg) ואת קובץ ה-AVIF (eaxmple.avif) לאותה ספרייה כמו avif_example.html.

אנחנו משתמשים ברכיב כדי לעבד את תמונת ה-AVIF אם הדפדפן תומך ב-AVIF, עם חלופה ל-JPEG אם הדפדפן לא תומך ב-AVIF. מידע נוסף על

  1. פתיחת דף האינטרנט ב-Chrome.

אחת מהדרכים לפתוח את קובץ ה-HTML היא לגרור את avif_example.html אל Chrome. אפשרות נוספת לפתיחת קובץ ה-HTML היא להציג את avif_example.html משרת HTTP.

עכשיו תמונת ה-AVIF אמורה להיות מעובדת ב-Chrome. כדי לבדוק זאת, לוחצים לחיצה ימנית על התמונה ובוחרים באפשרות Save image as.... כך תיפתח תיבת דו-שיח עם example.avif. אפשרות אחרת היא לפתוח את הכלים למפתחים ב-Chrome ולראות שההורדה של example.avif הושלמה.

6. המערכת יוצרת תמונות AVIF מונפשות

  1. המרת מדיה של המקור לפורמט y4m.

ב-avifenc יש תמיכה ב-y4m כקלט ליצירת תמונות AVIF מונפשות. אפשרות מצוינת ליצירת קובצי y4m היא להשתמש ב-FFmpeg.

ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m
  1. יצירת תמונת AVIF מונפשת.

מריצים את הפקודה הזו כדי ליצור תמונת AVIF מונפשת מקובץ y4m.

avifenc ice_qcif_15fps.y4m animated.avif

עכשיו יש לכם תמונת AVIF מונפשת משלכם.

  1. עיבוד תמונת ה-AVIF המונפשת בדף אינטרנט.

יוצרים קובץ בשם avif_animated_example.html.

פותחים את avif_animated_example.html בכלי לעריכת טקסט ומקלידים את הקוד הבא:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

מעתיקים את קובץ המקור (במקרה שמעל ice_qcif_15fps.gif) ואת קובץ ה-AVIF (animated.avif) לאותה ספרייה כמו avif_animated_example.html.

  1. פתיחת דף האינטרנט ב-Chrome.

אחת מהדרכים לפתוח את קובץ ה-HTML היא לגרור את avif_animated_example.html אל Chrome. אפשרות נוספת לפתיחת קובץ ה-HTML היא להציג את avif_animated_example.html משרת HTTP.

עכשיו יש לעבד את תמונת ה-AVIF המונפשת ב-Chrome.

אם אתם משתמשים במדיה לדוגמה שסופקה, היא אמורה להיראות כך:

אנימציה של זירת החלקה על הקרח

ניתן לבדוק שזו תמונת AVIF מונפשת על ידי לחיצה ימנית על התמונה ובחירה ב-Save image as..., שאמורה לפתוח תיבת דו-שיח עם animated.avif. אפשרות אחרת היא לפתוח את הכלים למפתחים ב-Chrome ולראות שההורדה של animated.avif הושלמה.

7. מעולה!

סיימת את שיעור ה-Lab לקוד תמונות AVIF.

אני מקווה שברור לכם איך טכנולוגיית AVIF יכולה לעזור להקטין את התמונות שלכם ולשדר אותן בצורה יעילה יותר באינטרנט. אפשר לקרוא מידע נוסף על התכונות של AVIF בפוסט מעולה של ג'ייק ארצ'יבלד.