آخر المعلومات حول كيفية استخدام AVIF في المنظومة المتكاملة.
AVIF هو تنسيق صور جديد يكتسب رواجًا سريعًا على الويب بسبب معدّلات الضغط العالية والأداء الفعال ومعدّل الاستخدام الواسع النطاق. إنّ AVIF هو تنسيق صور مفتوح وغير خاضع لحقوق الملكية ويستند إلى برنامج ترميز الفيديو AV1 الذي حدّده تحالف الوسائط المفتوحة. ستقدّم مشاركة المدونة هذه نظرة عامة حول كيفية استخدام AVIF في المنظومة المتكاملة، وما نوع المزايا المتعلّقة بالأداء والجودة التي يمكن أن يتوقّعها المطوّرون من AVIF للصور الثابتة والصور المتحركة.
ما هي الميزات الجديدة في منظومة AVIF المتكاملة؟
منذ إطلاق AVIF في Chrome وFirefox وSafari، بدأ استخدام AVIF على الويب في تزايد مستمر، وتقريبًا كل المتصفحات تتيح استخدام AVIF اليوم.
أمّا في Chrome وحده، فقد ازداد استخدام AVIF إلى حوالى واحد في المئة خلال أكثر من عام بقليل بعد أن أضاف Chrome دعم AVIF بشكل ثابت.
يتم حاليًا عرض صور AVIF في عدد من شبكات توصيل الصور، مثل Akamai وCloudflare وCloudinary وImgix. في مشاركة مدوّنة أعلنت فيها عن إتاحة استخدام AVIF، أبلغَت شركة Imgix أنّ حجم الملفات أقل بنسبة% 60 مقارنةً بتنسيق JPEG وبنسبة% 35 مقارنةً بتنسيق WebP. تؤدي هذه التوفيرات في حجم الملفات إلى توفير مساحة تخزين كبيرة، ولكنّها تساعد أيضًا في تحميل الصفحات بشكل أسرع، ما يؤدي إلى زيادة سرعة سرعة عرض أكبر محتوى مرئي (LCP). إنّ مقياس LCP هو أحد مؤشرات أداء الويب الأساسية، ويمثّل سرعة تحميل أكبر جزء من المحتوى على الصفحة. إنّ استخدام برامج ترميز حديثة لضغط الصور هو أحد الأساليب الرئيسية لتقليل سرعة LCP. Lighthouse هي أداة رائعة للمطوّرين في Chrome لاختبار موقعك الإلكتروني ومعرفة مقدار ما سيتم توفيره من خلال AVIF.
WordPress هو النظام الأساسي الأكثر رواجًا للمواقع الإلكترونية في العالم، ويتوفّر عدد من المكوّنات الإضافية المتوفّرة للمطوّرين لتحويل صورهم إلى تنسيق AVIF، مثل:
وبالنسبة إلى المزيد من المطوّرين التفاعليين، تُعدّ أدوات مثل ImageMagick وFFmpeg نقطة انطلاق جيدة.
سرعة ترميز AVIF
يجب الاهتمام بسرعة الترميز والجودة المرئية العالية لنشر ضغط الصور على نطاق واسع. لقد تحسنت سرعة ترميز برامج AVIF بشكل ملحوظ خلال العامين الماضيين. بالمقارنة مع تنسيقات الصور الثابتة الحديثة الأخرى، يقدّم AVIF ملفات أصغر حجمًا ذات جودة مرئية مشابهة (اطّلِع على الرسم البياني التالي، من الأفضل استخدام أقل من ذلك) وأسرع في الترميز.
يوضّح الرسم البياني أدناه (الأعلى يكون أفضل) كيفية مقارنة سرعة ترميز AVIF بتنسيقات الصور الأخرى. تستفيد برامج الترميز الجيل السابق مثل WebP من خوارزميات الضغط الأقل تعقيدًا (ولكنها أقل فعالية أيضًا). باستخدام نظام الترميز متعدد السلاسل، يحقق AVIF أداءً مشابهًا لحالات الاستخدام الشائعة مع تحقيق زيادة كبيرة في الضغط.
بالنسبة إلى المطوِّرين المهتمين بالحصول على بيانات أكثر تفصيلاً عن سرعة الترميز ومقارنات الجودة المرئية، يحتوي الموقع الإلكتروني Image Coding Comparisons (مقارنات الترميز) على نتائج قياس أداء يمكن إعادة إنتاجها.
في حين أنّ عمليات تنفيذ البرامج لبرامج ترميز الصور الحديثة مثل AVIF وWebP تم تحسينها للبِنى الأساسية لمعالِجات x86 وARM، إلا أنّ ضغط كميات هائلة من الصور على نطاق واسع يمكن أن يكون مكلفًا من الناحية الحسابية. ومن البدائل المتاحة لتقليل تكاليف الضغط استكشاف ميزة "تسريع الأجهزة". طوّرت شركة Bluedot جهاز ترميز بولسار-AVIF مسرَّع على الجهاز ويعمل على وحدات FPGA قابلة للبرمجة، مثل Alveo U250 من AMD. بالمقارنة مع نظام الطيران المستند إلى البرامج، يوفّر Pulsar-AVIF تحسُّنًا في السرعة بمعدّل 7 إلى 23 مرة مع كفاءة ضغط مماثلة.
- مجموعة الاختبار: Kodak (24 صورة بحجم 768x512)
- ترميز 24 صورة في وقت واحد (24 عملية)
- يتم تنفيذ كل عملية ترميز من خلال 4 سلاسل محادثات. (- ي 4)
يمكن للمطوّرين نشر برنامج الترميز Pulsar-AVIF مع الأجهزة الافتراضية المستندة إلى السحابة الإلكترونية، مثل Azure NP-Series.
ميزات AVIF لصفحات الويب سريعة الاستجابة
يحتوي AVIF على بعض الميزات المثيرة للاهتمام التي ستساعد في عرض صفحات ويب أكثر استجابة. في هذه المرة، سنتعمق في ملفات AVIF المتحركة، وهي الطريقة الأكثر فعالية لعرض الرسوم المتحركة الرائعة على الويب.
AVIF متحرك
لا تزال ملفات GIF المتحركة تنسيقًا شائعًا للصور المتحركة، على الرغم من عمرها 35 عامًا. من أهمّ العيوب في ملفات GIF المتحرّكة إمكانية استخدام 256 لونًا فقط وضعف الضغط، ما يؤدي إلى زيادة حجم الملفات الكبيرة جدًا مع الحدّ من درجة الدقة أو عدد اللقطات في الثانية في حالات الاستخدام العملي. في المقابل، إنّ ترميز AVIF المتحركة هو في الواقع نفس نظام ترميز الفيديو AV1، وهو يساعد في تقليل حجم الملف بشكل كبير مقارنةً بصور GIF المتحركة.
لقد اختبرنا معيارًا بسيطًا حيث تم ترميز مجموعة من ملفات GIF المتحركة إلى كل من AVIF وJPEG XL. وخلال مجموعة الاختبار، كانت النسبة المئوية المتوسطة لتوفير حجم الملفات حوالي 86% مقارنةً بملفات GIF الأصلية وحوالي 73% مقارنةً بملفات JPEG XL المتحركة*.
يتيح كل من Chrome وFirefox وSafari تشغيل ملفات AVIF المتحركة.
أداة FFmpeg هي أداة تُستخدم لإنشاء ملفات AVIF متحركة، إليك مثال أساسي لتحويل ملف GIF إلى AVIF باستخدام أداة FFmpeg:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF هي جودة الإخراج المطلوبة على مقياس من 0 إلى 63. أما القيم المنخفضة، فتعني جودة أفضل وحجم ملف أكبر. يستخدم 0 ضغط بدون فقدان البيانات. ابدأ بقيمة 23 لملفات AVIF المتحركة الصغيرة.
يستخدم برنامج FFmpeg libaom تلقائيًا لترميز صور AVIF، ولكن يمكنه أيضًا استخدام rav1e أو SVT-AV1 عند توفُّره. يمكن العثور على مزيد من المعلومات حول خيارات برامج الترميز وضبط معلمات الترميز لمقايضات السرعة/الجودة في دليل ترميز AV1 من FFmpeg.
هناك حالة استخدام أخرى تتمثل في إعادة تجميع فيديو AV1 في AVIF بدون إعادة ترميز الملف الأصلي. إنّ هذا الإجراء أقل بكثير من فك ترميز أو ترميز ملف AV1 الأصلي، ويتيح استخدام فيديو AV1 مع عنصر <img>. ويمكن أن يؤدي تمرير -c:v copy إلى FFmpeg إلى تنفيذ ذلك.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
الاستنتاجات
لقد تزايد استخدام AVIF على الويب بشكل مطرد منذ إطلاقه، وهو متوافق على نطاق واسع من خلال المتصفّحات وشبكات توصيل الصور (CDN) ومكوّنات WordPress الإضافية وأدوات الترميز. بشكل عام، إنّ AVIF هو خيار رائع لعرض الصور على الويب، ويسهُل ترميزه وفك ترميزه مع توفير أفضل جودة أو أصغر حجم للملف، حسبما تفضّله لموقعك الإلكتروني. يعد AVIF الطريقة الأكثر فعالية لعرض الصور المتحركة على الويب. إذا كان لديك أي أسئلة أو تعليقات أو طلبات ميزات، يُرجى التواصل معنا من خلال القائمة البريديةav1-discuss ومنتدى AOM جيت هب وAVIF wiki.