إنّ تنسيق ملف صورة AV1 (AVIF) هو ترميز يستند إلى برنامج ترميز الفيديو AV1 مفتوح المصدر، وهو إصدار أحدث من WebP ويعمل في متصفّح Chrome وOpera منذ عام 2020 ومتصفّح Firefox في العام 2021 وفي متصفّح Safari في العام 2022. كما هو الحال مع WebP، يهدف AVIF إلى معالجة كل حالة استخدام متوقعة للصور النقطية على الويب: صور متحركة تشبه ملفات GIF، وشفافية تشبه PNG، وتحسين الجودة الإدراكية في أحجام ملفات أصغر من JPEG أو WebP.
لا يزال AVIF واعدًا حتى الآن. يُظهر إطار عمل الاختبار الذي طوّرته شركة Netflix، وهي عضو مؤسِّس في Alliance for Open Media، وهي المجموعة المسؤولة عن تطوير برنامج ترميز AV1، انخفاضًا كبيرًا في أحجام الملفات عند مقارنتها بتنسيق JPEG أو WebP. وقد قيّمت دراسات إضافية أجرتها Cloudinary وفريق برامج الترميز في Chrome مدى ملاءمة هذا الترميز مقارنةً بمعايير الترميز الحالية.
على الرغم من أنّ الأدوات محدودة نسبيًا، يمكنك ويجب أن تبدأ بتجربة استخدام AVIF اليوم، وهي إحدى الترميزات التي يوفّرها Squoosh:
المتصفحات المتوافقة
والآن، إذا وجدت نفسك تتساءل عن سبب قضاءنا الكثير من الوقت في مناقشة تنسيق JPEG، وكان بإمكان AVIF وWebP تقديم نتائج ذات جودة أعلى وأحجام ملفات أصغر بكثير، فذلك لأنهما - وأي ترميز جديد للصور - يأتيان مع صيد كبير. ويضمن التوافق مع ملفات GIF وPNG وJPEG في جميع المتصفحات، وقد مرّ عقود. مقارنةً بتنسيقات الصور القديمة، يُعدّ AVIF جديدًا تمامًا، وعلى الرغم من أنّ التوافق مع WebP ممتاز في المتصفّحات الحديثة، لا يتوفّر على الويب بأكمله.
وكما ترى، قد بذلنا وقتًا ومجهودًا هائلاً في تطوير تنسيقات جديدة للصور بهدف تحسين الجودة وحجم النقل. تهدف تنسيقات مثل WebP وAVIF وJPEG XL (غير متوافقة في أي متصفّح) إلى أن تكون حلاً موحدًا للصور النقطية على الويب، كما هو الحال مع الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) إلى المتجهات. أما البعض الآخر، مثل JPEG 2000 (المدعوم من Safari فقط)، فقد كان يهدف إلى تلبية جميع حالات الاستخدام نفسها مثل تنسيق JPEG الأساسي، ولكن مع تحسين طرق الضغط لتقديم صورة متشابهة من الناحية المرئية ولكنها أصغر بكثير.
في حين أن بعض هذه التنسيقات الجديدة تشترك في اسم JPEG، تختلف ترميزاتها بشكل أساسي عن جافا سكريبت. لن يتمكن المتصفح الذي لا يدعم ترميزًا معينًا من تحليل ملف الصورة هذا على الإطلاق، كأنني طلبت منك ملء شبكة وحدات بكسل ورق الرسم البياني بلغة لا تفهمها. سيطلب المتصفح بيانات الصورة، ويحاول تحليلها، وعند تعذُّر ذلك، سيتجاهلها بدون عرض أي شيء على الإطلاق. قد يمثّل مصدر الصور الذي يتعذّر عرضه خارج المتصفّحات الحديثة نقطة إخفاق كبيرة بالنسبة إلى المحتوى الذي نقدّمه والويب بشكل عام، أي صورة معطّلة وإهدار النطاق الترددي لعدد كبير من المستخدمين حول العالم. ليس عليك التضحية بالويب الأكثر مرونة من أجل تحقيق أداء أفضل.
لطالما جعلنا صديقنا الوحيد <img> من الصعب جدًا استخدام أي تنسيق جديد للصور، مهما بدت له واعدة. يُرجى العِلم أنّ <img> كان يتيح استخدام ملف مصدر واحد فقط، وتم تحسينه بشكل كبير لنقل هذا الملف بسرعة كبيرة لدرجة أنّه لم نتمكّن من اعتراض هذا الطلب عبر JavaScript. حتى وقت قريب، كان الخيار الوحيد القابل للتطبيق هو عرض نوع جديد تمامًا من الصور لجميع المستخدمين، وطلب أحد التنسيقات "القديمة" عند ظهور خطأ في المتصفح، وهو ما يؤدي إلى إجراء عملية نقل ثانية للملفات بعد إهدار الأول.
لهذا السبب وغير ذلك، كان لا بد من التغيير في <img> كما كان منذ عقود. في الوحدة التالية، الصور المتجاوبة مع مختلف الأجهزة، ستتعرّف على الميزات التي تم توفيرها في مواصفات HTML لمعالجة هذه المشاكل وكيفية استخدامها في عملك اليومي.