زمان آن رسیده است که ویدیوی AV1 را جایگزین GIF کنید

سال 2019 است و زمان آن فرا رسیده است که در مورد GIF تصمیم بگیریم (نه، ما در مورد این تصمیم صحبت نمی کنیم! ما هرگز در اینجا به توافق نخواهیم رسید! - در اینجا ما در مورد تلفظ به زبان انگلیسی صحبت می کنیم، برای ما این موضوع مهم نیست - تقریبا. ترجمه). گیف ها فضای بسیار زیادی را اشغال می کنند (معمولاً چندین مگابایت!) که اگر توسعه دهنده وب باشید کاملاً بر خلاف میل شماست! به عنوان یک توسعه دهنده وب، شما می خواهید مواردی را که کاربران باید دانلود کنند به حداقل برسانید تا سایت به سرعت بارگذاری شود. به همین دلیل، جاوا اسکریپت را کوچک می کنید، PNG، JPEG را بهینه می کنید و گاهی اوقات تبدیل می کنید JPEG به WebP. اما با GIF قدیمی چه باید کرد؟

جایی که می خواهیم به GIF نیازی نخواهیم داشت!

اگر هدف شما بهبود سرعت بارگذاری سایت است، پس باید از شر فایل های GIF خلاص شوید! اما چگونه می توان تصاویر متحرک ساخت؟ پاسخ ویدئو است. و در بیشتر موارد، کیفیت بهتر و صرفه جویی در فضا بین 50-90٪ دریافت خواهید کرد! در زندگی، بیشتر چیزها مزایا و معایب خود را دارند. وقتی GIF را با ویدیو جایگزین می‌کنید، اغلب نمی‌توانید هیچ نقطه ضعفی پیدا کنید.

مرگ همه گیف ها!

خوشبختانه، در سال‌های اخیر جایگزین کردن فایل‌های GIF با ویدیوها رایج بوده است، بنابراین همه ابزارهای لازم در حال حاضر استفاده می‌شوند. در این پست، من چرخ را دوباره اختراع نمی کنم، بلکه فقط کمی راه حل های موجود را بهبود می بخشم. پس اصل مطلب اینجاست:

1. یک GIF بگیرید و آن را به ویدیو تبدیل کنید
2. ویدیو را با استفاده از H.264 یا VP9 رمزگذاری کنید. آن را فشرده کرده و در کانتینر MP4 یا WebM قرار دهید
3. جایگزین کردن <img> با GIF متحرک روشن <video> با غلتک
4. پخش خودکار بدون صدا و حلقه را برای جلوه GIF روشن کنید

گوگل اسناد خوبی برای توصیف این فرآیند دارد.

2019 است

الان 2019 است. پیشرفت رو به جلو حرکت می کند و ما باید با آن پیش برویم. تاکنون دو گزینه کدک داشته ایم که به طور گسترده در تمام مرورگرها و ابزارهای رمزگذاری ویدیو پشتیبانی می شوند:

1. H.264 - در سال 2003 معرفی شد و امروزه بیشترین استفاده را دارد
2. VP9 - در سال 2013 ظاهر شد و در مقایسه با H.50 تقریباً 264 درصد به بهبود فشرده سازی دست یافت، اگرچه همانطور که اینجا می نویسند همه چیز همیشه گلگون نیست

توجه: اگرچه H.265 نسخه بعدی H.264 است و قابلیت رقابت با VP9 را دارد، اما به دلیل پشتیبانی ضعیف مرورگر، همانطور که در صفحه نشان داده شده است، آن را در نظر نمی‌گیرم. https://caniuse.com/#feat=hevc. هزینه های مجوز دلیل اصلی عدم گسترش H.265 به اندازه H.264 و اینکه چرا کنسرسیوم Alliance of Open Media با یک کدک بدون حق امتیاز، AV1 کار می کند، است.

به یاد داشته باشید، هدف ما این است که GIF های عظیم را به کوچکترین اندازه ممکن کاهش دهیم تا زمان بارگذاری را تسریع کنیم. اگر استاندارد جدیدی برای فشرده سازی ویدئو در زرادخانه خود نداشته باشیم، سال 2019 عجیب خواهد بود. اما وجود دارد و AV1 نام دارد. با AV1 می توانید در مقایسه با VP30، تقریباً 9٪ بهبود در فشرده سازی حاصل می شود. لپوتا! 🙂

AV1 از سال 2019 در خدمت شما است!

روی دسکتاپ

اخیراً پشتیبانی از رمزگشایی ویدیوی AV1 به نسخه های دسکتاپ اضافه شده است گوگل کروم 70 и موزیلا فایرفاکس 65. در حال حاضر پشتیبانی از فایرفاکس باگ است و می تواند باعث خرابی شود، اما با افزودن آن، همه چیز باید بهبود یابد رسیور dav1d در حال حاضر در فایرفاکس 67 (قبلا منتشر شده است، اما پشتیبانی ظاهر شده است - تقریبا ترجمه.). برای جزئیات بیشتر در مورد نسخه جدید بخوانید - انتشار dav1d 0.3.0: حتی سریعتر!

در گوشی های هوشمند

در حال حاضر به دلیل عدم وجود رمزگشای مناسب، پشتیبانی سخت افزاری برای گوشی های هوشمند وجود ندارد. شما می توانید رمزگشایی نرم افزاری انجام دهید، اگرچه این منجر به افزایش مصرف باتری می شود. اولین SOC های موبایلی که از رمزگشایی سخت افزاری AV1 پشتیبانی می کنند در سال 2020 ظاهر خواهند شد.

و سپس خوانندگان مقاله می گویند، "پس اگر تلفن های همراه هنوز به درستی از آن پشتیبانی نمی کنند، چرا از AV1 استفاده کنیم؟"

AV1 یک کدک نسبتاً جدید است و ما در ابتدای تطبیق آن هستیم. این مقاله را به عنوان مرحله "هنگامی که شما آشپزی می کنید، جمعیت دنبال می کنند" فکر کنید. پشتیبانی از دسکتاپ به خودی خود باعث افزایش سرعت سایت برای برخی از مخاطبان می شود. و زمانی که 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 از دستور زیر استفاده کردم. برای کاهش اندازه، به جای ویدیوی اصلی با سرعت 720 فریم در ثانیه، گیف را به 12 پیکسل عرض و 24 فریم بر ثانیه افزایش دادم.

./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 تبدیل کرد. نتایج در زیر آمده است تا بتوانید خودتان آنها را با هم مقایسه کنید.

یادداشت 1: اگر فایل زیر برای شما بارگیری نشد، ممکن است زمان آن رسیده باشد که مرورگر خود را به روز کنید. من یک مرورگر مبتنی بر Chromium مانند Chrome، Vivaldi، Brave یا Opera را توصیه می کنم. در اینجا آخرین اطلاعات در مورد پشتیبانی AV1 آمده است https://caniuse.com/#feat=av1

یادداشت 2: برای فایرفاکس 66 در لینوکس باید پرچم را تنظیم کنید media.av1.enabled به معنا true в about:config

یادداشت 3: من تصمیم گرفتم که 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 کیلوبیت بر ثانیه کاهش می دهیم و نتایج ثابت است. 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