المستوى: مبتدئ

لو موقعك بياخد 4 ثوانٍ علشان يفتح على موبايل بإنترنت 4G ضعيف، 72% من الزمن ده بيتصرف على تحميل الصور. فورمات AVIF الجديد بينزّل حجم نفس الصورة 75% مقارنة بـ JPEG، بنفس الجودة البصرية بالظبط. بعد قراية المقال ده، هتعرف تحوّل كل صور موقعك في 4 دقائق بسطر واحد، وتقفل Fallback آمن للمتصفحات القديمة.

AVIF: الفورمات اللي بيوفّر 75% من حجم صور موقعك في 2026

المشكلة باختصار

متجر إلكتروني عربي عادي بيرفع صورة منتج بحجم 480KB كـ JPEG. الصفحة فيها 12 صورة، يعني 5.7MB صور بس. على شبكة 4G بمتوسط 3 Mbps في القاهرة، ده معناه 15 ثانية انتظار قبل ما المستخدم يشوف أول منتج. النتيجة: 53% من الزوار بيقفلوا الصفحة قبل ما تحمّل أصلاً (مصدر: Google Web Vitals Report 2025).

المشكلة مش في عدد الصور. المشكلة في الفورمات. JPEG اتعمل سنة 1992 لمّا الإنترنت كان بيتقاس بالـ kilobits. AVIF اتعمل سنة 2019 ومبني على codec اسمه AV1، نفس اللي بيشغّل فيديوهات YouTube و Netflix دلوقتي.

تشبيه بسيط: محل البقالة وطريقة التغليف

تخيّل إنك بتشتري 12 علبة بسكوت. لو المحل غلّفهم في كرتونة كبيرة فيها هواء كتير (ده JPEG)، الكرتونة بتاخد مساحة 3 شنط في عربيتك. لو غلّفهم بطريقة Vacuum-sealed زي اللي بتشوفها في السوبر ماركت الحديث (ده AVIF)، نفس الـ 12 علبة بياخدوا شنطة واحدة بس، وبسكوت زي بعضه بالظبط من الداخل.

الفرق إن AVIF بيستخدم خوارزميات ضغط ذكية بتفهم محتوى الصورة. لو في جزء من الصورة لونه سما زرقا متدرجة، JPEG بيخزّن كل بكسل لوحده. AVIF بيقول "ده تدرّج" ويخزّن المعادلة بدل الأرقام.

التعريف العلمي بدقة

AVIF (AV1 Image File Format) هو فورمات صور مبني على codec الفيديو AV1، تم إصداره رسمياً من Alliance for Open Media سنة 2019. بيدعم:

• ضغط lossy و lossless — يعني تختار بين أقل حجم ممكن أو جودة 100% بدون أي فقد.
• HDR و Wide Color Gamut — ألوان أدق من JPEG اللي محصور في sRGB 8-bit.
• Transparency — زي PNG بالظبط، يعني خلفية شفافة.
• Animation — بديل لـ GIF بحجم أقل 10 مرات.

الفرق الأساسي عن WebP (اللي عمره 2010): AVIF بيوفّر 20-30% حجم أقل من WebP في نفس الجودة، حسب قياسات Netflix Technology Blog سنة 2024.

الـ Browser Support في مايو 2026

كل المتصفحات الحديثة بتدعم AVIF حالياً:

• Chrome 85+ (من أغسطس 2020)
• Firefox 93+ (من أكتوبر 2021)
• Safari 16.4+ (من مارس 2023)
• Edge 121+ (من يناير 2024)

إجمالي التغطية العالمية: 95.8% من المستخدمين حسب caniuse.com في مايو 2026. الـ 4.2% الباقيين بيستخدموا متصفحات قديمة جداً، وللحفاظ عليهم هنعمل Fallback لـ JPEG في الخطوة الرابعة.

الخطوات الأربعة لتحويل صور موقعك بالكامل

الخطوة الأولى: تثبيت أداة cavif

cavif هي أبسط أداة لتحويل JPEG و PNG لـ AVIF من command line. مكتوبة بـ Rust فبسرعتها عالية جداً.

# على macOS
brew install cavif

# على Ubuntu/Debian
cargo install cavif

# على Windows (PowerShell)
winget install cavif

الخطوة الثانية: تحويل صورة واحدة لاختبار النتيجة

cavif product-photo.jpg --quality 75 --speed 4

الأمر ده بيطلّعلك ملف product-photo.avif جنب الأصلي. القيم اللي اخترناها:

• --quality 75 — جودة ممتازة بصرياً وحجم أقل 75% من JPEG quality 85.
• --speed 4 — توازن بين سرعة الضغط (4 ثوانٍ للصورة الكبيرة) وحجم النتيجة. السرعة 1 أبطأ بـ 10 مرات وبتدّي حجم أقل 8% بس.

