AVIF مقابل WebP مقابل JPEG: ضغط مُقاس ومتى تختار كلًّا منها

آخر تحديث: 25 يوليو 2026

WebP هو الافتراضي لمعظم صور الويب: في اختباراتي أصغر بنسبة 56–64% من JPEG ويُعرض في كل متصفح حالي. AVIF يضغط أكثر — أصغر بنسبة 81–89% من JPEG — لكنه يُرمَّز أبطأ بحوالي 2–3×. احتفظ بـ JPEG للبريد الإلكتروني والأنظمة القديمة فقط. الأرقام أدناه مأخوذة من اختبار حقيقي على أربع صور أجريته بنفسي، لا من ادعاءات "AVIF أصغر بنسبة 50%" المستهلكة التي ينسخها كل دليل تنسيقات من الآخر.

إجابة سريعة: AVIF أم WebP أم JPEG؟

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

إذا قدَّمت تنسيقاً واحداً فقط، اختر WebP — يعمل في كل متصفح حالي ويوفر أكثر من نصف البايتات. إذا كان بإمكانك تقديم تنسيقات متعددة عبر <picture>، ابدأ بـ AVIF للصور الفوتوغرافية. يقوم Image Converter وImage Compressor بتصدير الثلاثة من صورة مصدرية واحدة.

لماذا ادعاء "AVIF أصغر بنسبة 50%" الشائع يقلل من قيمته

تكرر معظم أدلة التنسيقات الأرقام الثلاثة نفسها — "AVIF أصغر ~50% من JPEG"، "AVIF أصغر ~20% من WebP"، "WebP أصغر 25–34% من JPEG" — وكلها ترجع إلى دراسة أو اثنتين من البائعين يستشهد بها الجميع في دائرة. اختباري يروي قصة مختلفة: مقابل JPEG q80 بجودة مطابقة، خرج AVIF أصغر بنسبة 81–89%، لا 50%. وخرج WebP أصغر بنسبة 56–64%، لا 25–34%.

الفجوة مهمة لأن الوفورات الحقيقية تحقق مكاسب حقيقية في Core Web Vitals. إذا أخبرك دليل أن WebP يوفر "25–34%" وخططت النطاق الترددي بناءً على ذلك، فأنت تقلل الحساب بالنصف. أجريت اختبار الصور الأربع باستخدام مكوّنات libaom (AVIF) وlibwebp وmozjpeg من مكتبة sharp عند effort 4، والجدول أعلاه هو المخرجات الخام — أعد إنتاجه على صورك قبل الوثوق بأي نسبة، بما في ذلك نسبتي.

هل يبدو ملف AVIF الأصغر جيداً بالفعل؟

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

أنماط الفشل خاصة بالتنسيق، وتخبرك أين ينهار كل تنسيق:

الدرس العملي: أبقِ AVIF في نطاق الجودة 60–70 للصور الفوتوغرافية. تحت حوالي 30 تقريباً، يمسح AVIF التفاصيل بطريقة تُقرأ "خاطئة" أسرع من رنين JPEG الأكبر — تتحمل العين تشوّهات JPEG أفضل من تحملها لملمس مفقود.

مفاضلة وقت الترميز التي لا يقيسها أحد

كل دليل تنسيقات يؤكد "AVIF أبطأ في الترميز" ويمر. لم أجد واحداً يرسم المفاضلة الفعلية. قست وقت ترميز AVIF عبر منزلق effort على نفس الصورة الشخصية بجودة 65، والمنحنى ليس كما تفترض:

Effort 4 هو النقطة المثلى — أصغر ملف (9.8 KB) عند 209 ms مقبول. دفع effort إلى 6 جعل الملف أكبر (11.7 KB) وضاعف وقت الترميز ثلاث مرات إلى 536 ms. قضى المُرمِّز 2.5× أطول في البحث ووصل إلى نتيجة أسوأ. للمقارنة، WebP بنفس الجودة رُمِّز في حوالي 70 ms بصرف النظر عن effort، وJPEG في حوالي 45 ms.

