عرض صور AVIF

1. مقدمة

تشكّل الصور أكثر من 60% من وحدات البايت في المتوسط المطلوبة لتحميل صفحة ويب. باستخدام AVIF، يمكنك تصغير صورك وجعل تحميل موقعك الإلكتروني أسرع.

ما هو AVIF؟

AVIF هو تنسيق صور جديد مشتق من وحدة Bitream للفيديو AV1. تم تصميم AVIF لزيادة كفاءة الضغط.

أهمية AVIF

تكون صور AVIF أصغر بكثير من الصور بتنسيق JPEG أو PNG أو GIF أو WebP وبالجودة نفسها أو أفضل.

ما سوف تتعلمه

  • كيفية إنشاء صور بتنسيق AVIF من صورك
  • كيفية عرض صور AVIF في صفحة ويب

المتطلبات

2. إنشاء صور AVIF باستخدام Squoosh

Squoosh هو تطبيق ويب لضغط الصور. من خلال استخدام الزر squoosh، يمكنك ضغط صورك بسهولة بتنسيق AVIF.

  1. افتح https://squoosh.app.
  2. أسقط صورة محلية على Squoosh.

لقطة شاشة لتطبيق Squoosh

  1. اختَر AVIF من المربّع المنسدل "ضغط".

مربّع القائمة المنسدلة Squoosh

سيقوم Squoosh بعد ذلك بضغط صورتك إلى صورة AVIF. بمجرد الانتهاء من تنفيذ Squoosh، سيظهر زر تنزيل يحتوي على بعض الإحصاءات حول صورة AVIF في أسفل الجانب الأيسر.

زر تنزيل تطبيق Squoosh

حجم الصورة الأصلية: 3340 كيلوبايت، وحجم الصورة المضغوطة هو 378 كيلوبايت. تم ضغط عيّنة الصورة بحجم أصغر بمقدار 10 مرّات من الصورة الأصلية.

  1. تنزيل صورة AVIF

انقر على زر التنزيل وسيتم حفظ صورة AVIF في محرك الأقراص المحلي.

لديك الآن صورة AVIF الخاصة بك

3- إنشاء برنامج ترميز سطر الأوامر في avifenc

avifenc هو تطبيق من تطبيقات سطر الأوامر يمكنه تحويل الصور بتنسيق PNG وJPEG إلى صور بتنسيق AVIF. يستخدم avifenc libavif، وهو مكتبة يمكنها فك ترميز صور AVIF وترميزها. إذا كان لديك عدد كبير من الصور التي تريد تحويلها إلى تنسيق AVIF، ننصحك باستخدام برنامج ترميز سطر الأوامر، avifenc.

  1. احصل على الرمز.
git clone https://github.com/AOMediaCodec/libavif.git
  1. تغيير الدليل إلى libavif
cd libavif/

هناك العديد من الطرق المختلفة التي يمكنك من خلالها ضبط avifenc وlibavif لإنشاءهما. يمكنك العثور على مزيد من المعلومات على libavif. نعمل على تطوير avifenc لارتباطها بشكل ثابت بمكتبة برنامج الترميز وفك الترميز av1، libaom.

  1. الحصول على libaom وبناءها

يمكنك التغيير إلى دليل إضافات libavif.

cd ext

سيسحب الأمر التالي رمز المصدر libaom وينشئ libaom بشكل ثابت.

./aom.cmd

تغيير الدليل إلى libavif

cd ../
  1. إنشاء أداة ترميز سطر الأوامر، avifenc.

من الأفضل إنشاء دليل إصدار avifenc.

mkdir build

عليك التغيير إلى دليل الإصدار.

cd build

إنشاء ملفات الإصدار avifenc

cmake -DCMAKE_BUILD_TYPE=Release -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

بناء avifenc

make

لقد نجحت في إنشاء avifenc.

4. إنشاء صور AVIF باستخدام avifenc

  1. أنشِئ صورة AVIF بالإعدادات التلقائية.

المعلمات الأساسية لتشغيل avifenc هي تعيين ملفات الإدخال والإخراج.

./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

توفّر Avifenc العديد من الخيارات التي ستؤثر في الجودة والسرعة. إذا كنت تريد الاطّلاع على الخيارات ومعرفة المزيد من المعلومات عنها، ما عليك سوى تشغيل ./avifenc.

