لصور موقع الويب: JPG أم AVIF؟

سؤال مصوغ صياغة خاطئة

سؤال «JPG أم AVIF» يفترض أن إحدى الصيغتين ستحلّ محل الأخرى. وهذا الافتراض خاطئ في سياق الويب.

فـ AVIF تتفوق على JPG في الكفاءة بفارق واضح. أما JPG فتقف في التوافق في موضع لا تستطيع AVIF بلوغه. والممارسة الاحترافية في تطوير الويب لا تختار بين الاثنتين — بل تقدّمهما معًا وتدع المتصفح يختار.

ومع ذلك، فلاتخاذ هذا القرار عن وعي لا بد من رؤية ما تقدّمه كل صيغة رؤيةً واضحة. وفي هذا المقال نُجري المقارنة بصدق.

الكفاءة: AVIF متقدمة بفارق واضح

عند الجودة البصرية نفسها تنتج AVIF عادةً ملفات أصغر بوضوح مقارنةً بـ JPG. ونسبة النصف تقريبًا التي تُذكَر على نطاق واسع تقريب، والمكسب الحقيقي يختلف اختلافًا كبيرًا من صورة إلى أخرى.

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

وهذا الفارق ليس هيّنًا في سياق الويب. فالصور أكبر بند في مجموع البيانات المنزَّلة في معظم الصفحات. وبيانات أقل تعني صفحة أسرع مباشرةً، خصوصًا على اتصالات الجوّال البطيئة.

كما تحمل AVIF أشياء لا تستطيع JPG حملها: قناة alpha، وعمقًا لونيًا 10-12 bit، ومجالًا لونيًا واسعًا، وHDR. فأنت لا تستطيع تقديم عنصر يحتاج إلى شفافية بـ JPG — بل تضطر إلى الانتقال إلى PNG وتدفع ثمنًا باهظًا في الحجم. أما AVIF فتحسم ذلك في ملف واحد.

التوافق: لا منافس لـ JPG

تدعم المتصفحات الرئيسية الحديثة صيغة AVIF. وهذه عتبة مهمة لموقعك، وهي المسوّغ الأساسي لأخذ AVIF على محمل الجدّ.

لكن الصورة لا تنتهي عند هذا:

• الأجهزة وأنظمة التشغيل القديمة. فالهواتف والحواسيب التي لم تتلقَّ تحديثًا منذ زمن طويل لا تستطيع عرض الملف.
• إصدارات المتصفحات القديمة. فاستخدام متصفحات غير محدَّثة ظاهرة حقيقية في البيئات المؤسسية والأسواق منخفضة الدخل.
• الملف الذي ينزّله المستخدم. فحين ينقر الزائر بالزر الأيمن على الصورة ويحفظها يصير بين يديه ملف AVIF وقد لا يستطيع فتحه في برنامج سطح المكتب لديه.
• الأنظمة الخارجة عن نطاقك. فقد يواجه مشكلةً من يرفع صورتك إلى منصة أخرى، أو يرفقها ببريد إلكتروني، أو يضعها في وثيقة.

ولا تحدث أي من هذه المشكلات مع JPG. فهي تعمل في كل مكان منذ ما يزيد على ثلاثين عامًا، ولن يتغير ذلك في المستقبل القريب.

الجودة: التحويل لا يكسبك شيئًا

فلنُزِل مغالطة شائعة. تحويل ملفات JPG الموجودة لديك إلى AVIF لا يحسّن الصورة.

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

والأهم من ذلك أنك إن اخترت إعداد جودة منخفضًا جدًا تراكبت طبقتا ضغط مع فقد وخرجت النتيجة أسوأ من المصدر بصورة مرئية بالعين. فاستخدم عند إجراء التحويل قيمة جودة معقولة؛ فلأن AVIF كفؤة أصلًا سيكون لك حتى عندها مكسب جدي في الحجم.