الخلاصة: إذا رمَّزت مرة واحدة وقت الرفع، فالـ 200 ms لـ AVIF غير ذات أهمية. إذا رمَّزت عند كل طلب، فإن فجوة 3× مقابل WebP تتراكم، وeffort 4 (لا الحد الأقصى) هو الإعداد الذي يجب إصداره.

أي تنسيق لأي نوع صورة؟

هذا السؤال الذي يُطرح كثيراً على محركات الإجابة بالذكاء الاصطناعي، والإجابة مشروطة بمحتوى الصورة. بناءً على اختباري للأربعة أنواع:

إذا كان خط أنابيب البناء لا يستطيع إصدار AVIF بعد، فانتقل إلى WebP أولاً. إنه أسرع مكسب فردي — أكثر من نصف البايتات موفورة، دعم شامل — ويمكنك إضافة AVIF فوقه لاحقاً دون تغيير ترميز <img>.

كيف تقدّم الثلاثة دون كسر المتصفحات القديمة؟

استخدم عنصر <picture> بمصادر مُنمَّطة. يختار المتصفح أول نوع يدعمه ويتجاهل الباقي:

<picture>
  <source srcset="/img/product.avif" type="image/avif">
  <source srcset="/img/product.webp" type="image/webp">
  <img src="/img/product.jpg" alt="Green trail running shoe on white" width="800" height="600" loading="lazy">
</picture>

• احتفظ دائماً بـ <img> حقيقي مع src بصيغة JPEG كاحتياطي أخير.
• اضبط width وheight على <img> لمنع إزاحة التخطيط.
• حمِّل كسولاً الصور أسفل الطي؛ لا تحمّل كسولاً صورة البطل LCP.

كيف يؤثر اختيار التنسيق على Core Web Vitals؟

تتحكم الصور غالباً في Largest Contentful Paint (LCP) على الصفحات المثقلة بالصور. بايتات أصغر تعني وصول صورة البطل ورسمها أبكر. نسب أحجام ملفاتي تترجم تقريباً إلى نسب LCP:

Cumulative Layout Shift (CLS) مستقل عن التنسيق — يعتمد على ما إذا كنت تحجز مساحة عبر width/height، لا على تنسيق البايتات. اقرأ إرشادات Google حول الصور وCore Web Vitals ومرجع تنسيقات الصور لدعم فك الترميز الحالي.

متى يجب أن تختار JPEG مع ذلك؟

JPEG ليس قديماً — إنه الاحتياطي الشامل. احتفظ به لبريد HTML (معظم العملاء يزيلون WebP وAVIF)، وخلاصات الشركاء والأسواق التي تقبل JPEG فقط، والمتصفحات المدمجة القديمة التي تسبق WebP، والصور المصغّرة الصغيرة حيث يوفر إعادة الترميز كيلوبايتات أحادية الرقم.

أدلة ذات صلة

• ضغط الصور دون فقدان الجودة
• كيف تضغط صورة إلى أقل من 100KB
• كيف يعمل ضغط الصور
• قائمة فحص كاملة لتحسين الصور

أخطاء شائعة

• تقديم AVIF عملاق واحد وتخطي تغيير الحجم. التنسيق لا ينقذك من صورة 4000px تُعرض على 400px. غيّر الحجم أولاً، ثم رمِّز.
• مقارنة التنسيقات عند نفس رقم الجودة. AVIF q70 وWebP q85 وJPEG q90 تبدو متشابهة تقريباً. قارن عند جودة بصرية مطابقة.
• دفع جودة AVIF تحت 30. التنعيم يبدو أسوأ من JPEG أكبر.
• نسيان احتياطي <img>. <picture> بعلامات <source> فقط لا يعرض شيئاً على العملاء غير المدعومين.
• التحميل الكسول لصورة البطل. يجب أن تُحمَّل صورة LCP بفارغ الصبر مع fetchpriority="high".

