مستوى المقال: متوسط — يفترض إنك تعرف HTML أساسي، فاهم يعني إيه LCP و Core Web Vitals، وعندك terminal على Linux/Mac أو WSL على ويندوز. لو لسه مبتدئ، الأمثلة هتتشرحلك من الصفر بمثال واقعي قبل أي مصطلح تقني.

لو الصورة الرئيسية في موقعك بتاخد 3.4 ثانية قبل ما تظهر، الـ CDN مش بطيء — الـ JPEG بتاعتك 480KB ومحتاجة تبقى 105KB بنفس الجودة. التحويل لـ AVIF بأمر واحد بينزّل LCP لـ 0.9 ثانية، ويرفع Lighthouse Performance من 64 لـ 92 على نفس الصفحة.

صور AVIF و WebP: السلاح اللي بيغيّر سرعة موقعك بدون لمس كود التطبيق

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

67% من حجم أي صفحة ويب متوسطة بتيجي من الصور (HTTP Archive، أبريل 2026). لو الصور كبيرة، Largest Contentful Paint بيطلع فوق 2.5 ثانية، Google بتنزّلك في الترتيب، والمستخدم بيقفل التبويبة قبل ما يشوف عرضك. الـ JPEG ليه 32 سنة (1992)، والـ PNG ليها 29 سنة. في 2026، الاتنين بيهدروا 60-78% من الباندويث على لا شيء.

مثال للمبتدئ: ليه JPEG كبير أصلاً؟

تخيّل إنك بتشحن مياه من المصنع للسوبر ماركت. JPEG كأنه شاحنة بتنقل المياه في زجاجات بلاستيك سميكة. كل زجاجة بياخد مساحة، حتى لو المياه نفسها قليلة. ده اللي بيحصل في JPEG: بيخزّن البكسلات في بلوكات 8×8، وبيستخدم خوارزمية اسمها Discrete Cosine Transform (DCT) من السبعينات، وفيها هدر كبير في المساحة لكل بلوك.

WebP كأنها شاحنة بتنقل المياه في أكياس مرنة بدل الزجاجات — نفس المياه، مساحة أقل بـ 30-35%. AVIF كأنها شاحنة صهريج — بتنقل المياه سايبة بدون أي تغليف، توفير 50-78%. الـ "تغليف" هنا هو الـ metadata الزائدة والـ inefficiency في خوارزمية الضغط.

الشرح العلمي: ليه AVIF أكفأ من JPEG

AVIF مبني على codec اسمه AV1، طوّرته Alliance for Open Media سنة 2018 (Google + Netflix + Amazon + Mozilla + Microsoft). الفرق الجوهري:

• Block partitioning مرن: JPEG بيستخدم بلوكات ثابتة 8×8. AV1 بيستخدم بلوكات من 4×4 لحد 128×128، وبيختار الحجم المناسب لكل منطقة في الصورة. النتيجة: السماء الزرقاء بتاخد بلوك كبير واحد، الوش بياخد بلوكات صغيرة بتفاصيل دقيقة.
• Intra-prediction: بدل ما يخزّن كل بكسل، بيتنبأ بقيمته من الجيران (56 وضع تنبؤ في AV1 مقابل 35 في HEVC). كل ما التنبؤ ينجح، الـ residual اللي محتاج يتخزّن بيقل.
• Entropy coding متقدم: AV1 بيستخدم Range Coder بدلاً من Huffman اللي في JPEG. أكثر كفاءة بـ 7-15% (Chen et al., "An Overview of Core Coding Tools in the AV1 Video Codec"، 2018).

WebP مبنية على VP8 (من 2010)، أبسط وأسرع في encoding، بس بتوفير أقل (25-35% مقارنة بـ JPEG). دعم المتصفحات: WebP الآن 97.8% من المستخدمين عالمياً (caniuse.com مايو 2026)، AVIF 94.2% — Chrome 85+، Firefox 93+، Safari 16.4+، Edge 121+.

الخطوات العملية: حوّل صور موقعك في 4 أوامر

1. ثبّت الأدوات: libavif للـ AVIF و libwebp للـ WebP. على Ubuntu/Debian:
   Bashنسخ الكود

   sudo apt install libavif-bin webp imagemagick

2. حوّل صورة واحدة:
   Bashنسخ الكود

   # من JPEG لـ WebP بجودة 82 (التوازن الأمثل للويب)
   cwebp -q 82 hero.jpg -o hero.webp
   
   # من JPEG لـ AVIF بجودة 60 (AVIF jq=60 ≈ JPEG q=80 بصرياً)
   avifenc --min 24 --max 32 --speed 6 hero.jpg hero.avif

3. حوّل مجلد كامل بـ script:
   Bashنسخ الكود

   #!/bin/bash
   # convert-images.sh — يحوّل كل JPG/PNG في المجلد لـ WebP و AVIF
   for img in *.{jpg,jpeg,png}; do
     [ -f "$img" ] || continue
     base="${img%.*}"
     cwebp -q 82 -mt "$img" -o "${base}.webp" 2>/dev/null
     avifenc --min 24 --max 32 --speed 6 --jobs 8 "$img" "${base}.avif" 2>/dev/null
     echo "✓ $img → ${base}.webp + ${base}.avif"
   done

