الدليل الشامل لأحجام ملفات الصور وصيغها للويب
كل صورة على موقعك الإلكتروني لها ميزانية حجم محددة. تجاوزها يعني صفحات بطيئة تنفّر الزوار. الالتزام بها يجعل كل شيء يبدو سريعاً وسلساً. هذا الدليل يمنحك أرقاماً محددة بالكيلوبايت لكل حالة استخدام شائعة، والأبعاد المناسبة بالبكسل، والصيغة التي تحقق لك ذلك.
جدول مرجعي: أحجام الملفات المثالية حسب الاستخدام
هذه الأهداف تفترض استخدام WebP أو AVIF. إذا كنت مقيداً بصيغة JPEG، أضف تقريباً 25-30% لكل رقم.
| حالة الاستخدام | العرض بالبكسل | الحجم المستهدف | الصيغة الموصى بها |
|---|---|---|---|
| صورة غلاف بعرض الصفحة | 1600-1920 بكسل | 100-200 ك.ب | WebP أو AVIF |
| صورة محتوى المدونة | 800-1200 بكسل | 60-150 ك.ب | WebP |
| صورة المنتج (رئيسية) | 800-1000 بكسل | 80-150 ك.ب | WebP |
| صورة منتج مصغّرة | 300-400 بكسل | 20-50 ك.ب | WebP |
| بطاقة/معاينة | 400-600 بكسل | 30-80 ك.ب | WebP |
| صورة رمزية/بروفايل | 64-128 بكسل | 5-15 ك.ب | WebP أو JPEG |
| شعار | متغير | 5-30 ك.ب | SVG (مفضّل) أو PNG |
| أيقونة | 24-48 بكسل | 1-5 ك.ب | SVG |
| نمط خلفية (مُكرَّر) | 200-400 بكسل | 10-30 ك.ب | WebP أو PNG |
| صورة مشاركة اجتماعية (OG) | 1200 × 630 بكسل | 80-150 ك.ب | JPEG أو WebP |
من أين جاءت هذه الأرقام؟
صفحة الويب المتوسطة تزن حوالي 2.5 ميجابايت على الهاتف المحمول، والصور وحدها تشكّل نحو 1 ميجابايت — أي حوالي 40% من الوزن الكلي للصفحة، وفقاً لبيانات HTTP Archive لعام 2025. عتبة Google الجيدة لمقياس LCP هي 2.5 ثانية. لتحقيق هذا الهدف على اتصال 4G (بسرعة فعلية تقارب 1.5 ميجابايت/ثانية)، يجب أن تتحمّل صورة الغلاف أقل من ثانية — وهذا يعني البقاء تحت 200 كيلوبايت.
الأرقام في الجدول أعلاه ليست عشوائية. إنها مشتقّة من ميزانيات أداء حقيقية: ميزانية صور إجمالية 400-600 كيلوبايت لصفحة نموذجية، موزّعة بين الغلاف والمحتوى والصور المصغّرة.
الصيغة تصنع الفارق الأكبر
نفس الصورة بنفس الجودة البصرية يمكن أن تكون بأحجام مختلفة جذرياً حسب الصيغة:
| الصيغة | مثال: صورة 1200 بكسل | الحجم النسبي |
|---|---|---|
| PNG غير مضغوط | ~3.5 ميجابايت | خط الأساس |
| JPEG (جودة 80) | ~180 ك.ب | ~5% |
| WebP (جودة 80) | ~130 ك.ب | ~3.7% |
| AVIF (جودة 65) | ~90 ك.ب | ~2.5% |
التحويل من JPEG إلى WebP يوفّر حوالي 25-35%. والانتقال إلى AVIF يوفّر نحو 50% مقارنة بـ JPEG. كلا الصيغتين تدعمان الشفافية. لمقارنة مفصّلة، اطّلع على دليل WebP مقابل AVIF.
يمكنك تحويل صورك الآن: JPG إلى WebP، أو أي صيغة إلى AVIF، أو استخدم التحويل الدفعي لعدة ملفات دفعة واحدة.
أبعاد البكسل: المُضاعِف الخفي
حجم الملف هو نتيجة عاملين: عدد البكسلات والضغط. معظم الناس يركّزون على الضغط ويتجاهلون عدد البكسلات — لكن تقليل الأبعاد له تأثير أكبر بكثير.
مثال سريع: صورة بأبعاد 4000 × 3000 تحتوي على 12 مليون بكسل. غيّر أبعادها إلى 1200 × 900 وستصبح 1.08 مليون بكسل — انخفاض 91% في البيانات الخام. حتى قبل الضغط، تكون قد تخلّصت من معظم الوزن.
القاعدة الذهبية: لا ترسل صورة أعرض من حاوية العرض الفعلية. إذا كانت منطقة محتوى مدونتك بعرض 720 بكسل، فإن صورة بعرض 1440 بكسل (لشاشات Retina بدقة 2x) هي الحد الأقصى. أي شيء أكبر هو هدر لعرض النطاق.
استخدم أداة تغيير حجم الصور في Vizua لتصغير الصور إلى الأبعاد المطلوبة بالضبط. ثم اضغطها بأداة ضغط JPEG أو PNG للتوفير النهائي.
جودة الضغط: إيجاد النقطة المثالية
بعد اختيار الأبعاد المناسبة والصيغة الصحيحة، تأتي جودة الضغط كآخر عامل تحكّم. إليك سيناريو عملي يوضّح كيف تعمل هذه العوامل الثلاثة معاً:
نقطة البداية: صورة كاميرا بأبعاد 4000 × 3000، محفوظة بصيغة PNG — حوالي 14 ميجابايت.
- تغيير الأبعاد إلى 1200 × 900 (عرض محتوى المدونة، دقة 2x لـ Retina): ~3.5 ميجابايت كـ PNG
- التحويل إلى WebP بجودة 80: ~130 كيلوبايت
- التحويل إلى AVIF بجودة 65 (إذا كان موقعك يدعمها): ~90 كيلوبايت
هذا يعني تقليصاً بنسبة 99.3% من الحجم الأصلي. والصورة الناتجة لا يمكن تمييزها بصرياً عن المصدر بأحجام العرض العادية.
لتوصيات مفصّلة حسب الصيغة، راجع دليل: كيفية ضغط الصور بدون فقدان الجودة.
حالات خاصة
صفحات المنتجات في التجارة الإلكترونية
صور المنتجات يجب أن تبدو حادة عند التكبير. قدّم الصورة الرئيسية بعرض 800-1000 بكسل (1600-2000 بكسل لشاشات Retina) بصيغة WebP. معظم صور المنتجات تُضغط جيداً إلى 80-150 كيلوبايت. الصور المصغّرة في الشبكة يجب أن تكون بعرض 300-400 بكسل، بحجم يتراوح بين 20-50 كيلوبايت لكل صورة.
معارض التصوير الفوتوغرافي
الجودة أساسية، لكن سرعة التحميل مهمة أيضاً. قدّم صور المعاينة بعرض 1200-1600 بكسل بصيغة WebP (جودة 85)، مستهدفاً 150-250 كيلوبايت. وفّر رابطاً منفصلاً لـ "عرض الحجم الكامل" للنسخة عالية الدقة.
صور المشاركة الاجتماعية (Open Graph)
صور OG يجب أن تكون بأبعاد 1200 × 630 بكسل. فيسبوك وتويتر يقبلان JPEG وPNG، وبعض المنصات تدعم WebP الآن. أبقِها تحت 150 كيلوبايت. هذه الصور تُحمّل بواسطة الزاحف مباشرة وليس بالتحميل الكسول من المتصفح، لذا كل كيلوبايت يُحتسب.
ميزانية الصور الإجمالية للصفحة
إطار عملي مفيد: استهدف وزن صور إجمالي أقل من 500 كيلوبايت لكل صفحة. هذا يعني عادةً:
- صورة غلاف واحدة: ~150 ك.ب
- 3-4 صور محتوى: ~100 ك.ب لكل صورة، بإجمالي ~300-400 ك.ب
- صور مصغّرة، رموز، أيقونات: ~50 ك.ب مجتمعة
بهذه الميزانية، تتحمّل صفحتك بسرعة على شبكة 4G ولا تستنزف باقات البيانات على الهاتف. إذا احتجت صوراً أكثر (معرض، شبكة متجر إلكتروني)، فالتحميل الكسول يبقي التحميل الأولي ضمن الميزانية — فقط الصور فوق الطية هي التي تُحتسب ضمن أداء التحميل الأول.
الأسئلة الشائعة
ما هو الحجم المثالي لصورة على موقع إلكتروني؟
يعتمد على وظيفة الصورة. صور الغلاف الرئيسية يجب أن تبقى أقل من 200 كيلوبايت، صور المحتوى أقل من 150 كيلوبايت، والصور المصغّرة أقل من 80 كيلوبايت. هذه الأرقام تفترض استخدام صيغة حديثة مثل WebP أو AVIF. مع JPEG قد تحتاج 20-30% إضافية للوصول لنفس الجودة البصرية.
كيف أقلّل حجم الصورة بدون خسارة الجودة؟
ثلاث خطوات: غيّر الأبعاد لتتناسب مع حجم العرض الفعلي (لا ترسل صورة 4000 بكسل في مكان يعرض 800 بكسل فقط)، حوّل إلى WebP أو AVIF للحصول على ضغط أفضل، ثم اضغط بجودة 75-85. عند هذه الإعدادات لن تلاحظ عيناك أي فرق.
هل يؤثر حجم ملف الصورة على ترتيب محركات البحث؟
نعم بشكل مباشر. الصور تؤثر على مقياس Largest Contentful Paint (LCP)، وهو أحد مؤشرات Core Web Vitals الثلاثة من Google. إذا تجاوز LCP 2.5 ثانية، ينخفض ترتيبك. وبما أن الصور هي عنصر LCP في معظم الصفحات، فإن حجمها من أقوى أدوات تحسين الأداء.
ما هي الأبعاد المناسبة لصور المنتجات في المتاجر الإلكترونية؟
للعرض الرئيسي استخدم 800-1000 بكسل عرضاً، وللصور المصغّرة في الشبكة 300-400 بكسل. على شاشات Retina ضاعف هذه القيم. معظم صور المنتجات تُضغط بكفاءة بصيغة WebP بجودة 80، وتصل إلى 80-150 كيلوبايت للصورة.
حقّق أهداف حجم ملفاتك
مجاني، خاص، بدون تسجيل. كل شيء يعمل في متصفحك.