نشر AVIF للمواقع الإلكترونية الأكثر استجابة

آخر المعلومات حول كيفية اعتماد تنسيق AVIF في المنظومة المتكاملة

Jani Huoponen
Jani Huoponen
Vignesh Venkatasubramanian
Vignesh Venkatasubramanian

AVIF هو تنسيق جديد للصور يكتسب رواجًا سريعًا على الويب بسبب معدلات الضغط العالية والأداء الفعال واعتماده على نطاق واسع. إنّ AVIF هو تنسيق صور مفتوح وغير خاضع لحقوق الملكية ويستند إلى برنامج ترميز الفيديو AV1 الموحّد من قِبل مؤسسة Alliance for Open Media. ستوفّر مشاركة المدوّنة هذه نظرة عامة على كيفية اعتماد AVIF في المنظومة المتكاملة، والنوع الذي يمكن أن يتوقعه المطوّرون من AVIF للصور الثابتة والصور المتحركة من حيث الأداء والجودة.

ما هي الميزات الجديدة في منظومة AVIF المتكاملة؟

منذ طرح تنسيق AVIF في Chrome وFirefox وSafari، ازداد استخدامه على الويب بشكل مطرد، وتتوافق جميع المتصفّحات تقريبًا مع تنسيق AVIF اليوم.

في Chrome وحده، زاد استخدام AVIF إلى ما يقرب من ‎1% في عام تقريبًا بعد أن أضاف Chrome دعمًا لتنسيق AVIF في الإصدار الثابت.

رسم بياني خطّي لاستخدام AVIF في Chrome من أيار (مايو) 2021 إلى آذار (مارس) 2023 زاد الدعم بشكل مطرد من 0% إلى أقل بقليل من 1.4%.

توفّر حاليًا عدد من شبكات CDN لعرض الصور، مثل Akamai وCloudflare وCloudinary وImgix، صورًا بتنسيق AVIF. في مقالة مدونة أعلنت فيها شركة Imgix عن توفّر تنسيق AVIF، أفادت الشركة بانخفاض حجم الملف بنسبة %60 مقارنةً بتنسيق JPEG وبانخفاض بنسبة %35 مقارنةً بتنسيق WebP. يؤدّي تقليل حجم الملفات إلى توفير مساحة تخزين كبيرة، كما يساعد في تحميل الصفحات بشكل أسرع، ما يؤدي إلى تقليل أوقات عرض أكبر محتوى مرئي (LCP). LCP هو أحد مؤشرات أداء الويب الأساسية ويمثّل مدى سرعة تحميل أكبر جزء من المحتوى على الصفحة. إنّ استخدام برامج الترميز الحديثة لضغط الصور هو أحد التقنيات الرئيسية لتقليل سرعة عرض أكبر جزء من المحتوى على الصفحة. Lighthouse هي أداة رائعة لمطوّري Chrome لاختبار موقعك الإلكتروني والاطّلاع على مقدار التوفير الذي يمكن أن يحقّقه تنسيق AVIF.

WordPress هي منصّة المواقع الإلكترونية الأكثر رواجًا في العالم، وهناك عدد من الإضافات المتاحة للمطوّرين لتحويل صورهم إلى تنسيق AVIF، مثل:

بالنسبة إلى عدد أكبر من المطوّرين المتفاعلين، يمكن أن تكون أدوات مثل ImageMagick وFFmpeg نقطة انطلاق جيدة.

سرعة ترميز AVIF

إنّ سرعة الترميز العالية والجودة المرئية العالية هما أمران مهمان لنشر ميزة ضغط الصور على نطاق واسع. تحسّنت سرعة ترميز برنامج AVIF بشكل ملحوظ خلال العامَين الماضيَين. مقارنةً بتنسيقات الصور الثابتة الحديثة الأخرى، ينتج تنسيق AVIF ملفات أصغر حجمًا بجودة مرئية مماثلة (راجِع الرسم البياني التالي، وكلما كان حجم الملف أصغر، كان ذلك أفضل)، كما أنّ وقت ترميزه أسرع.

