الاختيار بين AVIF وWebP يبدأ من الكاش

يمكنك إنهاء مقارنة AVIF وWebP بجدول جميل، ثم تخريب النتيجة كلها داخل الـ CDN. يحدث ذلك عندما يرجع الرابط نفسه ملف AVIF لمتصفح وملف WebP لمتصفح آخر، بينما يحتفظ الكاش بنسخة واحدة فقط.

قبل سؤال "أي صيغة أصغر؟"، تأكد أن مسار الطلب يعرف كيف يفرّق بين النسختين.

لا تستخدم صورة واحدة للحكم

اختر صوراً تشبه ملفات المشروع الفعلية. صورة فوتوغرافية مليئة بالتفاصيل لا تتصرف مثل لقطة شاشة فيها نص صغير، وصورة منتج بخلفية بيضاء لا تختبر الشفافية.

ثبّت هذه القيم أثناء المقارنة:

• أبعاد المصدر وأبعاد الخرج؛
• القص والجودة؛
• نسخة encoder وإعداداته.

سجّل الحجم، ثم افتح النتيجة بالحجم الطبيعي وكبّر المناطق الحساسة. إذا ظهرت هالات حول النص أو تغيّرت حواف المنتج، فلا معنى لفوز الملف في عمود الـ bytes.

يستخدم Keenpix قيمة الجودة نفسها عند تمرير الصيغتين إلى Sharp. أما AVIF فيُشفّر عند effort يساوي 3 لتقليل كلفة التحويل عند غياب النسخة من الكاش. هذا قرار خاص بمسار التشغيل، وليس benchmark عاماً لصالح صيغة على أخرى.

كيف يختار Keenpix الصيغة؟

عند تفعيل Auto format واستخدام fmt=auto، يقرأ Keenpix الهيدر Accept:

1. إذا وجد image/avif يرجع AVIF.
2. إذا لم يجدها ووجد image/webp يرجع WebP.
3. في غير ذلك يرجع JPEG.

اختبر الفروع الثلاثة على الرابط نفسه:

URL='https://images.example.com/img/https://assets.example.com/hero.jpg?project=store&w=1200&q=80&fmt=auto'

curl -sS -D avif.headers -o avif.bin \
  -H 'Accept: image/avif,image/webp,image/*' "$URL"
curl -sS -D webp.headers -o webp.bin \
  -H 'Accept: image/webp,image/*' "$URL"
curl -sS -D jpeg.headers -o jpeg.bin \
  -H 'Accept: image/jpeg,image/*' "$URL"

wc -c avif.bin webp.bin jpeg.bin

راجع Content-Type وVary وCache-Control. بعد ذلك افتح الملفات الثلاثة. أمر wc يخبرك بالحجم، لكنه لا يرى تشوّه التدرجات أو النص.

Vary: Accept وحده لا يكفي دائماً

يرسل Keenpix الهيدر Vary: Accept، وبذلك يعلن أن محتوى الاستجابة يتغير حسب طلب المتصفح. لكن إعداد الـ CDN قد يحتاج إلى قاعدة variants أو مفتاح كاش يضم قيمة Accept.

اختبره بعد إفراغ الكاش: اطلب AVIF ثم WebP، وبعدها كرر الطلبين حتى يصبحا HIT. تأكد أن Content-Type بقي صحيحاً في الحالتين. إذا عادت صيغة الطلب الأول للطلب الثاني، لا تستخدم fmt=auto خلف هذا الإعداد.

ميزة Vary for Images في Cloudflare متاحة ضمن خطط Pro وBusiness وEnterprise. تحتاج إلى إعداد قاعدة variants وإلى امتداد صورة مناسب داخل المسار. وجود الهيدر في استجابة المصدر لا يفعّل الميزة وحده، ولا يثبت أن النسخ محفوظة بطريقة صحيحة على الحافة.

الحل الأبسط هو جعل الصيغة جزءاً من الرابط:

/hero.jpg?project=store&w=1200&q=80&fmt=avif
/hero.jpg?project=store&w=1200&q=80&fmt=webp

هنا يملك كل ملف مفتاحاً واضحاً في الكاش. يبقى على التطبيق اختيار الصيغة المدعومة، عبر <picture> مثلاً أو الروابط التي يولدها framework.

قاعدة عملية للاختيار

استخدم fmt=auto بعد التحقق عملياً من فصل النسخ داخل الـ CDN. وإذا كان Cloudflare هو طبقة التسليم، احتفظ بامتداد الصورة الأصلية داخل المسار. هكذا يمكن للمتصفح الحديث طلب AVIF مع بقاء JPEG صيغة احتياطية.

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

في لقطات الشاشة ذات الخطوط الصغيرة قد يكون WebP بجودة أعلى هو النتيجة الأفضل، حتى لو خرج AVIF بحجم أقل. المهم هو الملف الذي يصلح للنشر، لا أصغر رقم منفرد.

أصلح المقاس أولاً

لا تبدأ بالصيغة إذا كانت الصفحة تطلب صورة بعرض 2400 بكسل لعنصر عرضه 600. راجع srcset وsizes والأبعاد والجودة أولاً. بعدها قارن AVIF وWebP على النسخ التي سيحمّلها المستخدم فعلاً.

ولا تحتاج إلى خدمة صور خارجية لمجرد استخدام الصيغتين. يستطيع build ثابت أو محرّك framework إنشاءهما. تظهر فائدة Keenpix عندما تتغير المقاسات وقت الطلب، أو تأتي الصور من مصادر متعددة، أو تحتاج عدة تطبيقات إلى قواعد روابط موحّدة.

المراجع

مصادر التحقق بتاريخ 15 أغسطس 2026 هي مواصفات AVIF 1.2.0، ومواصفات حاوية WebP الرسمية، وإعدادات الخرج في Sharp، وشروط Vary for Images في Cloudflare، ومرجع parameters في Keenpix. أما دليل صيغ الصور في MDN فهو مرجع إضافي لدعم المتصفحات. لا توجد نسبة ضغط عامة في المقال لأن النتيجة تتغير مع المصدر والأبعاد والجودة وإعدادات encoder.