مستوى المقال: متوسط — يفترض إنك تعرف 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 أوامر
- ثبّت الأدوات:
libavifللـ AVIF وlibwebpللـ WebP. على Ubuntu/Debian:
