دليل عملي لأحجام ملفات الصور وصيغها للويب
تتنافس كل صورة على موارد الشبكة وفك الترميز والذاكرة والعرض. الميزانية المفيدة خاصة بالصفحة وتراعي دور الصورة والجمهور والتخزين المؤقت ونافذة العرض والجودة. النطاقات التالية نقاط بداية للاختبار وليست حدود نجاح عامة.
ميزانيات بداية حسب الاستخدام
توضح هذه النطاقات ميزانية مقتصدة لتسليم الويب. قد تكون نتائج JPEG أو WebP أو AVIF أعلى أو أقل؛ فاضبطها حسب المصدر وبرنامج الترميز وحجم العرض والأداء الميداني والفحص البصري.
| حالة الاستخدام | العرض بالبكسل | الحجم المستهدف | الصيغة الموصى بها |
|---|---|---|---|
| صورة غلاف بعرض الصفحة | 1600px–1920px | 100KB–200KB | WebP أو AVIF |
| صورة محتوى المدونة | 800px–1200px | 60KB–150KB | WebP |
| صورة المنتج (رئيسية) | 800px–1000px | 80KB–150KB | WebP |
| صورة منتج مصغّرة | 300px–400px | 20KB–50KB | WebP |
| بطاقة/معاينة | 400px–600px | 30KB–80KB | WebP |
| صورة رمزية/بروفايل | 64px–128px | 5KB–15KB | WebP أو JPEG |
| شعار | متغير | 5KB–30KB | SVG (مفضّل) أو PNG |
| أيقونة | 24px–48px | 1KB–5KB | SVG |
| نمط خلفية (مُكرَّر) | 200px–400px | 10–30 KB | WebP أو PNG |
| صورة مشاركة اجتماعية (OG) | 1200 × 630px | 80KB–150KB | JPEG أو WebP |
تحويل نطاقات البداية إلى ميزانيتك
يوفر تقرير وزن الصفحات من HTTP Archive بيانات توزيع حديثة، لكن الوسيط العالمي ليس جمهورك. عتبة LCP «الجيدة» المنشورة من Google هي 2.5 ثانية عند المئين 75 من الزيارات. استخدم بياناتك الميدانية ومخطط الشلال لتقسيم الوقت بين استجابة الخادم واكتشاف المورد والنقل وفك الترميز وتأخير العرض.
ابدأ بميزانية نقل للصفحة وخصص قدراً أكبر للصور الأعلى قيمة للمستخدم. راجع نطاقات الجدول عند تغير التخطيط أو عدد الصور أو الجمهور أو الجودة.
الصيغة أحد المتغيرات الرئيسية
قد ينتج المصدر نفسه أحجاماً مختلفة جداً حسب برنامج الترميز وهدف الجودة. يبين هذا الجدول سلوكاً للمقارنة، وليس نتائج معيارية عامة لصورة بعرض 1200 بكسل.
| الصيغة | مثال: صورة 1200 بكسل | الحجم النسبي |
|---|---|---|
| صورة PNG بلا فقدان | غالباً كبيرة للمحتوى الفوتوغرافي | خط الأساس |
| JPEG (جودة 80) | فعّال عند إعداد جودة مناسب | استخدمه أساساً للتوافق |
| WebP (جودة 80) | قد يتفوق على JPEG؛ قارن الجودة المرئية | يعتمد على المصدر وبرنامج الترميز |
| AVIF (جودة 65) | قد يكون فعالاً؛ الترميز والدعم مهمان | يعتمد على المصدر وبرنامج الترميز |
قد يتفوق WebP أو AVIF على ناتج JPEG في بعض المقارنات، لكن لا تنطبق نسبة ثابتة على كل المصادر وبرامج الترميز. تدعم الصيغتان الحديثتان الشفافية. راجع دليل WebP وAVIF.
أنشئ مرشحات عبر JPG إلى WebP، أو التحويل إلى AVIF للمدخلات المذكورة، أو التحويل الدفعي للصيغ التي تعرضها الأداة.
أبعاد البكسل: المُضاعِف الخفي
يؤثر عدد البكسلات والمحتوى وعمق البت والبيانات الوصفية والصيغة وبرنامج الترميز والإعدادات في الحجم. تقليل الأبعاد غير اللازمة يترك غالباً بيانات أقل بكثير ليمثلها برنامج الترميز.
تحتوي صورة 4000 × 3000 على 12 MP؛ وتحتوي 1200 × 900 على 1.08 MP، أي أقل بنسبة 91%. عند تساوي القنوات والدقة تقل بيانات النقطية غير المضغوطة المقدمة للمرمز كثيراً، لكن توفير البايت النهائي يظل معتمداً على المحتوى والإعدادات.
قاعدة التجاوب: قدم مرشحات قريبة من عروض وكثافات العرض الممكنة. إذا كانت المساحة بعرض 720 CSS بكسل فقد يناسب مرشح 1440px شاشة 2×، لكن التكبير والقص وتغير التخطيط والكثافة الأعلى قد تغير الاختيار. صف الخيارات عبر srcset وsizes.
استخدم أداة Vizua تغيير حجم الصورة لإنشاء مرشح بأبعاد التخطيط. ثم اختبر ضاغط JPEG أو PNG المناسب؛ قد لا يصغر المصدر المحسن مسبقاً.
جودة الضغط: إيجاد النقطة المثالية
بعد اختيار الأبعاد المناسبة والصيغة الصحيحة، تأتي جودة الضغط كآخر عامل تحكّم. إليك سيناريو عملي يوضّح كيف تعمل هذه العوامل الثلاثة معاً:
سير توضيحي: ابدأ بملف رئيسي 4000 × 3000 واحتفظ به خارج مجموعة التسليم.
- غيّر الحجم إلى مرشح مثل 1200 × 900 عندما يطابق المساحة والكثافة
- صدّر مرشح WebP بجودة بداية مختارة وافحص الملف الفعلي
- صدّر مرشح AVIF إذا دعمه نظامك، ثم قارن الحجم والمظهر وكلفة الترميز
اختر أصغر مرشح يفي بالاستخدام. يأتي التوفير النهائي والفرق المرئي من المصادر والنواتج الفعلية، لا من أبعاد المثال وحدها.
لتوصيات مفصّلة حسب كل صيغة، راجع دليل: كيفية ضغط الصور دون فقدان الجودة.
حالات خاصة
صفحات المنتجات في التجارة الإلكترونية
يجب أن تظل صور المنتجات مفيدة عند التكبير الذي يدعمه المتجر. أنشئ مرشحات متجاوبة من ملف رئيسي محمي، واختبر التفاصيل، وضع ميزانيات منفصلة للشبكة والعرض الرئيسي والتكبير. قد تختلف متطلبات رفع السوق عن تسليم المتجر.
معارض التصوير الفوتوغرافي
يمكن لملفات الأعمال تقديم معاينات متجاوبة وعرض مقصود عالي الدقة عند الحاجة. استخرج الأبعاد وميزانيات البايت من التخطيط والشاشات المتوقعة، ثم راجع النسيج والتدرجات وملفات اللون.
صور المشاركة الاجتماعية (Open Graph)
تختلف توصيات صور Open Graph والصيغ المقبولة حسب المنصة وقد تتغير. يمثل JPEG أو PNG بأبعاد 1200 × 630 نقطة بداية شائعة، لكن تحقق من إرشادات الوجهة ومعاينتها. تجلب برامج الزحف الملفات بصورة مستقلة عن التحميل الكسول للصفحة.
ميزانية الصور الإجمالية للصفحة
ابن ميزانية الصفحة من هدف الأداء. من توزيعات البداية الممكن اختبارها:
- صورة غلاف واحدة: ~150 ك.ب
- 3-4 صور محتوى: ~100 ك.ب لكل صورة، بإجمالي ~300-400 ك.ب
- صور مصغّرة، رموز، وأيقونات: ~50 ك.ب مجتمعة
هذا المثال لا يضمن السرعة. قد تؤجل المعارض وشبكات المنتجات صوراً مناسبة خارج الشاشة، لكن الموارد الكسولة تستهلك البيانات عند طلبها وقد تؤثر في التمرير. قس الأداء الأولي والتفاعلي على أجهزة وشبكات ممثلة.
الأسئلة الشائعة
ما حجم الملف المناسب لصورة موقع ويب؟
لا توجد غاية عامة بالكيلوبايت. ضع الميزانية انطلاقاً من هدف أداء الصفحة وعدد الصور ونافذة العرض وشبكة الجمهور وسلوك التخزين المؤقت والجودة المطلوبة. قد تستحق صورة الغلاف بايتات أكثر من الصورة المصغرة، لكن الاكتشاف والأولوية قد يهمان بقدر الحجم. قس LCP الميداني وافحص ملفات ممثلة بدلاً من فرض حد واحد في كل مكان.
كيف أقلل حجم الصورة دون فقدان الجودة؟
احتفظ بملف رئيسي، وأنشئ أبعاداً مناسبة لمساحات العرض وكثافات الأجهزة، وقارن الصيغ المناسبة، واضبط برنامج الترميز أثناء فحص الناتج الفعلي. تختلف مقاييس الجودة بين برامج الترميز، ولا يضمن أي إعداد نتيجة لا يمكن تمييزها. تجنب إعادة الضغط بفقدان مراراً.
هل توصي Google بحد أقصى لحجم الصورة؟
لا تنشر Google سقفاً عاماً بالكيلوبايت للصور. يمكن لـPageSpeed Insights تحديد فرص توفير النقل ومشكلات LCP في الصفحة المختبرة، لكن الميزانية الصحيحة تعتمد على مسار التحميل كله. استخدم تشخيص المختبر مع البيانات الميدانية لمستخدميك.
هل يؤثر حجم ملف الصورة في SEO؟
قد تؤثر الصور في التجربة وCore Web Vitals عندما تكون كبيرة أو تُكتشف متأخرة أو تُفك ببطء أو تُعرض بلا أبعاد مستقرة. تستخدم Google إشارات تجربة الصفحة ضمن نظام ترتيب أوسع، لكن تقليل ملف واحد لا يضمن تغير الترتيب. قس ما إذا كانت الصورة هي عنق الزجاجة فعلاً.
ما أبعاد البكسل المناسبة لصور المنتجات؟
طابق المرشحات مع أكبر مساحة عرض وسلوك التكبير وكثافات الأجهزة التي يدعمها المتجر. استخدم مصادر متجاوبة بدلاً من عرض ثابت، واختبر التفاصيل عند التكبير المقصود، وحدد ميزانية البايت حسب الصفحة والجمهور. قد تختلف متطلبات استقبال السوق عن أحجام تسليم المتجر.
حقّق أهداف حجم ملفاتك
لا يلزم حساب. يُعالج الملف المحدد في المتصفح ولا يُرسل إلى خادم معالجة الصور لدينا.