הצגת תמונות AVIF

1. מבוא

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

מה זה AVIF?

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

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

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

מה תלמדו

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

הדרישות

• כל דפדפן נפוץ.
• כלי לעריכת טקסט
• cmake
• git
• ninja
• תמונה. הוספתי בקישור הזה.
• FFmpeg

2. איך יוצרים תמונות בפורמט AVIF באמצעות Squoosh

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

1. פותחים את Squoosh.
2. גוררים תמונה מקומית אל Squoosh.

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

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

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

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

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

כדי לראות את תמונת ה-AVIF, אתם יכולים לגרור אותה ל-Chrome.

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

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

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

‫Chrome משתמש ב-libavif כדי לעבד תמונות בפורמט AVIF.

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

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

2. משנים את הספרייה ל-libavif.

cd libavif/

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

‫libyuv חשוב להאצת הביצועים של המרות צבעים.

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

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

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

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

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‏ (example.avif) לאותה ספרייה שבה נמצא avif_example.html.

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

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

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

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

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

התקנת FFmpeg במערכת לא נכללת ב-Codelab הזה. מידע נוסף על קבלת FFmpeg במערכת זמין במאמרי העזרה של FFmpeg.

יצרתי קובץ y4m שתוכלו להשתמש בו אם אין לכם קובץ מדיה מקורי: ice_qcif_15fps.y4m. הקובץ הוא מ-Xiph.org Video Test Media.

קבצי Y4m לא דחוסים ולכן הם יכולים להיות גדולים מאוד.

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

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

ffmpeg -i ice_qcif_15fps.y4m animated.avif

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

2. תציג את תמונת ה-AVIF המונפשת בדף אינטרנט.

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

אם אין לכם קובץ מדיה מקורי, אתם יכולים להשתמש בקובץ ה-GIF הזה: ice_qcif_15fps.gif.

פותחים את 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.

3. פותחים את דף האינטרנט ב-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.

קבצי Y4m לא דחוסים ולכן הם יכולים להיות גדולים מאוד.

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

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

יצרתי קובץ y4m שתוכלו להשתמש בו אם אין לכם קובץ מדיה מקורי: ice_qcif_15fps.y4m. הקובץ הוא מ-Xiph.org Video Test Media.

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

./avifenc ice_qcif_15fps.y4m animated.avif

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

3. עיבוד של תמונת AVIF מונפשת בדף אינטרנט.

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

יצרתי קובץ GIF שתוכלו להשתמש בו אם אין לכם קובץ מדיה מקורי: ice_qcif_15fps.gif.

פותחים את 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.

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

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

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

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

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

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

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

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

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

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

8. מעולה!

סיימתם את ה-Codelab בנושא הצגת תמונות בפורמט AVIF.

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