AVIF أم WebP: أيهما أصغر، ومتى

ما هما AVIF وWebP

WebP صيغة صور من Google أُعلن عنها عام 2010. يضغط وضعها الفاقد للبيانات الصورةَ بالطريقة التي يضغط بها برنامج ترميز الفيديو VP8 إطارًا واحدًا، بينما صُمّم وضع منفصل غير فاقد، هو VP8L، للرسوم ذات الحواف الحادة والألوان القليلة. يدعم الوضعان الشفافية، ويمكن لـ WebP المتحرك أن يحلّ محلّ GIF.

AVIF (AV1 Image File Format) يخزّن إطارًا مضغوطًا بـ AV1، برنامج ترميز الفيديو المعفى من رسوم الترخيص التابع لـ Alliance for Open Media، داخل حاوية HEIF. صدرت مواصفته 1.0 عام 2019. أدوات الترميز في AV1 أحدث من أدوات VP8 بعقد كامل، لذا يحتفظ AVIF بتفاصيل أكثر لكل بايت في الصور الفوتوغرافية، ويضيف ألوانًا بعمق 10 و12 بت وHDR. الثمن هو زمن الترميز: إنتاج ملف AVIF يستهلك من المعالج أكثر بكثير من WebP للصورة نفسها، ولهذا تحوّل خدمات الصور كل صورة مرة واحدة وتخزّن النتيجة مؤقتًا.

لم يعد دعم المتصفحات هو السؤال الحاسم. بحسب caniuse.com (بيانات 30 سبتمبر 2026)، تعرض نحو 97% من المتصفحات المستخدمة صيغة WebP ونحو 95% صيغة AVIF. يعمل WebP منذ Chrome 32 وFirefox 65 وSafari 14 (على macOS 11 أو أحدث)، ويعمل AVIF منذ Chrome 85 وFirefox 93 وSafari على iOS 16 وSafari 16.4 على Mac (والصور الثابتة منذ Safari 16.1 على macOS 13 Ventura أو أحدث) وEdge 121. وهذه النسبة الصغيرة المتبقية هي سبب أهمية البديل الاحتياطي، ومع التفاوض على الصيغة في الخادم لا يكلّف هذا البديل شيئًا.

أيهما أصغر؟ يتوقف ذلك على الصورة

تذكر معظم المقارنات رقمًا واحدًا، مثل "WebP أصغر بنسبة 30%" أو "AVIF يقلّص صورك إلى النصف"، وهو متوسط محسوب على الصور الفوتوغرافية. لكن الموقع الحقيقي يقدّم أيضًا لقطات شاشة وشعارات وأيقونات، وهناك قد ينقلب الترتيب. في 5 أكتوبر 2026 مرّرنا أربع صور عبر محسِّن الصور الذي يعمل خلف CDN.com.tr، بإعداداته الفعلية في الإنتاج، وعددنا البايتات التي أنتجتها كل صيغة.

صورة إخبارية بصيغة JPEG، بأبعاد 1920×1080. الأصل 262,025 بايت؛ JPEG المحسَّن 186,137؛ WebP 113,860؛ AVIF 86,936. الحالة النموذجية: WebP أصغر من JPEG المحسَّن بنسبة 39%، وAVIF أصغر من WebP بنسبة 24% أخرى، أي ثلث بايتات الأصل.

صورة إخبارية بصيغة JPEG، بأبعاد 926×594. الأصل 131,472 بايت؛ JPEG المحسَّن 93,348؛ WebP 89,360؛ AVIF 77,452. النوع نفسه من الصور لكنها أصغر ومضغوطة جيدًا أصلًا: مقارنةً بـ JPEG يوفّر WebP نسبة 4% فقط، وAVIF نسبة 17%.

لقطة شاشة للوحة التحكم بصيغة PNG، بأبعاد 1156×775. الأصل 105,078 بايت؛ PNG المحسَّن (pngquant وoptipng) 40,379؛ WebP 41,218؛ AVIF 27,942. الألوان المسطّحة والنصوص هي أفضل ما يجيده PNG ذو لوحة الألوان: خرج WebP أكبر من PNG بمقدار 839 بايت، بينما بقي AVIF أصغر منه بنسبة 31%.