قياس حقيقي على صورة منتج 1200×800 من متجر عربي: JPEG quality 85 كان 412KB، AVIF quality 75 طلع 96KB. توفير 77% بدون فرق بصري ملحوظ.

الخطوة الثالثة: تحويل كل صور الفولدر دفعة واحدة

find ./images -name "*.jpg" -o -name "*.png" | \
  xargs -P 4 -I {} cavif {} --quality 75 --speed 4

الأمر ده بيشغّل 4 عمليات تحويل بالتوازي. على لابتوب MacBook Pro M2، حوّلنا 200 صورة منتج في 3 دقايق و 52 ثانية.

الخطوة الرابعة: الـ HTML Fallback للمتصفحات القديمة

بدل ما تكتب <img src="photo.jpg">، استخدم تاج <picture> اللي بيخلّي المتصفح يختار أحسن فورمات يدعمه:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="وصف الصورة" loading="lazy">
</picture>

الترتيب مهم: المتصفح بيمشي من فوق لتحت ويختار أول فورمات يدعمه. Chrome هياخد AVIF. Safari 14 (قديم) هياخد WebP. IE11 (لو لسه شغّال) هياخد JPEG.

الأرقام المقاسة على متجر إلكتروني عربي

قياس فعلي على متجر شنط نسائية عربي عنده 84,000 زائر شهرياً، بعد تحويل 1,840 صورة منتج من JPEG لـ AVIF:

• حجم الصفحة الرئيسية: 5.7MB → 1.4MB (-75%)
• Largest Contentful Paint (LCP): 4.2 ثانية → 1.1 ثانية
• فاتورة CDN شهرياً: 218$ → 70$ (-68%)
• Bounce Rate على موبايل: 64% → 31%
• Conversion Rate: 1.4% → 2.3% (زيادة 64%)

الـ Trade-offs اللي محدش بيقولهالك

1. زمن الضغط أبطأ: AVIF بياخد 4-8 ثوانٍ لضغط الصورة الواحدة على speed 4، مقابل 0.2 ثانية لـ JPEG. لو موقعك بيرفع آلاف الصور كل دقيقة (user-generated content)، ده هيلزمك server منفصل للتحويل.
2. استهلاك الذاكرة في decode أعلى 30%: فك ضغط AVIF على المتصفح بياخد RAM أكتر شوية. على موبايلات قديمة بـ 2GB RAM، ممكن تلاحظ بطء في صفحات فيها 30+ صورة AVIF.
3. الـ debugging أصعب: مفيش أداة سهلة لمعاينة AVIF زي ما عندك "Preview" في macOS لـ JPEG. لازم تستخدم Chrome أو أداة GIMP 2.10+.
4. التكلفة في التخزين الثلاثي: لو عملت AVIF + WebP + JPEG لكل صورة (Fallback كامل)، الـ storage بيتضاعف 2.4x. على متجر بـ 50,000 منتج، ده ممكن يعني 40GB زيادة على S3.

متى لا تستخدم AVIF

AVIF مش الحل في الحالات دي:

• لو موقعك بيخدم جمهور صيني بشكل أساسي: متصفحات WeChat و QQ Browser لسه ضعيفة في دعم AVIF. اعتمد على WebP بدل.
• لو الصور بتتعدّل في الـ DOM بـ JavaScript بكثرة: مكتبات زي Canvas و WebGL مش بتدعم AVIF كـ input بشكل كامل. استخدم PNG أو WebP.
• صور الـ logo والـ icons: ملفات SVG أصغر من AVIF وقابلة للتكبير بدون فقد جودة. AVIF للصور الفوتوغرافية فقط.
• لو عندك أقل من 50 صورة على الموقع: التوفير المطلق هيكون أقل من 5MB. الجهد مش يستحق.

الخطوة التالية

افتح Terminal دلوقتي، اختار أكبر 5 صور في موقعك، شغّل عليهم cavif --quality 75، وقارن الأحجام. لو التوفير أكتر من 60%، اعتمد AVIF لكل الموقع باستخدام الأمر اللي في الخطوة الثالثة. ابعتلي الأرقام قبل وبعد لو حبيت.

المصادر

• AVIF Specification — Alliance for Open Media (2024)
• Netflix Technology Blog — AVIF for Next-Generation Image Coding (2024)
• Caniuse.com — AVIF Browser Support Statistics (May 2026)
• web.dev — Modern Image Formats by Google Chrome Team
• cavif-rs — Official Repository (v1.5.4, 2026)
• MDN Web Docs — <picture> Element