عرض صور AVIF

1. مقدمة

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

ما هو تنسيق AVIF؟

‫AVIF هو تنسيق صور مشتق من بث الفيديو بتنسيق AV1. تم تصميم تنسيق AVIF لتحقيق كفاءة عالية في الضغط.

لماذا AVIF؟

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

ما ستتعلمه

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

المتطلبات

أي متصفّح رئيسي
محرِّر نصوص
cmake
git
ninja
صورة لقد قدّمتُ واحدة هنا
FFmpeg

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

‫Squoosh هو تطبيق ويب لضغط الصور، ويتيح لك ضغط صورك بسهولة إلى صور بتنسيق AVIF.

افتح https://squoosh.app
إفلات صورة محلية على Squoosh

لقطة شاشة من Squoosh

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

المربّع المنسدل في Squoosh

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

زر تنزيل Squoosh

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

تنزيل صورة AVIF

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

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

3- أداة الترميز avifenc لسطر الأوامر

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

احصل على الرمز.

git clone https://github.com/AOMediaCodec/libavif.git

غيِّر الدليل إلى libavif.

cd libavif/

هناك العديد من الطرق المختلفة التي يمكنك من خلالها ضبط avifenc وlibavif لإنشاء الإصدار. يمكنك الاطّلاع على مزيد من المعلومات على libavif. سننشئ avifenc بحيث يتم ربطه بشكل ثابت ببرنامج الترميز libaom وبرنامج فك الترميز dav1d ومكتبات المعالجة libyuv.

أنشئ أداة ترميز سطر الأوامر avifenc.

من المستحسن إنشاء دليل إصدار لـ avifenc.

mkdir build

انتقِل إلى دليل الإنشاء.

cd build

أنشئ ملفات الإصدار الخاصة بـ avifenc.

cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

إنشاء avifenc

make

لقد أنشأت avifenc بنجاح.

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

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

إنّ أبسط المَعلمات التي يجب ضبطها لتشغيل avifenc هي ملفات الإدخال والإخراج.

./avifenc happy_dog.jpg example.avif

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

تغيير جودة ترميز AVIF

المَعلمة الوحيدة التي قد تحتاج إلى تغييرها في ترميز AVIF هي المَعلمة quality. ‫quality هي مَعلمة تستبدل جودة الصورة المضغوطة بحجم الملف. على سبيل المثال، سيكون حجم الملف العالي الجودة (-q 90) أكبر بكثير من حجم الملف المنخفض الجودة (-q 20)، ولكن سيبدو الملف العالي الجودة أفضل بكثير.

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

حان الوقت الآن لنعرض للعالم كل عملك الجاد.

أنشئ صفحة ويب لعرض صورة 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.

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

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

إحدى طرق فتح ملف html هي سحب avif_example.html إلى Chrome. هناك خيار آخر لفتح ملف HTML وهو عرض avif_example.html من خادم HTTP.

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

6. إنشاء صور AVIF متحركة باستخدام FFmpeg

أنشئ صورة AVIF متحركة.

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

ffmpeg -i ice_qcif_15fps.y4m animated.avif

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

عرض صورة 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.

افتح صفحة الويب في 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 متحركة باستخدام avifenc

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

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

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m

أنشئ صورة AVIF متحركة.

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

./avifenc ice_qcif_15fps.y4m animated.avif

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

عرض صورة 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.

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

إحدى طرق فتح ملف html هي سحب avif_animated_example.html إلى Chrome. هناك خيار آخر لفتح ملف HTML وهو عرض avif_animated_example.html من خادم HTTP.

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

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

حلبة تزلّج على الجليد متحركة

تغيير جودة ترميز AVIF

حجم ملف ice_qcif_15fps.gif أكبر بحوالي 7 مرات مع جودة أسوأ بكثير. يمكنك تغيير جودة AVIF لتتطابق تقريبًا مع جودة ice_qcif_15fps.gif من خلال تغيير مَعلمة الجودة إلى 20.

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

الآن، أصبح ملف AVIF المتحرّك والملف ice_qcif_15fps.gif يتمتّعان بالجودة نفسها تقريبًا، ولكن حجم ملف GIF أكبر بحوالي 22 مرة.

8. تهانينا!

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

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