وإن كان بحوزتك مصدر أنظف من JPG — الصورة الفوتوغرافية الأصلية، أو نسختها بصيغة PNG، أو الملف الخام — فإن إنتاج AVIF منه يعطي نتيجة أفضل دائمًا.

عبء العمل: لنكن واقعيين

التكلفة المتجاهَلة للانتقال إلى AVIF تكلفة تشغيلية.

فيلزمك إنتاج نسخة ثانية لكل صورة وتخزينها. ويلزمك تحديث قوالب صفحاتك لتقوم بالتقديم الاحتياطي. ويلزمك تكرار هذه العملية لكل صورة تُضاف حديثًا.

وفي موقع صغير ثابت يكون هذا عملًا يُنجَز مرة واحدة. أما في موقع يُضاف إليه المحتوى باستمرار فلا يكون مستدامًا دون إقامة أتمتة. فإن كان نظام إدارة المحتوى لديك يستطيع إنتاج نسخ الصور تلقائيًا كان الأمر سهلًا؛ وإن كان لا يستطيع لزمك تصميم عملية.

وضع في حسبانك أيضًا أن ترميز AVIF ثقيل من الناحية الحسابية. فتحويل أرشيف كبير يستغرق وقتًا أطول بوضوح مقارنةً بالحفظ بصيغة JPG.

الجواب الاحترافي: كلتاهما معًا

الحل الحقيقي لهذا النقاش هو ألّا تختار.

فوسم picture في HTML يتيح لك تعريف أكثر من مصدر للصورة نفسها. ويقرأ المتصفح القائمة من أعلى إلى أسفل وينزّل أول ما يستطيع دعمه. فالمتصفح الذي يدعم AVIF يأخذ AVIF وينتفع بالسرعة؛ والمتصفح الذي لا يدعمها ينزل بهدوء إلى JPG ولا يلاحظ الزائر شيئًا.

وجمال هذه المقاربة أنها تزيل المخاطرة إزالةً تامة. فلا يرى أي زائر صورة مكسورة، ويُكافَأ من يدعمها.

والنتيجة العملية: أنتج AVIF، ولا تحذف ملفات JPG. فالأصول صارت الآن طبقتك الاحتياطية.

أين تستخدم أيًّا منهما؟

توصيات ملموسة:

• صور hero واللافتات الكبيرة والمعارض: هذه أكثر ما يكسب من AVIF، لأن أحجامها كبيرة. قدّمها بتقديم احتياطي.
• الأيقونات الصغيرة والرسوم البسيطة: المكسب متواضع لأنها صغيرة أصلًا؛ وقد لا يستحق عبء العمل الإضافي. وإن كان المتجه (SVG) مناسبًا فهو جواب أفضل في أغلب الأحيان.
• الصور المتوقَّع أن ينزّلها المستخدم: كتالوج المنتجات، والحقيبة الصحفية، والصورة القابلة للتنزيل. قدّم JPG هنا؛ فقدرة المستخدم على فتح الملف أهم من السرعة.
• العناصر التي تحتاج إلى شفافية: تقدّم AVIF هنا ميزة جدية في الحجم مقارنةً بـ PNG، لكن يجب أن يكون الاحتياطي PNG.

الخلاصة

AVIF رابحة في الكفاءة، وJPG رابحة في التوافق. وهاتان الحقيقتان لا تتناقضان؛ بل تكمّل إحداهما الأخرى. فالانتقال إلى AVIF في موقع تغلب عليه الصور يحقق مكسبًا حقيقيًا في السرعة، لكن ينبغي وضع JPG في موضع الاحتياطي بدل إزالتها. ولا تنسَ أن التحويل لا يكسبك جودة، بل يخسرك إياها عند الإعدادات المنخفضة. ولا تستهن بعبء العمل — فالتحسين الذي لا يمكن الاستمرار عليه أشدّ ضررًا من تحسين لم يُجرَ أصلًا.