نتحدث بشكل متكرّر عن حجم الصور الكبير على المواقع الإلكترونية، وتسلّط أدوات مثل Lighthouse الضوء على الحالات التي يكون فيها تحميل الصور له تأثير سلبي على تجربة المستخدم، مثل زيادة وقت التحميل، أو استخدام عرض النطاق الترددي من موارد أكثر أهمية. وإحدى الطرق لحلّ هذه المشكلة هي استخدام تقنيات ضغط حديثة لتقليل حجم ملفات الصور، وأحد الخيارات الجديدة لمطوّري الويب هو تنسيق الصور AVIF. تتناول هذه المقالة على مدوّنتنا آخر التعديلات على أدوات الترميز المفتوحة المصدر لتنسيق AVIF، ويقدّم القسم الأول من المقالة مكتبتَي الترميز libaom وlibavif، ويقدّم القسم الثاني دليلاً تعليميًا لاستخدام هاتين المكتبتَين لتشفير صور AVIF بكفاءة.
AVIF هو تنسيق صور يستند إلى برنامج ترميز الفيديو AV1، ويعتمد عليه تحالف الوسائط المفتوحة. يقدّم تنسيق AVIF تحسينات كبيرة في ضغط الصور مقارنةً بتنسيقات الصور الأخرى، مثل JPEG وWebP. على الرغم من أنّ التوفير الدقيق سيعتمد على المحتوى وإعدادات الترميز والجودة المستهدَفة، لاحظنا وغيرنا توفيرًا بنسبة تزيد عن% 50 مقارنةً بتنسيق JPEG.
بالإضافة إلى ذلك، يضيف تنسيق AVIF دعمًا لبرنامج الترميز والحاويات لميزات الصور الجديدة، مثل النطاق العالي الديناميكية ومجموعة الألوان العريضة، تجميع حبيبات الفيلم، وفك التشفير التدريجي.
الميزات الجديدة
منذ إتاحة تنسيق AVIF في الإصدار 85 من Chrome، تحسّن دعم تنسيق AVIF في منظومة البرامج المتكاملة المفتوحة المصدر على عدة جوانب.
Libaom
Libaom هو برنامج ترميز وفك ترميز AV1 مفتوح المصدر تديره الشركات في Alliance for Open Media، ويُستخدَم في العديد من خدمات الإنتاج في Google والشركات الأعضاء الأخرى. بين إصدار libaom 2.0.0، الذي تزامن مع وقت إضافة Chrome لدعم AVIF، والإصدار 3.1.0 الأخير، تم إجراء تحسينات كبيرة على ترميز الصور الثابتة في قاعدة الرموز البرمجية. ومن بينها:
- تحسينات لتعدد المواضيع والترميز المصغّر
- انخفاض في استخدام الذاكرة بمقدار 5 مرات
- انخفاض في استخدام وحدة المعالجة المركزية بمقدار 6.5 مرة، كما هو موضّح في الرسم البياني أدناه
تعمل هذه التغييرات على خفض تكلفة ترميز 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 | |
|---|---|
| --min 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) |
| --speed S | ضبط سرعة برنامج الترميز من 0 إلى 10 (من الأبطأ إلى الأسرع، الإعداد التلقائي: 6) |
يضبط خيار cq-level مستوى الترميز (من 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.
الخاتمة
باستخدام libaom وlibavif وغيرها من أدوات المصدر المفتوح، يمكنك الحصول على أفضل جودة للصور وأعلى أداء لموقعك الإلكتروني باستخدام AVIF. لا يزال التنسيق جديدًا نسبيًا، ويجري تطوير التحسينات وعمليات دمج الأدوات بشكل نشط. إذا كانت لديك أسئلة أو تعليقات أو طلبات ميزات، يمكنك التواصل معنا على قائمة البريد الإلكتروني av1-discuss ومنتدى AOM على GitHub وموسوعة AVIF.