الآن هو عام 2019 ، وقد حان الوقت لكي نتخذ قرارًا بشأن GIF ( لا ، إنه لا يتعلق بهذا القرار! هنا لن نتفق أبدًا! - هنا نتحدث عن النطق باللغة الإنجليزية ، ولأننا غير مناسب - الترجمة تقريبًا ). تشغل GIF مساحة كبيرة (عادة بضع ميغابايت!) إذا كنت مطور ويب ، فهذا يتعارض تمامًا مع رغباتك! كمطور ويب ، تريد تقليل الأشياء التي يحتاج المستخدمون إلى تنزيلها بحيث يتم تحميل الموقع بسرعة. للسبب نفسه ، يمكنك تقليل جافا سكريبت ، وتحسين PNG ، JPEG ، وأحيانًا تحويل JPEG إلى WebP . ولكن ماذا تفعل مع GIF القديم؟
إلى أين نذهب ، نحن لسنا بحاجة إلى صور GIF!
إذا كان هدفك هو تحسين سرعة تحميل الموقع ، فأنت بحاجة إلى التخلص من GIF! ولكن كيف بعد ذلك لجعل الصور المتحركة؟ الجواب هو الفيديو. وفي معظم الحالات ، ستحصل على أفضل توفير في المساحة والمساحة من 50 إلى 90٪! في الحياة ، معظم الأشياء لها إيجابيات وسلبيات. عند استبدال ملفات GIF بالفيديو ، لا يمكن العثور على العيوب الأكثر شيوعًا.
يسقط مع جميع متحركة!
لحسن الحظ ، أصبح استبدال GIFs بالفيديو أمرًا شائعًا في السنوات الأخيرة ، لذا فإن جميع الأدوات اللازمة قيد الاستخدام بالفعل. في هذا المنشور ، لن أعيد اختراع العجلة ، لكنني سأحسن فقط من الحلول الحالية. حتى هنا هو جوهر:
- خذ GIF وقم بتحويله إلى فيديو
- قم بترميز الفيديو باستخدام H.264 أو VP9 ، أي ضغط عليه وحزمه في حاوية MP4 أو WebM
- استبدل
<img> بـ GIF متحرك بـ <video> بفيلم - قم بتشغيل التشغيل التلقائي الصامت وحلقة لتحقيق تأثير GIF
لدى Google بعض الوثائق الجيدة التي تصف العملية.
الآن 2019
الآن هو عام 2019. التقدم يسير إلى الأمام ، ويجب علينا مواكبة ذلك. حتى الآن ، لدينا إصداران من برامج الترميز المدعومة على نطاق واسع في جميع المتصفحات وأدوات تشفير الفيديو:
- H.264 - تم تقديمه في عام 2003 والأكثر استخدامًا اليوم
- VP9 - ظهرت في عام 2013 وحققت تحسينًا في الضغط بنسبة 50٪ تقريبًا مقارنة بـ H.264 ، على الرغم من قولهم هنا ، ليس كل شيء ولا يكون دائمًا بهذا الورد
ملاحظة: على الرغم من أن معيار H.265 هو الإصدار التالي من H.264 وهو قادر على التنافس مع VP9 ، إلا أنني لا أعتبر ذلك بسبب ضعف دعم المتصفح ، والذي يظهر على الصفحة https://caniuse.com/#feat=hevc . نفقات الترخيص هي السبب الرئيسي وراء عدم انتشار H.265 على نطاق واسع مثل H.264 ولماذا يعمل تحالف تحالف الوسائط المفتوحة مع برنامج ترميز خالٍ من حقوق الملكية - مع AV1.
تذكر أن هدفنا هو تقليل صور GIF الضخمة إلى أصغر حجم ممكن لتسريع عملية التحميل. سيكون عام 2019 غريبًا إذا لم يكن لدينا معيار جديد لضغط الفيديو في ترسانتنا. لكنه يدعى AV1. مع AV1 ، يمكنك تحقيق تحسن بنسبة 30٪ تقريبًا في الضغط مقارنة بـ VP9 . Lepota! :)
AV1 في خدمتك منذ عام 2019!
على أجهزة الكمبيوتر المكتبية
في الآونة الأخيرة ، تمت إضافة دعم فك تشفير فيديو AV1 على إصدارات سطح المكتب من Google Chrome 70 و Mozilla Firefox 65 . في الوقت الحالي ، أصبح الدعم في Firefox عربات التي تجرها الدواب وقد يتسبب في حدوث أعطال ، ولكن يجب أن تتغير الأمور مع إضافة وحدة فك ترميز dav1d في Firefox 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
لإنشاء GIF ، استخدمت الأمر أدناه. لتقليل الحجم ، قمت بتحجيم GIF إلى 720px و 12 fps بدلاً من الفيديو 24 fps الأصلي.
./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 لكل من المشاهد
فقط مذهل! أليس كذلك؟
ملاحظة: لا يتم عرض أحجام الملفات VP9 و H264 ، نظرًا لأنهما لا يختلفان عمليًا عن AV1 نظرًا لاستخدام نفس معدل البت. سيكون من الضروري إضافة عمودين إضافيين بنفس الأبعاد ، فقط للتأكيد على أن برامج الترميز هذه تنتج جودة أفضل بكثير من ملفات GIF ذات أحجام ملفات أصغر بكثير.