أصبحت لديك الآن صورة ثانية بتنسيق AVIF.

  1. تسريع برنامج الترميز.

هناك مَعلمة --jobs التي قد يكون من الجيد تغييرها حسب عدد النوى المثبَّتة في جهازك هي المَعلمة --jobs. تحدِّد هذه المَعلمة عدد سلاسل المحادثات التي ستستخدمها avifenc لإنشاء صور AVIF. جرِّب تشغيل سطر الأوامر هذا.

./avifenc happy_dog.jpg example.avif --jobs 8

سيطلب ذلك من avifenc استخدام 8 سلاسل محادثات عند إنشاء صورة AVIF. يساعد الجهاز على تسريع ترميز AVIF بمقدار 5 مرات.

5- عرض صور AVIF في صفحة ويب

الآن لنظهر للعالم كل عملك الشاق.

  1. أنشِئ صفحة ويب لعرض صورة AVIF.

إنشاء ملف باسم avif_example.html

افتح avif_example.html في محرِّر النصوص واكتب هذا الرمز:

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

انسخ ملف المصدر (في حالتي happy_dog.jpg) وملف AVIF (eaxmple.avif) في الدليل نفسه كملف avif_example.html.

نستخدم العنصر لعرض صورة AVIF إذا كان المتصفّح يتيح استخدام AVIF، مع السماح باستخدام تنسيق JPEG في حال عدم توافقه مع المتصفّح. يمكنك العثور على مزيد من المعلومات حول هنا.

  1. افتح صفحة الويب في Chrome.

يمكنك فتح ملف html من خلال سحب avif_example.html إلى Chrome. يمكنك أيضًا فتح ملف html من خلال عرض avif_example.html من خادم HTTP.

من المفترض أن يتم الآن عرض صورة AVIF في Chrome. يمكنك اختبار ذلك من خلال النقر بزر الماوس الأيمن على الصورة واختيار Save image as... الذي سيؤدي إلى فتح مربّع حوار يتضمن example.avif. يمكنك أيضًا فتح أدوات مطوّري برامج Chrome ومعرفة ما إذا تم تنزيل example.avif.

6- إنشاء صور AVIF متحركة

  1. حوِّل الوسائط المصدر إلى تنسيق y4m.

يتيح avifenc استخدام y4m كإدخال لإنشاء صور AVIF متحركة. يُعدّ استخدام FFmpeg خيارًا رائعًا لإنشاء ملفات y4m.

ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m
  1. أنشئ صورة متحركة بتنسيق AVIF.

نفِّذ هذا الأمر لإنشاء صورة AVIF متحركة من ملف y4m.

avifenc ice_qcif_15fps.y4m animated.avif

لديك الآن صورة متحركة خاصة بك بتنسيق AVIF.

  1. عرض صورة AVIF المتحركة في صفحة ويب

إنشاء ملف باسم avif_animated_example.html

افتح avif_animated_example.html في محرِّر النصوص واكتب هذا الرمز:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

انسخ الملف المصدر (في الحالة المذكورة أعلاه ice_qcif_15fps.gif) وملف AVIF (animated.avif) في الدليل نفسه مثل avif_animated_example.html.

  1. افتح صفحة الويب في Chrome.

يمكنك فتح ملف html من خلال سحب avif_animated_example.html إلى Chrome. يمكنك أيضًا فتح ملف html من خلال عرض avif_animated_example.html من خادم HTTP.

من المفترض أن يتم الآن عرض صورة AVIF المتحركة في Chrome.

في حال استخدام نموذج الوسائط المقدَّم، يجب أن يظهر على النحو التالي:

صورة متحركة للتزلج على الجليد

يمكنك اختبار صورة متحركة بتنسيق AVIF من خلال النقر بزر الماوس الأيمن على الصورة واختيار Save image as...، ما يؤدي إلى فتح مربّع حوار يتضمن animated.avif. يمكنك أيضًا فتح أدوات مطوّري برامج Chrome ومعرفة ما إذا تم تنزيل animated.avif.

7. تهانينا!

لقد انتهيت من الدرس التطبيقي حول ترميز صور AVIF.

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