حان الوقت لاستبدال GIF بفيديو AV1

إنه عام 2019 وحان الوقت لاتخاذ قرار بشأن صور GIF (لا، نحن لا نتحدث عن هذا القرار! لن نتفق هنا أبداً! - نحن هنا نتحدث عن النطق باللغة الإنجليزية، بالنسبة لنا، هذا غير مناسب - تقريبًا. ترجمة). تشغل ملفات 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

لدى Google وثائق جيدة تصف العملية.

إنه عام 2019

إنه عام 2019 الآن. إن التقدم يتقدم إلى الأمام، وعلينا أن نواكبه. لدينا حتى الآن خياران لبرنامج الترميز مدعومان على نطاق واسع عبر جميع المتصفحات وأدوات تشفير الفيديو:

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 مع برنامج ترميز بدون حقوق ملكية، AV1.

تذكر أن هدفنا هو تقليص حجم ملفات GIF الضخمة إلى أصغر حجم ممكن لتسريع أوقات التحميل. سيكون عام 2019 غريبًا إذا لم يكن لدينا معيار جديد لضغط الفيديو في ترسانتنا. ولكنه موجود ويسمى AV1. مع AV1 يمكنك ذلك حقق تحسنًا بنسبة 30% تقريبًا في الضغط مقارنةً بـ VP9. ليبوتا! 🙂

AV1 في خدمتك منذ عام 2019!

على أجهزة الكمبيوتر المكتبية

تمت إضافة دعم فك تشفير الفيديو AV1 مؤخرًا إلى إصدارات سطح المكتب جوجل كروم 70 и موزيلا فايرفوكس 65. في الوقت الحالي، يعد دعم Firefox به أخطاء ويمكن أن يتسبب في حدوث أعطال، ولكن يجب أن تتحسن الأمور مع إضافة فك الترميز 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 لنظامك من هنا واستخدم الأوامر أدناه. نستخدم تمريرتين لتحقيق معدل البت المستهدف. للقيام بذلك سوف نقوم بتشغيل 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 إلى 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: بالنسبة إلى Firefox 66 على Linux، ستحتاج إلى تعيين العلامة 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 كيلو بايت في الثانية

هناك الكثير من الحركة هنا، وهي حساسة بشكل خاص عند معدلات البت المنخفضة. يمكنك أن ترى على الفور مدى سوء H.264 عند معدل البت هذا؛ وتظهر المربعات على الفور. يقوم VP9 بتحسين الوضع قليلاً، لكن المربعات لا تزال مرئية. من الواضح أن AV1 يفوز، مما ينتج صورة أفضل بشكل واضح.

H.264

VP9

AV1

المشهد 2 بسرعة 200 كيلو بايت في الثانية

يوجد الكثير من محتوى CGI الشفاف هنا. النتائج ليست مختلفة عن المرة السابقة، ولكن بشكل عام يبدو AV1 أفضل.

H.264

VP9

AV1

المشهد 3 بسرعة 100 كيلو بايت في الثانية

في هذا المشهد، قمنا بخفض معدل البت إلى 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