הצגת תמונות 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,340KB, והתמונה הדחוסה היא בגודל 378KB. התמונה לדוגמה נדחסה והיא קטנה פי 10 מהתמונה המקורית!

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

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

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

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

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

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

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

  1. יוצרים את כלי שורת הפקודה לקידוד, 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

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

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

./avifenc happy_dog.jpg example.avif

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

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

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

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.

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

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

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

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

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

  1. תיצור תמונה מונפשת בפורמט AVIF.

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

ffmpeg -i 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. יצירת תמונות AVIF מונפשות באמצעות avifenc

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

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

ffmpeg -i input.gif -pix_fmt yuvj444p -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 הורד.

  1. שינוי האיכות של קידוד 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.