أيقونة الموقع بصيغة PNG، بأبعاد 16×16. الأصل 701 بايت؛ PNG المحسَّن 483؛ WebP 314؛ AVIF 682. في هذا الحجم تحسم الحاوية النتيجة: 429 بايت من أصل 682 في ملف AVIF هي صناديق HEIF تصف الصورة قبل أي بكسل، بينما لا يتجاوز غلاف WebP 46 بايت. انتهى AVIF أكبر من PNG بنسبة 41%، وكان WebP الأصغر.

ما ينتقل إلى المواقع الأخرى هو النمط. يتفوّق AVIF بوضوح في الصور الفوتوغرافية ولقطات الشاشة المفصّلة؛ وWebP خيار ثانٍ آمن؛ وفي الرسوم المسطّحة قد يتفوّق PNG المحسَّن جيدًا على WebP، أما في الأيقونات الصغيرة فيطغى العبء الثابت لـ AVIF على ضغطه الأفضل. تتوقف البايتات الدقيقة على المرمِّز وإعداداته، فاقرأها على أنها قياس خدمة واحدة لا قانونًا. لا توجد نسبة تصحّ لكل الصور: الاختبار الموثوق هو أن ترمّز الصورة وتقارن البايتات.

كيف يختار الخادم الصيغة

يحمل كل طلب صورة ترويسة Accept تسرد الصيغ التي يستطيع المتصفح عرضها. يرسل Chrome القيمة image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8، والمتصفح الذي لا يدعم AVIF لا يذكر image/avif. يقرأ الخادم أو الـ CDN الذي يحوّل الصور هذه القائمة ويجيب على الرابط نفسه بـ AVIF أو WebP أو الأصل. لا يتغيّر اسم الملف، فقد يصل hero.png بصيغة AVIF: ترويسة Content-Type، لا الامتداد، هي التي تخبر بما أُرسل.

ولأن للرابط الواحد الآن أكثر من إجابة ممكنة، يجب أن تحمل الاستجابة Vary: Accept. فهي تطلب من كل ذاكرة تخزين مؤقت في الطريق، من الـ CDN إلى وكيل الشركة إلى المتصفح، أن تحتفظ بنسخة منفصلة لكل قيمة من قيم Accept. ومن دونها قد تسلّم ذاكرة تخزين مشتركة ملف AVIF الذي تلقّاه زائر إلى الزائر التالي، ومتصفحه لا يستطيع عرضه.

أما الطريقة الأخرى فتنقل الاختيار إلى HTML. يسرد عنصر <picture> ملفات <source> مع type="image/avif" وtype="image/webp"، فيأخذ المتصفح أول نوع يدعمه، ويكون <img> في الداخل هو البديل. لا تحتاج هذه الطريقة إلى منطق في الخادم ولا إلى Vary، لكن عليك أن تنتج كل نسخة وتخزّنها بنفسك وتُبقي الترميز محدّثًا. وفي الحالتين، تكفي ثلاثة طلبات لمعرفة ما يتلقّاه المتصفح فعلًا.

صورة واحدة وثلاث ترويسات Accept: قارن ما يعود

# a browser that accepts AVIF and WebP
curl -so /dev/null -w '%{content_type} %{size_download} bytes\n' \
  -H 'Accept: image/avif,image/webp,*/*' https://example.com/hero.png

# a browser with WebP only
curl -so /dev/null -w '%{content_type} %{size_download} bytes\n' \
  -H 'Accept: image/webp,*/*' https://example.com/hero.png

# a client that asks for nothing in particular
curl -so /dev/null -w '%{content_type} %{size_download} bytes\n' \
  -H 'Accept: */*' https://example.com/hero.png

# the header that keeps shared caches honest (a GET, not HEAD)
curl -s -D - -o /dev/null -H 'Accept: image/avif,*/*' \
  https://example.com/hero.png | grep -i '^vary'

افحص ما يقدّمه موقعك