رسم بياني شريطي يقارن بين أحجام ملفات ترميز الصور المختلفة كنسبة مئوية من ناتج TurboJPEG ويكون AVIF هو التنسيق الأقل استخدامًا، ثم JPEG XL، ثم WebP، ثم MozJPEG.

يوضّح الرسم البياني أدناه (كلما كان المعدل أعلى، كان ذلك أفضل) سرعة ترميز AVIF مقارنةً بتنسيقات الصور الأخرى. تستفيد برامج ترميز الجيل السابق، مثل WebP، من خوارزميات الضغط الأقل تعقيدًا (ولكنها أيضًا أقل فعالية). باستخدام نظام ترميز متعدد السلاسل، يحقّق AVIF أداءً مشابهًا لحالات الاستخدام الشائعة مع تحقيق أرباح ضغط كبيرة.

مقارنة بين سرعة ترميز برنامج ترميز الصور برامج الترميز التي تتم مقارنتها هي متوسط AVIF ومتوسط JPEG XL ومتوسط WebP (سلسلة محادثات واحدة) ومتوسط MozJPEG (سلسلة محادثات واحدة). يُعدّ تنسيق AVIF بشكل عام أحد أسرع برامج ترميز الصور من حيث أفضل جودة وأقل جهد، ولكنه أبطأ برامج الترميز من حيث الأداء الفوري.

بالنسبة إلى المطوّرين المهتمين بإجراء مقارنات أكثر تفصيلاً لسرعة الترميز والجودة المرئية، يتضمّن موقع مقارنات ترميز الصور نتائج مقاييس أداء يمكن إعادة إنتاجها.

على الرغم من أنّ عمليات تنفيذ برامج برامج ترميز الصور الحديثة، مثل AVIF وWebP، محسّنة لمعماريات معالجات x86 وARM، إلا أنّ ضغط كميات كبيرة من الصور على نطاق واسع يمكن أن يكون باهظ التكلفة من حيث العمليات الحسابية. أحد البدائل لتقليل تكاليف الضغط هو استكشاف ميزة "تسريع الأجهزة". طوّرت شركة Bluedot برنامج ترميز Pulsar-AVIF مزوّدًا بوحدة معالجة رسومات مبرمَجة لتشغيله، مثل Alveo U250 من AMD. مقارنةً ببرنامج avifenc المستنِد إلى البرامج، يحقّق Pulsar-AVIF تحسينًا في السرعة يتراوح بين 7 و23 مرة مع كفاءة ضغط مماثلة.

برنامج الترميز وقت التشفير (بالملّي ثانية) عدد اللقطات في الثانية استخدام وحدة المعالجة المركزية (CPU) مواصفات الجهاز
Pulsar-AVIF
(وحدة معالجة البرامج القابلة للبرمجة)
60 409.85 305% وحدة AMD Alveo U250 واحدة + وحدة معالجة مركزية Intel(R) Xeon(R)
Platinum 8171 بسرعة 2.6 غيغاهرتز، و10 نوى
avifenc
(libaom)
405 59.26 3200% وحدة المعالجة المركزية Intel(R) Xeon(R) Platinum 8370C بسرعة
2.8 غيغاهرتز، و32 نواة
avifenc
(SVT-AV1)
1325 18.11 3200% وحدة المعالجة المركزية Intel(R) Xeon(R) Platinum 8370C بسرعة
2.8 غيغاهرتز، و32 نواة
مقارنة بين سرعات ترميز AVIF
  • مجموعة الاختبار: Kodak (24 صورة بحجم 768×512)
  • ترميز 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 المتحركة*.

مقارنة لأداء برنامج ترميز الصور المتحركة يتفوق تنسيق AVIF على تنسيقَي GIF وJPEG XL من حيث متوسط حجم الملف ووسيط حجمه.
* إصدارا libavif وlibjxl: libavif version 4cff6a3 (libaom version v3.5.0), libjxl version 176b1c03 مجموعة الاختبار: 15 نموذجًا من ملفات GIF من Wikipedia

تتيح متصفّحات 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 على الويب.

الصورة الرئيسية من Unsplash، لأحد أعمال Amal S .