نتحدث بشكل متكرّر عن حجم الصور الكبير على المواقع الإلكترونية، وتسلّط أدوات مثل Lighthouse الضوء على الحالات التي يكون فيها تحميل الصور له تأثير سلبي على تجربة المستخدم، مثل زيادة وقت التحميل، أو استخدام عرض النطاق الترددي لموارد أكثر أهمية. وإحدى الطرق لحلّ هذه المشكلة هي استخدام تقنيات ضغط حديثة لتقليل حجم ملفات الصور، وأحد الخيارات الجديدة لمطوّري الويب هو تنسيق الصور AVIF. تتناول هذه المقالة على مدوّنتنا آخر التعديلات على أدوات الترميز المفتوحة المصدر لتنسيق AVIF، ويقدّم القسم الأول من المقالة مكتبتَي الترميز libaom وlibavif، ويقدّم القسم الثاني دليلاً تعليميًا لاستخدام هاتين المكتبتَين لتشفير صور AVIF بكفاءة.
AVIF هو تنسيق صور يستند إلى برنامج ترميز الفيديو AV1، ويعتمد عليه تحالف الوسائط المفتوحة. يوفّر AVIF أرباح ضغط كبيرة مقارنةً بتنسيقات الصور الأخرى، مثل JPEG وWebP. على الرغم من أنّ التوفير الدقيق سيعتمد على المحتوى وإعدادات الترميز والجودة المستهدَفة، لاحظنا وغيرنا توفيرًا بنسبة تزيد عن %50 مقارنةً بتنسيق JPEG.
بالإضافة إلى ذلك، يضيف تنسيق AVIF دعمًا لبرنامج الترميز والحاويات لميزات الصور الجديدة، مثل النطاق العالي الديناميكية ومجموعة الألوان العريضة، تجميع حبيبات الفيلم، وفك التشفير التدريجي.
الميزات الجديدة
منذ طرح تنسيق AVIF في الإصدار 85 من Chrome، تحسّن دعم تنسيق AVIF في منظومة البرامج المتكاملة المفتوحة المصدر على عدة جوانب.
ليباوم
إنّ Libaom هو برنامج ترميز وفك ترميز مفتوح المصدر AV1 تديره شركات في Alliance for Open Media، ويُستخدَم في العديد من خدمات الإنتاج في Google والشركات الأعضاء الأخرى. بين إصدار libaom 2.0.0، الذي تزامن مع وقت إضافة Chrome لدعم AVIF، والإصدار 3.1.0 الأخير، تم إجراء تحسينات كبيرة على ترميز الصور الثابتة في قاعدة الرموز البرمجية. ومن بينها:
- تحسينات لتعدد المواضيع والترميز المصغّر
- انخفاض في استخدام الذاكرة بمقدار 5 مرات
- انخفاض بمقدار 6.5 مرات في استخدام وحدة المعالجة المركزية (CPU)، كما هو موضّح في الرسم البياني أدناه.
تؤدي هذه التغييرات إلى خفض تكلفة ترميز AVIF بشكل كبير، وبالأخص الصور الأكثر تحميلاً أو الأعلى أولوية على موقعك الإلكتروني. مع توفّر التشفير المُسرَّع للأجهزة لترميز AV1 بشكلٍ أكبر على الخوادم وخدمات السحابة الإلكترونية، ستواصل تكلفة إنشاء صور AVIF بالانخفاض.
Libavif
Libavif هو مكتبة برمجية مفتوحة المصدر لإنشاء وتحليل ملفات AVIF، وهي التنفيذ المرجعي لتنسيق AVIF، ويتم استخدامها في Chrome لفك ترميز صور AVIF. ويمكن أيضًا استخدامه مع libaom لإنشاء صور AVIF من صورك الحالية غير المضغوطة، أو تحويل ترميز الصور الحالية على الويب (JPEG وPNG وما إلى ذلك).
أضافت Libavif مؤخرًا إمكانية استخدام مجموعة أكبر من إعدادات برامج الترميز، بما في ذلك الدمج مع إعدادات برنامج الترميز libaom الأكثر تقدمًا. إنّ التحسينات في مسار المعالجة، مثل التحويل السريع من YUV إلى RGB باستخدام libyuv ودعم مُضاعِف ألفا، تساهم في تسريع عملية فك التشفير. وأخيرًا، يتيح وضع الترميز الداخلي بالكامل الذي تمت إضافته حديثًا في libaom 3.1.0 جميع تحسينات libaom المذكورة أعلاه.
ترميز صور AVIF باستخدام avifenc
يمكنك استخدام أداة Squoosh.app كطريقة سريعة لتجربة تنسيق AVIF. تشغِّل أداة Squoosh إصدارًا من WebAssembly من libavif، وتوفّر العديد من الميزات نفسها التي توفّرها أدوات سطر الأوامر. وهي طريقة سهلة لمقارنة تنسيق AVIF بالتنسيقات الأخرى القديمة والجديدة. يتوفّر أيضًا إصدار واجهة سطر الأوامر من Squoosh موجّه لتطبيقات Node.
ومع ذلك، لا يمكن لـ WebAssembly الوصول إلى جميع العناصر الأساسية لأداء وحدات المعالجة المركزية، لذا إذا كنت تريد تشغيل libavif بأسرع سرعة ممكنة، ننصح باستخدام برنامج ترميز avifenc في سطر الأوامر.
لفهم كيفية ترميز صور AVIF، سنقدّم دليلًا توجيهيًا باستخدام الصورة المصدر نفسها المستخدَمة في المثال أعلاه. للبدء، ستحتاج إلى ما يلي:
ستحتاج أيضًا إلى تثبيت حزم تطوير zlib وlibpng وlibjpeg. إليك أوامر توزيعات Linux من Debian وUbuntu:
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
إنشاء برنامج ترميز avifenc في سطر الأوامر
1. الحصول على الشفرة
تحقق من علامة إصدار libavif.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. تغيير الدليل إلى libavif
cd libavif
هناك العديد من الطرق المختلفة التي يمكنك من خلالها ضبط avifenc وlibavif لإنشاءهما. يمكنك الاطّلاع على مزيد من المعلومات على libavif. سننشئ avifenc لكي يتم ربطها بشكل ثابت بمكتبة libaom، وهي مكتبة ترميز وفك ترميز AV1.
3- الحصول على مكتبة libaom وإنشاؤها
انتقِل إلى دليل libavif للتبعيات الخارجية.
cd ext
سيؤدي الأمر التالي إلى سحب رمز libaom المصدر وإنشاء libaom بشكل ثابت.
./aom.cmd
تغيير الدليل إلى libavif
cd ..
4. إنشاء أداة ترميز سطر الأوامر، avifenc
ننصحك بإنشاء دليل إصدار avifenc.
mkdir build
انتقِل إلى دليل الإنشاء.
cd build
أنشئ ملفات الإنشاء لبرنامج avifenc.
cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
أنشئ avifenc.
make
لقد أنشأت avifenc بنجاح.
فهم مَعلمات سطر الأوامر avifenc
يستخدم avifenc بنية سطر الأوامر:
./avifenc [options] input.file output.avif
المعلمات الأساسية لـ avifenc المستخدمة في هذا البرنامج التعليمي هي:
| avifenc | |
|---|---|
| --الحد الأدنى 0 | ضبط الحد الأدنى لمقياس اللون على القيمة 0 |
| --max 63 | ضبط الحد الأقصى لقياس اللون على 63 |
| --minalpha 0 | ضبط الحد الأدنى لمعدّل التشفير للعامل "ألّفا" على 0 |
| --maxalpha 63 | اضبط الحد الأقصى لمعدّل التشفير للقيمة الشفافة على 63. |
| -a end-usage=q | ضبط وضع التحكّم في معدل نقل البيانات على وضع "جودة ثابتة" (Q) |
| -a cq-level=Q | اضبط مستوى التقريب لكل من اللون ودرجة الشفافية على Q. |
| -a color:cq-level=Q | ضبط مستوى تحديد الكمية للون على Q |
| -a alpha:cq-level=Q | اضبط مستوى التقريب للقيمة الشفافة على Q. |
| -a tune=ssim | ضبط الجودة وفقًا لمقياس SSIM (الإعداد التلقائي هو ضبط الجودة وفقًا لمقياس PSNR) |
| --jobs J | استخدام سلاسل الوحدات العاملة في J (الإعداد التلقائي: 1) |
| --السرعة S | ضبط سرعة برنامج الترميز من 0 إلى 10 (من الأبطأ إلى الأسرع، الإعداد التلقائي: 6) |
عند تحديد خيار مستوى التصنيف، يتم تعيين مستوى الكم (0-63) للتحكم في جودة اللون أو ألفا.
إنشاء صورة AVIF بالإعدادات التلقائية
المعلمات الأساسية لتشغيل avifenc هي تعيين ملفات الإدخال والإخراج.
./avifenc happy_dog.jpg happy_dog.avif
ننصحك باستخدام سطر الأوامر التالي لتشفير صورة، على سبيل المثال، عند مستوى التقطيع 18:
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
تتوفّر في Avifenc الكثير من الخيارات التي ستؤثر في كلّ من الجودة والسرعة.
إذا كنت تريد الاطّلاع على الخيارات ومعرفة المزيد من المعلومات عنها، ما عليك سوى تشغيل ./avifenc
لديك الآن صورة AVIF الخاصة بك
تسريع برنامج الترميز
من المفيد تغيير المَعلمة --jobs، وذلك تبعًا لعدد النوى في جهازك.
تُحدِّد هذه المَعلمة عدد سلاسل المهام التي سيستخدمها avifenc لإنشاء صور AVIF.
حاوِل تنفيذ هذا الأمر في سطر الأوامر.
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif
سيطلب ذلك من avifenc استخدام 8 سلاسل محادثات عند إنشاء صورة AVIF، ما يؤدي إلى تسريع ترميز AVIF تقريبًا بـ 5 مرات.
التأثيرات على مقياس "سرعة عرض أكبر محتوى مرئي" (LCP)
تُعتبر الصور من الترشيحات الشائعة لمقياس سرعة عرض أكبر محتوى مرئي (LCP). من الاقتراحات الشائعة لتحسين سرعة تحميل صور LCP هي ضمان تحسين الصورة. من خلال تقليل حجم نقل المورد، يمكنك تحسين وقت تحميل المورد، وهو إحدى المراحل الأربع الرئيسية التي يجب استهدافها عند التعامل مع مقياس LCP الذي يعتمد على الصور.
وننصح بشدة باستخدام شبكة توصيل المحتوى (CDN) للصور عند تحسين الصور، لأنّها تتطلّب جهدًا أقل بكثير من إعداد مسارات تحسين الصور في عملية تصميم موقعك الإلكتروني أو استخدام البرامج الثنائية لبرنامج الترميز يدويًا لتحسين الصور يدويًا. ومع ذلك، قد تكون شبكات CDN للصور باهظة التكلفة لبعض المشاريع. إذا كان هذا هو الحال بالنسبة إليك، ننصحك باتّباع الخطوات التالية عند إجراء التحسين باستخدام برنامج ترميز avifenc:
- اطّلِع على الخيارات التي يوفّرها برنامج الترميز. يمكنك تحقيق وفورات إضافية مع الحفاظ على جودة صورة كافية من خلال تجربة بعض ميزات الترميز المتاحة في AVIF.
- يوفر AVIF ترميزًا مع فقدان البيانات وبدون فقدان البيانات. استنادًا إلى محتوى الصورة، قد يحقّق نوع من الترميز أداءً أفضل من غيره. على سبيل المثال، الصور التي يتم عرضها عادةً بتنسيق JPEG هي الأفضل على الأرجح مع الترميز مع فقدان البيانات، في حين أنه من الأفضل استخدام ترميز بدون فقدان البيانات للصور التي تحتوي على تفاصيل بسيطة أو رسم خطي يتم عرضه عادةً بتنسيق PNG.
- إذا كنت تستخدم أداة تجميع تتيح استخدام حزمة imagemin، ننصحك باستخدام حزمة imagemin-avif لتفعيل أداة التجميع لإخراج صيغ صور AVIF.
من خلال تجربة أداة AVIF، قد تتمكّن من تحقيق تحسّن في سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) على موقعك الإلكتروني في الحالات التي يكون فيها مرشح LCP صورةً. لمزيد من المعلومات عن تحسين LCP، يمكنك الاطّلاع على الدليل حول تحسين LCP.
الخاتمة
باستخدام libaom وlibavif وغيرهما من الأدوات المفتوحة المصدر، يمكنك الحصول على أفضل جودة للصور وأفضل أداء لموقعك الإلكتروني باستخدام AVIF. لا يزال التنسيق جديدًا نسبيًا، ويجري تطوير التحسينات وعمليات دمج الأدوات بشكل نشط. إذا كانت لديك أسئلة أو تعليقات أو طلبات ميزات، يمكنك التواصل معنا على قائمة البريد الإلكتروني av1-discuss ومنتدى AOM على GitHub وموسوعة AVIF.