ترتيب إطلاق بسيط

1. قِس بايتات الصور وLCP عبر PageSpeed Insights.
2. أضف WebP كاحتياطي خلف JPEG — مكسب سريع، بلا مخاطرة توافق.
3. أضف مصادر AVIF فوق WebP في <picture> للصور الفوتوغرافية.
4. اضغط وغيّر حجم كل صورة إلى حجم عرضها قبل الترميز.
5. احجز الأبعاد (width/height) على كل صورة لتثبيت CLS.
6. أعد القياس للتأكد من انخفاض LCP وعدم وجود طلبات 404.

الأسئلة الشائعة

هل AVIF أصغر دائماً من WebP؟

في اختباري للأربع صور، نعم — كان AVIF أصغر بنسبة 60–73% من WebP بجودة مطابقة عبر الأنواع الأربعة. الرسوم المسطحة ولقطات الشاشة قد تضيق الفجوة، لكن AVIF فاز في كل فئة اختبرتها.

كم كان AVIF أصغر من JPEG في اختبارك؟

عبر أربعة أنواع صور بجودة مطابقة، كان AVIF أصغر بنسبة 81–89% من JPEG q80. تراجعت الصورة الشخصية من 90 KB (JPEG) إلى 9.8 KB (AVIF).

هل تدعم كل المتصفحات AVIF؟

المتصفحات الرئيسية الحالية تفك ترميز AVIF، لكن Safari الأقدم من الإصدار 16 وبعض WebView المدمجة لا تفعل، لذا يلزم احتياطي <picture> إلى WebP أو JPEG.

هل WebP آمن للاستخدام كتنسيق وحيد؟

نعم؛ يتمتع WebP بدعم أصلي في المتصفحات الرئيسية الحالية وتفوّق على JPEG بنسبة 56–64% في اختباري، مما يجعله خيار تنسيق واحد قوي إذا لم تستطع إضافة AVIF بعد.

كم أبطأ ترميز AVIF من WebP؟

عند effort 4، استغرق AVIF حوالي 210 ms مقابل 70 ms لـ WebP على الصورة الشخصية — أبطأ بحوالي 3×. رمِّز مرة وقت الرفع والفجوة غير ذات أهمية؛ رمِّز عند كل طلب وسرعة WebP تهم.

أي إعداد effort لـ AVIF يجب أن أستخدم؟

كان effort 4 النقطة المثلى في اختباري — أصغر ملف عند وقت ترميز مقبول. جعل effort 6 الملف أكبر واستغرق 2.5× أطول، لذا لا تفترض أن effort الأقصى هو الأفضل.

أي تنسيق يجب أن أختار لصورة بطل؟

اختر AVIF مع احتياطي WebP وقاعدة <img> بصيغة JPEG. تتحكم بايتات البطل مباشرة في LCP، ووفورات AVIF فوق 80% مقابل JPEG تظهر هناك أسرع.

متى يجب أن أستخدم JPEG بدلاً من AVIF أو WebP مع ذلك؟

احتفظ بـ JPEG لبريد HTML، وخلاصات الشركاء والأسواق، وخطوط معالجة الطباعة، والمتصفحات المدمجة القديمة التي تسبق دعم WebP وAVIF.

حقوق الصور

• الغلاف — مصور فوتوغرافي يحرّر الصور على حاسوب محمول مع كاميرا DSLR وجهاز لوحي، صورة لـ cottonbro studio على Pexels (محوّلة إلى WebP).
• مقارنة التنسيقات، ومخطط أحجام الملفات، وتكبير التشوّهات — أنشأها المؤلف من صورة فوتوغرافية لريش مكاو (Pexels رقم 36720663، صورة لـ Kaca Skok). تم إنشاء اختبار ضغط الأنواع الأربعة ومسح effort لـ AVIF باستخدام مُرمِّزات libaom وlibwebp وmozjpeg من مكتبة sharp على صور اختبار اصطناعية معايَرة لقابلية ضغط الصور الحقيقية.