הגיע הזמן להחליף GIF בסרטון AV1

זה 2019 והגיע הזמן שנחליט על GIFs (לא, אנחנו לא מדברים על ההחלטה הזו! לעולם לא נסכים כאן! - כאן אנחנו מדברים על הגייה באנגלית, לנו זה לא רלוונטי - בערך. תִרגוּם). קובצי GIF תופסים כמות עצומה של מקום (בדרך כלל כמה מגה-בייט!), מה שאם אתה מפתח אינטרנט, מנוגד לחלוטין לרצונותיך! כמפתח אינטרנט, אתה רוצה למזער את הדברים שמשתמשים צריכים להוריד כדי שהאתר ייטען במהירות. מאותה סיבה, אתה מצמצם JavaScript, מייעל PNG, JPEG ולפעמים ממיר JPEG ל- WebP. אבל מה לעשות עם ה-GIF הישן?

לא נצטרך קובצי GIF לאן שאנחנו הולכים!

אם המטרה שלך היא לשפר את מהירות טעינת האתר, אז אתה צריך להיפטר מקובצי GIF! אבל איך אם כן יוצרים תמונות מונפשות? התשובה היא וידאו. וברוב המקרים, תקבלו איכות טובה יותר וחיסכון במקום של 50-90%! בחיים, לרוב הדברים יש יתרונות וחסרונות. כאשר אתה מחליף GIF בווידאו, לרוב לא תוכל למצוא שום חסרונות.

תפסיק עם כל קובצי ה-GIF!

למרבה המזל, החלפת קובצי GIF בסרטונים הייתה דבר שבשגרה בשנים האחרונות, כך שכל הכלים הדרושים כבר נמצאים בשימוש. בפוסט הזה לא אמציא את הגלגל מחדש, אלא רק אשפר במעט את הפתרונות הקיימים. אז הנה התמצית:

1. קח GIF והמר אותו לסרטון
2. מקודד את הסרטון באמצעות H.264 או VP9, ​​כלומר. דחוס אותו וארוז אותו במיכל MP4 או WebM
3. החלף <img> עם GIF מונפש <video> עם רולר
4. הפעל הפעלה אוטומטית ללא צליל ולופ לקבלת אפקט GIF

לגוגל יש תיעוד טוב המתאר את התהליך.

זה 2019

עכשיו 2019. ההתקדמות מתקדמת, ואנחנו חייבים להמשיך איתה. עד כה היו לנו שתי אפשרויות codec הנתמכות באופן נרחב בכל הדפדפנים וכלי קידוד הווידאו:

1. H.264 - הוצג בשנת 2003 והנפוץ ביותר כיום
2. VP9 - הופיע בשנת 2013 והשיג שיפורי דחיסה של כמעט 50% בהשוואה ל-H.264, אם כי כפי שהם כותבים כאן לא תמיד הכל כל כך ורוד

הערה: למרות ש-H.265 היא הגרסה הבאה של H.264 ומסוגלת להתחרות ב-VP9, אני לא מחשיב אותה בגלל תמיכה לקויה בדפדפן, כפי שמוצג בעמוד https://caniuse.com/#feat=hevc. עלויות הרישוי הן הסיבה העיקרית לכך ש-H.265 לא הפך לנפוץ כמו H.264 ומדוע קונסורציום Alliance of Open Media עובד עם codec ללא תמלוגים, AV1.

זכור, המטרה שלנו היא לכווץ קובצי GIF ענקיים לגודל הקטן ביותר האפשרי כדי להאיץ את זמני הטעינה. זו תהיה 2019 מוזרה אם לא היה לנו תקן חדש לדחיסת וידאו בארסנל שלנו. אבל הוא קיים ונקרא AV1. עם AV1 אתה יכול להשיג שיפור של כ-30% בדחיסה בהשוואה ל-VP9. לפוטה! 🙂

AV1 לשירותכם מאז 2019!

על שולחנות עבודה

