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

1. افتح Squoosh.
2. أفلِت صورة محلية في Squoosh.

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

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

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

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

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

يمكنك عرض صورة AVIF عن طريق سحبها إلى Chrome.

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

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

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

يستخدم Chrome مكتبة libavif لعرض الصور بتنسيق AVIF.

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

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

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

cd libavif/

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

libyuv مهمة لتسريع أداء عمليات تحويل الألوان.

3. أنشئ أداة الترميز 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 ثانية خاصة بك.

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

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

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

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 ‏ (example.avif) إلى الدليل نفسه الذي يحتوي على avif_example.html.

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

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

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

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

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

لا يشمل هذا الدرس التطبيقي حول الترميز كيفية تثبيت FFmpeg على نظامك. لمزيد من المعلومات حول كيفية الحصول على FFmpeg على نظامك، يُرجى الاطّلاع على مستندات FFmpeg.

لقد أنشأتُ ملف y4m لتستخدمه في حال لم يكن لديك ملف وسائط مصدر: ice_qcif_15fps.y4m. الملف مأخوذ من Xiph.org Video Test Media.

ملفات Y4m غير مضغوطة، لذا يمكن أن يكون حجمها كبيرًا جدًا.

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

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

ffmpeg -i ice_qcif_15fps.y4m animated.avif

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

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

أنشئ ملفًا باسم avif_animated_example.html.

إليك ملف gif يمكنك استخدامه في حال لم يكن لديك ملف وسائط مصدر: ice_qcif_15fps.gif.

افتح ملف 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.

3. افتح صفحة الويب في 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.

لا يتم ضغط ملفات Y4m، لذا يمكن أن تكون كبيرة جدًا.

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

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

لقد أنشأتُ ملف y4m لتستخدمه في حال لم يكن لديك ملف وسائط مصدر: ice_qcif_15fps.y4m. الملف مأخوذ من Xiph.org Video Test Media.

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

./avifenc ice_qcif_15fps.y4m animated.avif

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

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

أنشئ ملفًا باسم avif_animated_example.html.

لقد أنشأتُ ملف GIF لتستخدمه في حال لم يكن لديك ملف وسائط مصدر: ice_qcif_15fps.gif.

افتح ملف 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.

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

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

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

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

باستثناء ملفات AVIF المتحركة، فهي ذات جودة أفضل بكثير.

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

5. تغيير جودة ترميز 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 في منشور رائع من "جيك أرشيبالد".