آخر الأخبار حول كيفية استخدام AVIF في المنظومة المتكاملة
AVIF هو تنسيق صور جديد يكتسب شعبية بسرعة على الويب بسبب معدلات الضغط العالية والأداء الفعّال والاعتماد الواسع النطاق. AVIF هو تنسيق صور مفتوح المصدر وغير خاضع لحقوق الملكية، ويستند إلى برنامج ترميز الفيديو AV1 الذي تم توحيده من قِبل Alliance for Open Media. ستقدّم هذه المقالة نظرة عامة على كيفية استخدام تنسيق AVIF في المنظومة المتكاملة، ونوع مزايا الأداء والجودة التي يمكن للمطوّرين توقّعها من تنسيق AVIF للصور الثابتة والصور المتحركة.
ما الجديد في منظومة AVIF المتكاملة؟
منذ طرح تنسيق AVIF في Chrome وFirefox وSafari، ازداد استخدامه على الويب بشكل مطرد، وأصبحت جميع المتصفحات تقريبًا متوافقة معه اليوم.
في Chrome وحده، زاد استخدام AVIF إلى حوالي %1 في أكثر من عام بقليل بعد أن أضاف Chrome دعم AVIF في الإصدار الثابت.
تتيح حاليًا العديد من شبكات توصيل المحتوى (CDN) للصور، مثل Akamai وCloudflare وCloudinary وImgix، عرض الصور بتنسيق AVIF. في منشور مدوّنة للإعلان عن إتاحة تنسيق AVIF، أشارت Imgix إلى توفير% 60 من حجم الملف مقارنةً بتنسيق JPEG و% 35 مقارنةً بتنسيق WebP. يؤدي توفير حجم الملفات هذا إلى توفير كبير في مساحة التخزين، ولكنه يساعد أيضًا في تحميل الصفحات بشكل أسرع، ما يؤدي إلى زيادة سرعة عرض أكبر محتوى مرئي (LCP). يُعدّ مقياس LCP أحد مؤشرات Core Web Vitals، ويمثّل مدى سرعة تحميل أكبر جزء من المحتوى على الصفحة. يُعدّ استخدام برامج الترميز الحديثة لضغط الصور أحد الأساليب الرئيسية لتقليل وقت LCP. Lighthouse هي أداة رائعة لمطوّري برامج Chrome تتيح اختبار موقعك الإلكتروني ومعرفة مقدار التوفير الذي سيحقّقه تنسيق AVIF.
WordPress هو منصة المواقع الإلكترونية الأكثر رواجًا في العالم، ويتوفّر عدد من المكوّنات الإضافية التي تتيح للمطوّرين تحويل صورهم إلى تنسيق AVIF، مثل:
بالنسبة إلى المطوّرين الذين يفضّلون العمل بأنفسهم، تُعدّ أدوات مثل ImageMagick وFFmpeg نقطة بداية جيدة.
سرعة ترميز AVIF
تُعدّ سرعة الترميز العالية والجودة المرئية العالية من العوامل الأساسية لنشر ميزة ضغط الصور على نطاق واسع. تحسّنت سرعة ترميز برامج AVIF بشكل كبير خلال العامين الماضيين. مقارنةً بتنسيقات الصور الثابتة الحديثة الأخرى، ينتج عن تنسيق AVIF ملفات أصغر حجمًا بجودة مرئية مشابهة (انظر الرسم البياني التالي، كلما انخفضت القيمة، كان ذلك أفضل)، ولكنّه أيضًا أسرع في الترميز.
يوضّح الرسم البياني أدناه (كلما زادت القيمة، كان ذلك أفضل) مقارنة سرعة ترميز AVIF بتنسيقات الصور الأخرى. تستفيد برامج الترميز من الجيل السابق، مثل WebP، من خوارزميات الضغط الأقل تعقيدًا (ولكنها أيضًا أقل كفاءة). باستخدام نظام ترميز متعدّد السلاسل، يحقّق AVIF أداءً مشابهًا لحالات الاستخدام الشائعة مع توفير مزايا ضغط كبيرة.
بالنسبة إلى المطوّرين المهتمين بمقارنات أكثر تفصيلاً لسرعة الترميز والجودة المرئية، يحتوي الموقع الإلكتروني مقارنات ترميز الصور على نتائج قياس أداء قابلة للتكرار.
على الرغم من أنّ عمليات تنفيذ برامج ترميز الصور الحديثة، مثل AVIF وتنسيق WebP، تم تحسينها لتتوافق مع بنية معالجات x86 وARM، فإنّ ضغط كميات هائلة من الصور على نطاق واسع قد يكون مكلفًا من الناحية الحسابية. من البدائل لخفض تكاليف الضغط استكشاف ميزة "تسريع الأجهزة". طوّرت شركة Bluedot برنامج ترميز Pulsar-AVIF يعمل على تسريع الأجهزة ويعمل على مصفوفات FPGA قابلة للبرمجة، مثل Alveo U250 من AMD. مقارنةً بأداة avifenc المستندة إلى البرامج، يوفّر Pulsar-AVIF تحسينًا في السرعة يتراوح بين 7 و23 مرة مع كفاءة ضغط مماثلة.
- مجموعة الاختبار: Kodak (24 صورة بدقة 768x512)
- ترميز 24 صورة في الوقت نفسه (24 عملية)
- يتم تنفيذ كل عملية ترميز للبرامج باستخدام 4 سلاسل محادثات. (-j 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 على Github وصفحة AVIF على ويكيبيديا.