לאחרונה נוספה תמיכה בפענוח וידאו AV1 לגרסאות שולחן העבודה 70 של Google Chrome и מוזילה פיירפוקס 65. כרגע התמיכה בפיירפוקס היא בעייתית ויכולה לגרום לקריסות, אבל דברים אמורים להשתפר עם התוספת של מפענח dav1d כבר בפיירפוקס 67 (כבר שוחרר, אבל התמיכה הופיעה - משוער. תרגום). לפרטים על הגרסה החדשה קראו - שחרור dav1d 0.3.0: מהיר עוד יותר!

בסמארטפונים

כרגע אין תמיכת חומרה לסמארטפונים בגלל היעדר מפענחים מתאימים. אתה יכול לעשות פענוח תוכנה, אם כי זה יוביל לצריכת סוללה מוגברת. ה-SOCs הניידים הראשונים התומכים בפענוח חומרה של AV1 יופיעו ב-2020.

ואז קוראי המאמר אומרים, "אז אם טלפונים ניידים עדיין לא תומכים בו כראוי, למה להשתמש ב-AV1?"

AV1 הוא codec חדש למדי, ואנחנו ממש בתחילת ההסתגלות שלו. חשבו על המאמר הזה כשלב "בזמן שאתם מבשלים, הקהל יעקוב". תמיכה בשולחן העבודה כשלעצמה תאיץ אתרים עבור חלק מהקהל. ו-codec ישנים יכולים לשמש כתרחיש חלופי כאשר AV1 אינו נתמך במכשיר היעד. אבל כשהמשתמשים יעברו למכשירים עם תמיכה ב-AV1, הכל יהיה מוכן. כדי להשיג זאת, עלינו ליצור תג וידאו כפי שמוצג להלן, אשר יאפשר לדפדפן לבחור את הפורמט המועדף עליו - AV1 - >> VP9 - >> H.264. ובכן, אם למשתמש יש מכשיר ישן מאוד או נווט שאינו תומך בוידאו כלל (וזה מאוד לא סביר עם H264), אז הוא פשוט יראה את ה-GIF

<video style="display:block; margin: 0 auto;" autoplay loop muted playsinline poster="RollingCredits.jpg">
  <source src="media/RollingCredits.av1.mp4" type="video/mp4">
  <source src="media/RollingCredits.vp9.webm" type="video/webm">
  <source src="media/RollingCredits.x264.mp4" type="video/mp4">
  <img src="media/RollingCredits.gif">
</video>

יצירת AV1

יצירת סרטונים ב-AV1 היא קלה. הורד את בניית ה-ffmpeg העדכנית ביותר עבור המערכת שלך מכאן והשתמש בפקודות למטה. אנו משתמשים ב-2 מעברים כדי להשיג את קצב הסיביות היעד. לשם כך נריץ את ffmpeg פעמיים. בפעם הראשונה אנחנו כותבים את התוצאה לקובץ לא קיים. פעולה זו תיצור יומן שיהיה צורך בהפעלה השנייה של ffmpeg.

# Linux or Mac
## Проход 1
ffmpeg -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 /dev/null && 
## Проход 2
ffmpeg -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4

# Windows
## Проход 1
ffmpeg.exe -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 NUL && ^
## Проход 2
ffmpeg.exe -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4

להלן פירוט של הפרמטרים:

-i - Входной файл.

-pix_fmt - Используем формат 4:2:0 для выбора информации о цветности в видео. Существует много других возможных форматов, но 4:2:0 наиболее совместимый.

-c:v - Какой кодек использовать, в нашем случае - AV1.<br />
-b:v – Средний битрейт, которого мы хотим добиться.

-filter:v scale - Фильтр масштаба ffmpeg используется для уменьшения разрешения видео. Мы устанавливаем X:-1 что говорит ffmpeg уменьшить ширину до X, сохранив соотношение сторон.

-strict experimental - Надо указать, т.к. AV1 достаточно новый кодек.

-cpu-used - Ужасно названный параметр, который на самом деле используется для выбора уровня качества видео. Возможные значения 0-4. Чем меньше значение, тем лучше качество и, соответственно, больше время, которое займёт кодировка.

-tile-columns - Для использования нескольких тредов. Говорит AV1 разбить видео на отдельные колонки, которые могут быть перекодированы независимо для лучшей утилизации ЦПУ.

-row-mt – Тоже, что и предыдущий параметр, но разбивает так же на строки внутри колонок.

-threads - Количество тредов.

