نكتب كثيرًا حول الزيادة الكبيرة في حجم المواقع الإلكترونية من الصور، ونسلط أدوات مثل Lighthouse الضوء على الحالات التي يؤثر فيها تحميل الصور سلبًا في تجربة المستخدم، مثل زيادة وقت التحميل أو استهلاك معدّل نقل البيانات من موارد أكثر أهمية. يمكن حلّ هذه المشكلة من خلال استخدام الضغط الحديث لتصغير حجم ملفات الصور، ويتوفّر خيار جديد لمطوّري البرامج على الويب وهو تنسيق الصورة AVIF. تتناول مشاركة المدونة هذه التحديثات الأخيرة على الأدوات المفتوحة المصدر في AVIF، وتتناول مكتبتَي ترميز libaom وlibavif، كما تتضمّن برنامجًا تعليميًا حول استخدام هذه المكتبات لترميز صور AVIF بكفاءة.
وAVIF هو تنسيق صورة يستند إلى برنامج ترميز الفيديو AV1، وتم توحيده من قِبل اتفاقية Alliance for Open Media. يوفّر AVIF أرباح ضغط كبيرة مقارنةً بتنسيقات الصور الأخرى، مثل JPEG وWebP. وعلى الرغم من أنّ مقدار التوفير الدقيق يعتمد على المحتوى وإعدادات الترميز وهدف الجودة، شهدنا نحن و الآخرون انخفاضًا بنسبة تزيد عن 50% مقارنةً بتنسيق JPEG.
بالإضافة إلى ذلك، يتيح AVIF برنامج الترميز والحاويات مع ميزات الصور الجديدة، مثل النطاق العالي الديناميكية ومجموعة الألوان الواسعة وتجميع حبيبات الأفلام وفك الترميز التدريجي.
الميزات الجديدة
منذ أن توفر استخدام AVIF في الإصدار M85 من 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 هو تطبيق مرجعي لـ AVIF، هو برنامج تحليل ومحلل AVIF مفتوح المصدر يُستخدم في Chrome لفك ترميز صور AVIF. ويمكن استخدامه أيضًا مع libaom لإنشاء صور AVIF من الصور الحالية غير المضغوطة أو لتحويل الترميز من صور الويب الحالية (JPEG وPNG، وغيرها).
أتاحت Libavif مؤخرًا إمكانية استخدام مجموعة أكبر من إعدادات برامج الترميز، بما في ذلك الدمج مع إعدادات أكثر تقدّمًا لبرنامج ترميز libaom. كما أن التحسينات في مسار المعالجة، مثل التحويل السريع من YUV إلى RGB باستخدام نظام libyuv وألفا متضاعفة مسبقًا، تدعم زيادة سرعة عملية فك الترميز. وأخيرًا، يساعد دعم وضع الترميز الشامل الذي تمت إضافته مؤخرًا في libaom 3.1.0 في الحصول على جميع التحسينات المذكورة أعلاه في libaom.
ترميز صور AVIF باستخدام avifenc
يمكنك تجربة استخدام AVIF بسرعة وهي Squoosh.app. يشغّل Squoosh إصدار WebAssembly من libavif، ويعرض العديد من الميزات نفسها التي توفّرها أدوات سطر الأوامر. توفّر هذه الميزة طريقة سهلة لمقارنة AVIF بالتنسيقات القديمة والجديدة الأخرى. وهناك أيضًا إصدار واجهة سطر الأوامر من Squoosh يستهدف تطبيقات Node.
لا يتوفّر لدى WebAssembly حاليًا إمكانية الوصول إلى جميع الإعدادات الأساسية لأداء وحدات المعالجة المركزية (CPU)، لذا إذا أردت تشغيل libavif بأقصى سرعة، ننصحك باستخدام برنامج ترميز سطر الأوامر، avifenc.
لفهم كيفية ترميز صور AVIF، سنقدّم دليلاً تعليميًا باستخدام الصورة المصدر نفسها المستخدمة في المثال أعلاه. للبدء، ستحتاج إلى:
ستحتاج أيضًا إلى تثبيت حزم تطوير zlib وlibpng وlibjpeg. في ما يلي أوامر توزيعتَي Debian وUbuntu Linux:
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 لربطه بشكل ثابت بمكتبة برنامجَي ترميز AV1 وبرنامج فك الترميز، libaom.
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 المستخدمة في هذا البرنامج التعليمي هي:
| أففينك | |
|---|---|
| --الحد الأدنى 0 | ضبط الحد الأدنى لمقياس اللون على القيمة 0 |
| --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=sim | ضبط SSIM (الإعداد التلقائي هو توليف PSNR) |
| --jobs J | استخدام سلاسل محادثات J Worker (الإعداد التلقائي: 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 ومنتدى AOM GitHub وAVIF wiki.