نكتب بشكل متكرر عن كثرة البيانات غير الضرورية التي تحدث في المواقع الإلكترونية بسبب الصور. وتسلّط أدوات مثل Lighthouse الضوء على تأثير تحميل الصور بشكل سلبي في تجربة المستخدم، مثل زيادة وقت التحميل أو إبعاد معدل نقل البيانات عن الموارد الأكثر أهمية. إحدى الطرق لحلّ هذه المشكلة هي استخدام طريقة الضغط الحديثة لتصغير حجم ملف الصور، ويتوفّر خيار جديد لمطوّري برامج الويب هو تنسيق صور AVIF. يتناول مشاركة المدونة هذه التحديثات الأخيرة للأدوات المفتوحة المصدر لـ AVIF، ويقدم مكتبات ترميز libaom وlibavif، ويتضمن برنامجًا تعليميًا لاستخدام هذه المكتبات لترميز صور AVIF بكفاءة.
إنّ AVIF هو تنسيق صورة يستند إلى برنامج ترميز الفيديو AV1، ووهو موحّد بواسطة Alliance for Open Media. يوفر AVIF مكاسب كبيرة في الضغط مقارنةً بتنسيقات الصور الأخرى مثل JPEG وWebP. يعتمد التوفير الدقيق على المحتوى وإعدادات الترميز وهدف الجودة، نحن والآخرون لقد شهدنا توفيرًا أكبر من% 50 مقارنةً بتنسيق JPEG.
بالإضافة إلى ذلك، يدعم AVIF برنامج الترميز وحاوية الميزات الجديدة، مثل النطاق الديناميكي العالي وتقنية الألوان العريضة وتركيب حبيبات الأفلام وفك الترميز التدريجي.
الميزات الجديدة
منذ توفير دعم AVIF في Chrome M85، تم تحسين دعم AVIF في النظام الشامل المفتوح المصدر على عدد من الواجهات.
ليبوم
Libaom هو برنامج ترميز مفتوح المصدر وفك ترميز AV1 وتنشئه الشركات في تحالف الوسائط المفتوحة ويتم استخدامه في العديد من خدمات الإنتاج في Google والشركات الأعضاء الأخرى. بين إصدار libaom 2.0.0 - أي في الوقت نفسه تقريبًا الذي أضاف فيه Chrome دعم AVIF - والإصدار الأخير 3.1.0، تمت إضافة تحسينات كبيرة على ترميز الصور الثابتة إلى قاعدة الرموز. وتشمل هذه المعلومات ما يلي:
- تحسينات للسلاسل المتعددة والترميز المقسّم إلى أجزاء
- يتم تقليل استهلاك الذاكرة بمقدار 5 مرات.
- تقليل في استخدام وحدة المعالجة المركزية (CPU) بمقدار 6.5 مرات، كما هو موضَّح في الرسم البياني أدناه.
تؤدي هذه التغييرات إلى خفض تكلفة ترميز AVIF بشكل كبير، لا سيما الصور التي يتم تحميلها بشكل متكرر أو الصور ذات الأولوية القصوى على موقعك الإلكتروني. نظرًا لتوفر ترميز مسرَّع على الأجهزة لـ AV1 بشكل أكبر على الخوادم والخدمات السحابية، ستستمر تكلفة إنشاء صور AVIF في الانخفاض.
ليبافيف
Libavif، التطبيق المرجعي لـ AVIF هو أداة محلل ومحلل AVIF مفتوحة المصدر يتم استخدامها في Chrome لفك ترميز صور AVIF. ويمكن استخدامه أيضًا مع libaom لإنشاء صور AVIF من صورك الحالية غير المضغوطة أو تحويل الترميز من صور الويب الحالية (JPEG أو PNG أو غير ذلك).
أضافت Libavif مؤخرًا مجموعة أكبر من إعدادات برامج الترميز، بما في ذلك الدمج مع إعدادات أكثر تقدّمًا لبرنامج ترميز libaom. وتؤدي التحسينات في مسار المعالجة مثل التحويل السريع من YUV إلى نموذج أحمر أخضر أزرق باستخدام libyuv ودعم ألفا المضاعف مسبقًا إلى تسريع عملية فك الترميز. وأخيرًا، يوفّر دعم وضع الترميز الشامل الذي تمت إضافته مؤخرًا في libaom 3.1.0 جميع تحسينات libaom المذكورة أعلاه.
ترميز صور AVIF باستخدام AVfenc
هناك طريقة سريعة لتجربة AVIF هي Squoosh.app. يشغّل Squoosh إصدار WebAssembly من libavif، ويعرض العديد من الميزات نفسها التي تقدّمها أدوات سطر الأوامر. وهي طريقة سهلة للمقارنة بين AVIF بتنسيقات أخرى قديمة وجديدة. هناك أيضًا إصدار CLI من 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
إنشاء برنامج ترميز سطر الأوامر AVfenc
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
أنشئ ملفات إصدار AVfenc.
cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
بناء الطيران.
make
لقد نجحت في إنشاء طيران.
فهم معلمات سطر أوامر AVfenc
يستخدم avifenc هيكل سطر الأوامر:
./avifenc [options] input.file output.avif
المعلمات الأساسية لـ avifenc المستخدمة في هذا البرنامج التعليمي هي:
| طيران | |
|---|---|
| --min 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 (الإعداد التلقائي: 1) |
| --السرعة S | ضبط سرعة برنامج الترميز من 0 إلى 10 (الأبطأ - الأسرع: 6 سرعة) |
يقوم خيار مستوى cq بتعيين مستوى الكمية (0-63) للتحكم في جودة اللون أو ألفا.
إنشاء صورة AVIF باستخدام الإعدادات التلقائية
تتمثل المعلمات الأساسية لتشغيل AVfenc في ضبط ملفات الإدخال والإخراج.
./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.
تحدّد هذه المَعلمة عدد سلاسل المحادثات التي سيستخدمها AVIF لإنشاء صور 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
وهذا يخبر AVfenc باستخدام 8 سلاسل محادثات عند إنشاء صورة AVIF، مما يؤدي إلى تسريع تشفير AVIF بمقدار 5 أضعاف تقريبًا.
التأثير على سرعة عرض أكبر محتوى مرئي (LCP)
وتُعدّ الصور مرشحًا شائعًا لمقياس "سرعة عرض أكبر محتوى مرئي" (LCP). من بين الاقتراحات الشائعة لتحسين سرعة تحميل صور LCP هو ضمان تحسين الصورة. من خلال تقليل حجم نقل الموارد، يمكنك تحسين وقت تحميل المورد، والذي يُعد إحدى المراحل الأربع الرئيسية التي يجب استهدافها عند التعامل مع الصور المرشحة لسرعة LCP.
ننصحك بشدة باستخدام استخدام شبكة توصيل محتوى (CDN) لصورة عند تحسين الصور، لأنّ ذلك يتطلّب جهدًا أقل بكثير من إعداد مسارات تحسين الصور في عملية إنشاء موقعك الإلكتروني أو استخدام برامج ترميز ثنائية يدويًا لتحسين الصور يدويًا. ومع ذلك، قد تكون شبكات توصيل المحتوى (CDN) للصور أقل تكلفة لبعض المشاريع. فإذا كان الأمر كذلك، يجب أخذ ما يلي في الاعتبار عند التحسين باستخدام برنامج ترميز AVfenc:
- تعرَّف على الخيارات التي يقدّمها برنامج الترميز. يمكنك توفير المزيد من الأموال مع الاحتفاظ بجودة كافية للصور من خلال تجربة بعض ميزات الترميز المتاحة في AVIF.
- يوفر AVIF الترميز مع فقدان البيانات وبدون فقدان البيانات. استنادًا إلى محتوى الصورة، قد يكون أداء أحد أنواع الترميز أفضل من نوع آخر. على سبيل المثال، الصور التي يتم عرضها عادةً بتنسيق JPEG ستنجح على الأرجح في الترميز مع فقدان البيانات، في حين أن الترميز بدون فقدان البيانات هو الأفضل على الأرجح للصور التي تحتوي على تفاصيل بسيطة أو رسومات خطية يتم عرضها عادةً كملف PNG.
- في حال استخدام حزمة متوافقة مع المنتدى لبرنامج imagemin، ننصحك باستخدام حزمة imagemin-avif للسماح لأداة الحِزم بإخراج صيغ صور AVIF.
من خلال تجربة استخدام AVIF، قد تتمكّن من تحقيق تحسُّن في أوقات سرعة عرض أكبر جزء من المحتوى على الصفحة لموقعك الإلكتروني في الحالات التي يكون فيها العنصر المرشح لمقياس LCP عبارة عن صورة. للحصول على مزيد من المعلومات حول تحسين سرعة LCP، يُرجى الاطّلاع على دليل تحسين سرعة LCP.
الخلاصة
باستخدام libaom وlibavif وأدوات أخرى مفتوحة المصدر، يمكنك الحصول على أفضل جودة وأداء للصور لموقعك الإلكتروني باستخدام AVIF. لا يزال الشكل جديدًا نسبيًا، وتعمل التحسينات ودمج الأدوات بشكل نشط. إذا كانت لديك أي أسئلة أو تعليقات أو طلبات ميزات، يُرجى التواصل معنا من خلال القائمة البريديةav1-discuss ومنتدى AOM GitHub وAVIF wiki.