-pass - Какой проход сейчас выполняется.

-f - Используется только при первом проходе. Указывает формат выходного файла, т.е. MP4 в нашем случае.

-movflags faststart - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.

יצירת GIF

כדי ליצור את ה-GIF השתמשתי בפקודה למטה. כדי להקטין את הגודל, שיניתי את ה-GIF ל-720px רוחב ו-12 fps במקום הסרטון המקורי של 24fps.

./ffmpeg -i /mnt/c/Users/kasing/Desktop/ToS.mov -ss 00:08:08 -t 12
-filter_complex "[0:v] fps=12,scale=720:-1" -y scene2.gif

תוצאות הבדיקה

עדיף לראות פעם אחת מאשר לקרוא מאה פעמים, נכון? בואו נוודא שה-AV1 הוא הבחירה הנכונה למטרותינו. צילמתי את הסרטון Tears Of Steel החינמי הזמין כאן https://mango.blender.org/, והמיר אותו תוך שימוש בערך באותו קצב סיביות עבור AV1, VP9, ​​H.264 codec. התוצאות מופיעות למטה כדי שתוכל להשוות ביניהן בעצמך.

הערה 1: אם הקובץ למטה לא נטען עבורך, ייתכן שהגיע הזמן לעדכן את הדפדפן שלך. אני ממליץ על דפדפן מבוסס Chromium כגון Chrome, Vivaldi, Brave או Opera. הנה המידע העדכני ביותר על תמיכת AV1 https://caniuse.com/#feat=av1

הערה 2: עבור Firefox 66 על לינוקס תצטרך להגדיר את הדגל media.av1.enabled לתוך משמעות true в about:config

הערה 3: החלטתי לא לכלול קובצי GIF רגילים למטה בגלל גודלם הגדול וכמות הנתונים שנדרש כדי לטעון את הדף הזה! (וזה יהיה אירוני, שכן דף זה עוסק בהפחתת כמות הנתונים בדף :)). אבל אתה יכול לראות את קובצי ה-GIF הסופיים כאן https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

הערת המתרגם: Habr לא מאפשר לך להפעיל הפעלה אוטומטית וללולאה של הקובץ, אז אתה יכול רק להעריך את האיכות. אתה יכול לראות איך "תמונות האנימציה" ייראו בשידור חי מאמר מקורי.

סצנה 1 @ 200 Kbps

יש כאן הרבה תנועה, שהיא רגישה במיוחד בקצבי סיביות נמוכים. אתה יכול מיד לראות עד כמה H.264 גרוע בקצב הסיביות הזה; הריבועים נראים מיד. VP9 משפר מעט את המצב, אבל הריבועים עדיין גלויים. AV1 מנצח בבירור, ומפיק תמונה ברורה יותר.

H.264

VP9

AV1

סצנה 2 @ 200 Kbps

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

H.264

VP9

AV1

סצנה 3 @ 100 Kbps

בסצנה זו, אנו מנמיכים את קצב הסיביות ל-100 Kbps והתוצאות עקביות. AV1 שומרת על ההובלה שלו גם בקצבי סיביות נמוכים!

H.264

VP9

AV1

דובדבן על העוגה

כדי לסיים את המאמר הזה בהרגשה של כמות רוחב הפס שנחסכה בהשוואה ל-GIF - הגודל הכולל של כל הסרטונים גבוה יותר... 1.62 מגהבייט!! ימין. כמה פאקינג 1,708,032 בתים! לשם השוואה, הנה גדלי הווידאו GIF ו-AV1 עבור כל סצנה

GIF
AV1

סצנה 1
11.7 MB
0.33 MB

סצנה 2
7.27 MB
0.18 MB

סצנה 3
5.62 MB
0.088 MB

פשוט מדהים! האין זה?

הערה: גדלי הקבצים של VP9 ו-H264 אינם נתונים, מכיוון שהם כמעט אינם שונים מ-AV1 עקב השימוש באותו קצב סיביות. זה יהיה מיותר להוסיף עוד שתי עמודות עם אותם גדלים, רק כדי להדגיש שקודקים אלה מייצרים איכות הרבה יותר טובה מ-GIF בגדלים קטנים בהרבה.

מקור: www.habr.com