عرض صور AVIF

1- مقدمة

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

ما هو تنسيق AVIF؟

‫AVIF هو تنسيق صور مشتقّ من دفق بتات الفيديو 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 من المربّع المنسدل Compress.

المربّع المنسدل في 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 بحيث يتم ربطها بشكل ثابت بمكتبات التشفير libaom، وفك التشفير dav1d، ومعالجة libyuv.

  1. أنشئ أداة تشفير سطر الأوامر 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

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

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

./avifenc happy_dog.jpg example.avif

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

  1. تغيير جودة تشفير AVIF

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

‫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.

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

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

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

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

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

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

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

ffmpeg -i 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 متحركة باستخدام avifenc

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

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

ffmpeg -i input.gif -pix_fmt yuvj444p -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 تم تنزيلها.

  1. تغيير جودة تشفير 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.