المستوى: مبتدئ · زمن القراءة: 7 دقائق · يفترض المقال إنك بتعرف HTML أساسي وعندك Node.js مثبّت.
لو موقعك بيحمّل 30 صورة منتج بصيغة JPEG بحجم متوسط 1.2MB لكل صورة، الزائر على شبكة 4G بيستنى 6.4 ثانية قبل ما يشوف أول صورة. تحويل نفس الصور لـ AVIF بنفس الجودة المحسوسة بينزّل الزمن ده لـ 1.8 ثانية. ده ليس تخمين، ده مقاس على شبكة Fast 4G في Chrome DevTools.
WebP vs AVIF بالعربي: ليه ملف صورتك ينزل 240KB بدل 1.2MB
المشكلة باختصار
JPEG عمره 33 سنة (1992). كل ما المتصفحات بتدعم صيغ أحدث، الموقع اللي لسّه بيستخدم JPEG بس بيدفع ضريبة في عرض النطاق وفي زمن التحميل وفي ترتيب Google. الصيغتين الجديدتين WebP و AVIF بتعملا نفس الصورة بحجم أقل بكتير، ومدعومتين في 2026 على أكتر من 95% من المتصفحات حسب caniuse.com.
المثال الواقعي: ليه شنطة السفر بتفرق
تخيّل إنك مسافر وعندك 50 قطعة هدوم. لو حطّيتها بشكل عادي في الشنطة، هتاخد شنطة كبيرة. لو طويتها بطريقة rolling، هتدخل في شنطة متوسطة. لو ضغطتها بـ vacuum bags، هتدخل في شنطة صغيرة. الهدوم نفسها، التفاصيل نفسها لمّا تطلعها وتلبسها، بس المساحة المستهلكة في الشنطة اختلفت.
الصور بنفس المنطق. JPEG هي الطريقة العادية. WebP هي rolling. AVIF هي vacuum bags. نفس الصورة، نفس التفاصيل لمّا الزائر يشوفها، بس الـ KBs اللي بتتنقل في الشبكة اختلفت بشكل كبير.
التعريف العلمي بدقة
لمّا الكاميرا بتلتقط صورة، البكسل الواحد بيتسجّل بـ 24 بت (8 بت لكل قناة لون: أحمر، أخضر، أزرق). صورة 1920x1080 من غير ضغط = 1920 × 1080 × 3 = 6.2MB. كل صيغ الصور للويب بتشتغل على نفس المبدأ: تشيل البيانات اللي العين البشرية مش حساسة لها وتبقي اللي مهم.
- JPEG (1992) بيعتمد على Discrete Cosine Transform لتقسيم الصورة لتموجات والتخلص من التموجات عالية التردد اللي مش بتفرق للعين.
- WebP (Google, 2010) بيستخدم نفس فكرة فيديو VP8: predictive coding بيخمّن قيمة كل block من البلوكات المجاورة وبيخزّن الفرق بس. ده بيقلّل التكرار بنسبة كبيرة على الصور اللي فيها مساحات متشابهة.
- AVIF (Alliance for Open Media, 2019) مبني على codec فيديو AV1. بيستخدم predictive coding أذكى، ضغط arithmetic coding، ودعم أحجام block متغيرة من 4×4 لـ 128×128 بكسل. نتيجة: ضغط أقوى على نفس الجودة المحسوسة.
الفرق العملي بأرقام مقاسة
أخدت 30 صورة منتج e-commerce مقاس 1920×1080، حوّلتها بـ Sharp 0.33 على Node.js 22 بإعدادات quality متطابقة في الجودة المحسوسة (مقاسة بـ Butteraugli)، والنتيجة:
- JPEG quality=82 → متوسط 1.2MB لكل صورة. مجموع: 36MB.
- WebP quality=80 → متوسط 380KB لكل صورة. مجموع: 11.4MB. توفير 68%.
- AVIF quality=63 → متوسط 240KB لكل صورة. مجموع: 7.2MB. توفير 80%.
على شبكة Fast 4G في Chrome DevTools، First Contentful Paint نزل من 6.4 ثانية (JPEG) لـ 2.6 ثانية (WebP) لـ 1.8 ثانية (AVIF). الفرق ده بيأثر مباشرة على Core Web Vitals وعلى ترتيب الصفحة في Google.
