הצגת תמונות AVIF

1. מבוא

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

מה זה AVIF?

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

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

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

מה תלמדו

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

הדרישות

כל דפדפן מוביל.
כלי לעריכת טקסט
cmake
git
ninja
תמונה. צירפתי אותו כאן
FFmpeg

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

‫Squoosh היא אפליקציית אינטרנט לדחיסת תמונות. בעזרת Squoosh אפשר לדחוס בקלות את התמונות לפורמט AVIF.

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

צילום מסך של Squoosh

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

התפריט הנפתח של Squoosh

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

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

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

הורדת תמונה בפורמט AVIF

לוחצים על לחצן ההורדה והתמונה בפורמט AVIF תינשמר בכונן המקומי.

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

3. בניית מקודד שורת הפקודה avifenc

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

מקבלים את הקוד.

git clone https://github.com/AOMediaCodec/libavif.git

עוברים לספרייה libavif.

cd libavif/

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

בונים את כלי שורת הפקודה לקידוד, avifenc.

מומלץ ליצור ספריית build עבור avifenc.

mkdir build

עוברים לספריית ה-build.

cd build

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

cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

מבצעים Build של avifenc.

make

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

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

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

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

./avifenc happy_dog.jpg example.avif

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

שינוי האיכות של קידוד AVIF.

בדרך כלל, הפרמטר היחיד שאולי תרצו לשנות בקידוד AVIF הוא הפרמטר quality. ‫quality הוא פרמטר שמשמש להחלפת איכות של תמונה דחוסה בגודל הקובץ. לדוגמה, קובץ באיכות גבוהה (-q 90) יהיה גדול בהרבה מקובץ באיכות נמוכה (-q 20), אבל הוא ייראה הרבה יותר טוב.

5. הצגת תמונות AVIF בדף אינטרנט.

עכשיו נציג לעולם את כל העבודה הקשה שלכם.

יוצרים דף אינטרנט להצגת תמונת ה-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.

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

פותחים דף אינטרנט ב-Chrome.

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

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

6. יצירת תמונות AVIF מונפשות באמצעות FFmpeg

יצירת תמונת AVIF מונפשת.

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

ffmpeg -i ice_qcif_15fps.y4m animated.avif

עכשיו יש לכם תמונת AVIF עם אנימציה משלכם!

הצגת תמונת 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.

פותחים דף אינטרנט ב-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. יצירת תמונות AVIF מונפשות באמצעות avifenc

ממירים את מדיה המקור לפורמט y4m.

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

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m

יצירת תמונת AVIF מונפשת.

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

./avifenc ice_qcif_15fps.y4m animated.avif

עכשיו יש לכם תמונה שנייה משלכם בפורמט AVIF עם אנימציה.

הצגת תמונת 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.

פותחים דף אינטרנט ב-Chrome.

עכשיו תמונת ה-AVIF עם האנימציה אמורה להיות מוצגת ב-Chrome.

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

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

שינוי האיכות של קידוד AVIF.

הקובץ ice_qcif_15fps.gif גדול פי 7 בערך ואיכותי הרבה פחות. כדי לשנות את האיכות של AVIF כך שתהיה דומה לאיכות של ice_qcif_15fps.gif, צריך לשנות את פרמטר האיכות ל-20.

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

עכשיו קובץ ה-AVIF המונפש וקובץ ה-GIF‏ ice_qcif_15fps.gif הם באיכות דומה, אבל קובץ ה-GIF גדול פי 22 בערך.

8. מעולה!

סיימתם את שיעור ה-Lab בנושא הצגת תמונות AVIF.

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