لماذا ضغط الصور قرار أعمال، ليس تقنياً فقط
الصور تشكّل أكثر من 60% من حجم متوسّط أيّ صفحة ويب حديثة. صورة هيرو واحدة غير مضغوطة قد تكون 3-5 ميجابايت. وعلى شبكة 4G في الأطراف، هذا يعني 8-12 ثانية تحميل لصورة واحدة. والمستخدم في 2026 لا ينتظر — 53% من زيارات الموبايل تُهجَر إن استغرق التحميل أكثر من 3 ثوانٍ.
تأثير الضغط مباشر على الأعمال: Pinterest قلّصت أحجام الصور 40% فحصلت على زيادة 15% في وقت الجلسة. BBC ضغطت صورها فحصلت على زيادة 30% في الزيارات على الموبايل. الفارق بين موقع بطيء وموقع سريع، في معظم الحالات، هو الصور.
لكنّ الضغط ليس «أقلّ حجم أفضل». الضغط المُبالَغ فيه ينتج صوراً ضبابية، تُشوّه المنتجات، وتُعطي انطباع «جودة منخفضة». التحدّي: إيجاد التوازن بين الحجم والجودة.
الضغط بفقدان مقابل الضغط بدون فقدان
الضغط بدون فقدان (Lossless): يقلّل الحجم بدون فقدان أيّ معلومة. الصورة بعد فكّ الضغط متطابقة 100% مع الأصلية. الصيغة الأشهر: PNG. التوفير: 20-40% عادةً.
الضغط بفقدان (Lossy): يحذف معلومات «غير ملحوظة» للعين البشرية. الصورة بعد الضغط ليست متطابقة، لكنّها تبدو متطابقة (بدرجة الجودة المختارة). الصيغ: JPEG، WebP، AVIF. التوفير: 60-95% عادةً.
القاعدة: للصور الفوتوغرافية (مناظر، أشخاص، منتجات)، استخدم Lossy. للرسومات (شعارات، أيقونات، رسوم بيانية بحوافّ حادّة)، استخدم Lossless.
أرقام الجودة: ماذا تعني فعلاً
كلّ صيغة Lossy تأخذ رقم جودة من 1-100. لكنّ هذه الأرقام ليست متساوية بين الصيغ. جودة 80 في JPEG تعطي حجماً مختلفاً تماماً عن جودة 80 في WebP.
JPEG: جودة 100 = صورة تكاد تكون أصلية، حجم كبير. جودة 80-85 = «المنطقة الذهبية» (sweet spot)، فرق بصري غير ملحوظ تقريباً مع توفير 40-50% من جودة 100. جودة 60-70 = توفير أكبر مع بدء ظهور تشوّش طفيف. أقلّ من 60 = تدهور واضح.
WebP: جودة 75-80 = «المنطقة الذهبية». بنفس الجودة البصرية، الحجم أصغر بـ 25-35% من JPEG.
AVIF: جودة 50-60 = «المنطقة الذهبية». نعم، أرقام الجودة في AVIF مختلفة جذرياً — جودة 50 في AVIF قد تكون مكافئة لجودة 85 في JPEG. حجم أصغر بـ 50% من WebP في نفس الجودة البصرية.
مقارنة الصيغ في 2026
JPEG: صيغة 1992. مدعومة في كلّ مكان، حتّى في عملاء البريد الإلكتروني القديمة. مناسبة كـ fallback، لكن غير كفؤة. مقارنةً بـ WebP بنفس الجودة، JPEG أكبر بـ 30%.
PNG: صيغة Lossless. الوحيدة لو احتجتَ شفّافية حقيقية مع تفاصيل دقيقة (شعارات، أيقونات معقّدة). للصور الفوتوغرافية، PNG حجمه مهول.
WebP: أصدرتها Google في 2010. أصبحت مدعومة عالمياً منذ 2020. توفّر 25-35% أقلّ من JPEG، تدعم الشفّافية مثل PNG. الاختيار «الآمن» في 2026.
AVIF: صيغة 2019 المعتمدة على ترميز AV1. مدعومة في Chrome و Firefox و Safari منذ 2023. توفّر 20-50% أقلّ من WebP بنفس الجودة. الترميز أبطأ، لكنّ الفكّ سريع جدّاً.
JPEG XL: صيغة 2021. تَعِد بضغط أفضل من AVIF، دعم Lossless، تحويل JPEG القديم بدون فقدان. لكنّها بدون دعم كافٍ من المتصفّحات حتى 2026 — Chrome يدعمها فقط خلف flag.
غيّر الأبعاد قبل الضغط
أكبر مكاسب الضغط لا تأتي من خوارزمية الضغط، بل من تغيير الأبعاد. إن كان عنصر الصورة في الموقع 800×600 بكسل، لا داعي لرفع صورة 4000×3000. حتى أفضل ضغط لن يُنقذك من هذا الإسراف.
القاعدة العملية: أكبر عرض تحتاجه الصورة على الموقع × 2 (لشاشات Retina). إن كانت الصورة تظهر بعرض 800px، ارفع 1600px. أيّ شيء أكثر إسراف.
responsive images: استخدم srcset لتقديم مقاسات مختلفة لشاشات مختلفة. صورة 1600px لشاشة كبيرة، 800px للجوال. توفير كبير على الجوال.
srcset و picture لخدمة كلّ متصفّح
الواقع في 2026: لا تستطيع اختيار صيغة واحدة. بعض المتصفّحات لا تدعم AVIF، بعضها قد لا يدعم WebP. الحلّ: عنصر picture الذي يُقدّم بدائل مرتّبة.
<picture><source srcset="img.avif" type="image/avif"><source srcset="img.webp" type="image/webp"><img src="img.jpg" alt="..."></picture>
المتصفّح يجرّب AVIF أوّلاً. إن لم يدعمها، يستخدم WebP. إن لم يدعمها، يستخدم JPEG. كلّ المتصفّحات تخدم. المستخدمون الحديثون يحصلون على أحجام أصغر، المستخدمون القدماء يحصلون على شيء يعمل.
متى لا تضغط
هناك حالات لا يجب فيها استخدام Lossy:
1. الصور الفنّية أو الأرشيف. لا تضغط أعمالاً فنّية لعرضها في معرض رقمي بالأرقام الافتراضية. استخدم جودة 90-95 على الأقلّ.
2. الصور الطبّية أو القانونية. الضغط بفقدان قد يحذف تفاصيل حيوية.
3. الشعارات والأيقونات. PNG أو SVG، ليس JPEG.
4. الصور التي ستُعدّل لاحقاً. كلّ مرّة تحفظها JPEG، تفقد جودة أكثر. احفظ نسخة أصلية (PNG أو TIFF) و أنشئ JPEG للنشر فقط.
أدوات الضغط الموصى بها
للسير اليومي: أداتنا في هذا الموقع أو أيّ أداة متصفّح. الضغط محلّياً، لا تُرفَع الصور.
للمواقع الكبيرة: ضغط آلي في pipeline البناء. أدوات مثل sharp في Node.js أو libvips تضغط آلاف الصور بسرعة.
للمواقع الديناميكية: CDN يضغط على الطيران. Cloudflare Images، Cloudinary، imgix يضغطون الصور ديناميكياً ويخدمون الصيغة المناسبة لكلّ متصفّح.
التوصية النهائية لـ 2026
لـ 90% من المواقع: استخدم WebP بجودة 75-80 كافتراضي، مع JPEG fallback. هذا التوازن الأمثل بين الجودة، الحجم، والتوافق.
للمواقع التي تهتمّ بالأداء بشدّة (تجارة إلكترونية، إعلام): أضف AVIF كطبقة أعلى، مع picture element. مكاسب 30-40% إضافية على الموبايل.
تذكّر: ضغط الصور مرّة لا يكفي. كلّ صورة جديدة تُرفع للموقع تحتاج نفس العملية. اجعلها جزءاً من سير العمل، ليس مهمّةً تُؤجَّل.