ينفّذ الفاحص أدناه هذه الطلبات لصفحة كاملة. فهو يقرأ HTML الصفحة، ويأخذ ما يصل إلى 20 صورة من <img> وsrcset و<picture> وog:image، ويطلب كل صورة مرتين: مرة كما يطلبها متصفح حديث (Accept: image/avif,image/webp,…)، ومرة كعميل يقبل أي شيء (Accept: */*). ويقرأ البايتات الأولى من كل إجابة ليعرف الصيغة الحقيقية مهما قال اسم الملف، ويعدّ البايتات، ويعرض ترويسة Vary وحالة التخزين المؤقت. ويمكنك أيضًا إدخال عنوان صورة واحدة.

تخرج الطلبات من خادمنا في تركيا، لذا قد تجيبنا الـ CDN من موقع غير الذي تجيب منه زوارك. أما الصور التي يضيفها JavaScript بعد تحميل الصفحة وخلفيات CSS فليست في HTML ولا تُفحص. تجد كل الحدود في صفحة الفاحص نفسها.

قراءة النتائج

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

الأصلي فقط. حتى المتصفح الذي طلب AVIF وWebP تلقّى JPEG أو PNG أو GIF، أي أن لا شيء في الطريق يحوّل الصورة. وإذا وصلت بعض الصور بصيغة AVIF وبعضها بصيغتها الأصلية فقط، فابحث عمّا يجمع المجموعة الثانية: مضيف آخر، أو مسار لا تغطيه أي قاعدة، أو امتداد يتجاهله المحوِّل.

الملف نفسه لكل متصفح. تلقّى الطلبان الصيغة نفسها. هذه نتيجة موقع لا يتفاوض على الصيغة، وكذلك نتيجة موقع يقدّم ملفات .webp للجميع أصلًا: كل المتصفحات الحالية تعرضها، لكن التوفير الإضافي الذي يقدّمه AVIF يبقى غير مستغَل. ولأنه لا شيء للمقارنة، لا يظهر أي توفير.

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

تقييد معدّل الطلبات أو الحظر. تجيب بعض المواقع على الطلبات الآلية بالرمز 429 أو 403 أو بفحص للروبوتات أو بصفحة 503 صغيرة. عندها يتوقف الفاحص عن مراسلة ذلك المضيف حتى نهاية الفحص، ويضع على الصور المتبقية علامة "لم يُفحص". وهذا يقول شيئًا عن حماية الموقع لا عن صوره: أعد المحاولة بعد بضع دقائق، أو افحص عنوان صورة واحدة مباشرة.

استراتيجية معقولة: AVIF أولًا، ثم WebP، ولا شيء أكبر أبدًا

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

ثم أضف القاعدة التي علّمتنا إياها أيقونة الموقع: قارن البايتات صورةً صورة، ولا ترسل أبدًا ملفًا محوَّلًا أكبر من الملف الذي كنت سترسله لولا التحويل. الصيغة وسيلة، والغاية بايتات أقل. أما المسار الذي يحوّل بلا تمييز فيجعل جزءًا من صورك أثقل ثم يصفها بأنها محسَّنة.

ملاحظتان عمليتان. حوّل مرة واحدة وخزّن النتيجة مؤقتًا، على حافة CDN أو في خطوة البناء، بدل التحويل مع كل طلب: فترميز AVIF هو الجزء المكلف. واحتفظ بالشعارات والأيقونات المرسومة، لا المصوَّرة، بصيغة SVG متى أمكن: لا شيء فيها للتحويل، وتبقى حادّة على كل شاشة.

AVIF وWebP على CDN.com.tr

تحسين الصور مفتاح في لوحة التحكم، للحساب كله أو لقاعدة توصيل واحدة. عند تفعيله تقدّم الحافة صور JPEG وPNG بصيغة WebP للمتصفحات التي تدعمها؛ تحوّل خدمة الصور لدينا كل صورة مرة واحدة، وتخزّن الحافة النتيجة مؤقتًا. ويمكنك للحساب أيضًا اختيار WebP + AVIF: عندها تتلقّى المتصفحات التي تقبل AVIF صيغة AVIF، والمتصفحات الحديثة الأخرى WebP، والبقية الصورة بصيغتها الأصلية، وكل ذلك من الرابط نفسه، مع Vary: Accept ونسخة مخزّنة منفصلة لكل صيغة.

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