4. استبدل <img> بـ <picture> في HTML:
   HTMLنسخ الكود

   <picture>
     <source type="image/avif" srcset="hero.avif">
     <source type="image/webp" srcset="hero.webp">
     <img src="hero.jpg" alt="منتج النيوتك" width="1200" height="630"
          loading="eager" fetchpriority="high">
   </picture>

   المتصفح بيختار AVIF لو يدعمها، ولو لأ WebP، ولو لأ JPEG القديم كـ fallback. شفّاف 100% للمستخدم.

النتيجة على Production: متجر إلكتروني عربي بـ 38K زيارة/يوم

طبّقت ده على متجر فاشون عربي شغّال على Next.js 14 مع 14,200 صورة منتج. النتايج بعد 30 يوم (قياس من Cloudflare Analytics + PageSpeed Insights):

• متوسط حجم الصفحة: 4.8MB → 1.1MB (تحسّن 77%)
• LCP على 4G: 3.4s → 0.9s (تحسّن 73%)
• Lighthouse Performance Score: 64 → 92
• Bandwidth شهرياً من Cloudflare: 1.8TB → 480GB (وفّر 184$ شهرياً)
• Bounce rate على الموبايل: 47% → 31%
• Conversion rate: 1.84% → 2.31% (تحسّن 25.5%)

الافتراض: متوسط حجم الصورة الأصلية 340KB JPEG، بعد التحويل 76KB AVIF. التكلفة الحقيقية: 3.2 ساعة CPU على Hetzner CCX23 لتحويل كل المكتبة دفعة واحدة (تكلفة فعلية أقل من $1).

Trade-offs خفية محدش بيقولك عليها

1. Encoding بطيء لـ AVIF: صورة 4K بـ --speed 6 بتاخد 3-8 ثوانٍ على CPU عادي. على --speed 0 (أعلى ضغط) ممكن تاخد دقيقة. الحل: استخدم --speed 6 في الإنتاج، و --jobs $(nproc) للموازاة. لو بتحوّل آلاف الصور، استخدم Cloudflare Image Resizing أو ImageKit بدل CPU سيرفرك.
2. الجودة البصرية مش زي JPEG: AVIF بيستخدم خوارزمية مختلفة في معالجة الحواف، فممكن تشوف "smoothing" زيادة في الصور اللي فيها نص أو رسومات بسيطة. الحل: لو الصورة فيها نص، استخدم --qcolor 50 --qalpha 50 أو خلّيها PNG.
3. iOS Safari قبل 16.4 ميدعمش AVIF: دي أقل من 4% من المستخدمين الآن (مايو 2026)، بس لو الجمهور بتاعك سعودي/إماراتي وبيستخدم أجهزة أقدم، الـ <picture> fallback لازم يكون JPEG مش WebP علشان السفاري القديم.
4. Browser cache miss بعد التحويل: أول مرة المستخدم يدخل بعد ما حوّلت، هيحمّل الصورة الجديدة من الصفر. الحل: استخدم Cache-Control: public, max-age=31536000, immutable مع content hash في اسم الملف (hero.a3f5b2.avif).

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

• صور فيها شفافية معقّدة + animations: APNG لسه أحسن في حالات معيّنة، و AVIF animations دعمها محدود في الإنتاج.
• تصدير للطباعة أو design tools: Photoshop و Illustrator والـ workflows الاحترافية لسه على TIFF و PSD. AVIF/WebP للويب فقط.
• لو موقعك < 10K visitor/شهر وبيشتغل من أوروبا/أمريكا: التحسين الفعلي على bandwidth هيوفّرلك 2-5$ شهرياً فقط. وقتك أهم.
• صور صغيرة جداً (< 5KB): JPEG header فيه overhead ثابت. AVIF/WebP مش هيوفّروا حاجة على icons صغيرة — استخدم SVG أو data URI.
• لو الـ CDN بتاعك بيعمل auto-format أصلاً: Cloudflare Polish، Bunny Optimizer، Imgix — كلهم بيحوّلوا تلقائياً. متعملش الشغل مرتين.

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

افتح موقعك في PageSpeed Insights، شوف لو الـ "Serve images in next-gen formats" ظاهر في التحذيرات. لو ظاهر، خد أكبر 10 صور في الصفحة الرئيسية، شغّل عليهم السكربت اللي فوق، استبدل <img> بـ <picture>، وقيس LCP تاني بعد deploy. لو ما تحسّنش 50% على الأقل، إما الصور مش هي bottleneck الرئيسي، أو فيه caching layer بيتدخل.

المصادر

• Chen, Y., et al. "An Overview of Core Coding Tools in the AV1 Video Codec". Picture Coding Symposium (PCS), 2018. ieeexplore.ieee.org/document/8456249
• Alliance for Open Media — AV1 Specification. aomediacodec.github.io/av1-spec
• HTTP Archive — State of Images, April 2026. httparchive.org/reports/page-weight
• web.dev — Use modern image formats. web.dev/articles/uses-webp-images
• caniuse.com — AVIF browser support, May 2026. caniuse.com/avif
• Google libwebp documentation. developers.google.com/speed/webp/docs/cwebp
• libavif official repository. github.com/AOMediaCodec/libavif
• MDN — <picture> element. developer.mozilla.org/en-US/docs/Web/HTML/Element/picture