ما المقاس المناسب لصور موقع الويب؟

الأبعاد المستهدفة

هذه هي عروض التصدير. والقاعدة خلفها بسيطة: لا تقدّم أبدًا صورة أعرض جوهريًا من أكبر صندوق ستُعرض فيه يومًا.

• صورة رئيسية أو بانر بعرض كامل: 1920 بكسل عرضًا
• صورة بارزة بعرض المحتوى: 1200–1600 بكسل
• صورة داخل مقال: 800–1200 بكسل
• مصغّرة بطاقة أو معاينة: 400–600 بكسل
• صورة رمزية أو أيقونة: 100–200 بكسل
• معاينة Open Graph الاجتماعية: 1200 × 630 بكسل بالضبط

أحجام الملفات المستهدفة

هذه أهداف سهلة المنال بأبعاد صحيحة وجودة قرب 75. وإن كنت أعلى منها بكثير فالسبب دائمًا تقريبًا الأبعاد لا إعداد الجودة.

• الصورة الرئيسية: أقل من 200 كيلوبايت
• صورة المقال: أقل من 100 كيلوبايت
• المصغّرة: أقل من 30 كيلوبايت
• الصفحة كلها بكل صورها: أقل من 1 ميغابايت

لماذا يمس هذا ترتيبك في البحث

تقيس Google مؤشر «أكبر عنصر محتوى مرسوم» (LCP) — كم يستغرق أكبر عنصر مرئي حتى يكتمل عرضه — وتعتمده إشارة ترتيب. وفي معظم الصفحات يكون ذلك العنصر صورة.

ويتضاعف الأثر على الجوال. صورة رئيسية بـ 4 ميغابايت تُحمَّل فورًا على إنترنت المكتب قد تستغرق ثوانيَ طويلة على هاتف بإشارة ضعيفة، فيغادر الزوار قبل ظهورها. تخسر الزيارة وإشارة الترتيب معًا.

شاشات الكثافة العالية دون مبالغة

تحشر الشاشات عالية الكثافة بكسلين ماديين أو أكثر في كل بكسل CSS، فقد تبدو صورة معروضة بـ 800 بكسل ناعمة ما لم تزوّدها ببيانات أكثر. النصيحة القياسية هي التصدير بضعف مقاس العرض.

عمليًا، ضِعف المقاس بجودة 60 يتفوق عادةً على المقاس المفرد بجودة 90 حدةً وحجمًا معًا — لأن تشوهات الضغط تختفي حين تصغر البكسلات لهذا الحد. استخدم srcset ليختار المتصفح، بدل تقديم أكبر صورك للجميع.

أي صيغة

تدعم كل المتصفحات المستخدمة حاليًا WebP، وتوفّر عادةً 25 إلى 35 بالمئة عن JPEG بجودة مطابقة. ولصفحة مثقلة بالوسائط يكون ذلك غالبًا أكبر تحسين سرعة متاح بمفرده.

• الصور الفوتوغرافية: WebP، مع JPEG احتياطًا إن كنت تدعم متصفحات قديمة جدًا.
• الشعارات والأيقونات والمخططات: SVG حيث أمكن، وإلا PNG.
• لقطات الشاشة: PNG، أو WebP التي تجيدها.
• كل ما يحتاج شفافية: PNG أو WebP، وأبدًا ليس JPEG.

مسار عمل في دقيقتين

1. حدد أكبر عرض ستُعرض به الصورة.
2. صغّرها إلى ذلك العرض — أو ضِعفه لشاشات الكثافة العالية.
3. حوّل إلى WebP بجودة 75.
4. قارن حجم الملف بالأهداف أعلاه.
5. إن بقي كبيرًا فانزل إلى جودة 60 قبل خفض الأبعاد أكثر.