أفضل حجم وصيغة للصور للمواقع الإلكترونية في عام 2026
الصور غير المُحسّنة هي السبب الأول لبطء المواقع الإلكترونية. يقدم لك هذا الدليل توصيات ملموسة حول أبعاد الصور وأحجام الملفات والصيغ، بناءً على كيفية عرض الصور فعليًا على المواقع الحديثة.
القاعدة الذهبية: قدّم الصور بحجم العرض
لا ترفع أبدًا صورة بعرض 4000 بكسل إذا كانت ستُعرض بعرض 800 بكسل فقط. يقوم المتصفح بتنزيل الصورة الكاملة لكنه يعرضها بجزء بسيط من حجمها — كل تلك البيانات الإضافية هي هدر لنطاق ترددي.
غيّر دائمًا حجم صورك إلى أقصى حجم سيتم عرضها به قبل الرفع.
الأبعاد الموصى بها حسب حالة الاستخدام
| نوع الصورة | العرض الأقصى | حجم الملف المستهدف |
|---|---|---|
| صورة رئيسية/بانر بعرض كامل | 1920 بكسل | أقل من 200 كيلوبايت |
| الصورة البارزة لمقال المدونة | 1200 بكسل | أقل من 100 كيلوبايت |
| صورة داخل مقال المدونة | 800 بكسل | أقل من 60 كيلوبايت |
| صورة منتج (تجارة إلكترونية) | 1000 بكسل | أقل من 80 كيلوبايت |
| صورة مصغرة/بطاقة | 400 بكسل | أقل من 25 كيلوبايت |
| شعار (نقطي) | 200 بكسل | أقل من 10 كيلوبايت |
| نسيج خلفية | 1000 بكسل (متكرر) | أقل من 30 كيلوبايت |
توصيات أفضل الصيغ
- الصور والمنتجات: WebP (الخيار الأول) أو JPG بجودة 80%
- الشعارات والأيقونات: SVG (متجهي) — يتمدد بشكل مثالي بأي حجم، حجم ملف صغير جدًا
- لقطات الشاشة وصور واجهة المستخدم: PNG أو WebP بدون فقدان
- الرسومات ذات الألوان المسطحة: SVG أو WebP
أهداف Core Web Vitals
تصنّف Google الصفحات بناءً على Core Web Vitals. بالنسبة للصور، المقياس ذو الصلة هو Largest Contentful Paint (LCP) — مدى سرعة تحميل الصورة المرئية الرئيسية:
- جيد: LCP أقل من 2.5 ثانية
- يحتاج إلى تحسين: 2.5 – 4 ثوانٍ
- ضعيف: أكثر من 4 ثوانٍ
إذا كانت صورتك الرئيسية أكبر من 200 كيلوبايت، فمن المحتمل أنها تساهم في نتيجة LCP ضعيفة على اتصالات الجوال.
خطوة بخطوة: سير عمل تحسين الصور
- حدد حجم العرض — تحقق من العرض الأقصى الفعلي في CSS/HTML الذي ستُعرض به صورتك.
- غيّر الحجم إلى ذلك العرض — استخدم أداة تغيير حجم الصور. أضف نسخًا بضعف الحجم للشاشات عالية الدقة (إن لزم الأمر).
- حوّل إلى WebP — استخدم JPG إلى WebP أو PNG إلى WebP.
- اضغط — استخدم أداة ضغط الصور بجودة 75–80%.
- حدد خاصيتي width وheight — يمنع Cumulative Layout Shift (CLS)، وهو مقياس آخر من Core Web Vitals.
- أضف التحميل الكسول —
loading="lazy"للصور الموجودة أسفل الشاشة الأولى.
شاشات Retina / عالية الدقة
تعرض شاشات Retina (معظم الهواتف الحديثة وأجهزة MacBook) بكثافة بكسل 2x أو 3x. تتطلب مساحة بعرض 400 بكسل على صفحتك صورة بعرض 800 بكسل لتبدو حادة على شاشة Retina. استخدم خاصية srcset في HTML لتقديم أحجام مختلفة حسب كثافة الشاشة:
<img
src="image-400.webp"
srcset="image-400.webp 1x, image-800.webp 2x"
width="400" height="300"
alt="وصف"
>لمستخدمي Next.js
إذا كنت تستخدم Next.js، فإن مكوّن <Image> المدمج يتعامل مع كل هذا تلقائيًا — يغيّر الحجم، ويقدم WebP، ويضيف التحميل الكسول بشكل أصلي. فقط قدّم الصورة الأصلية عالية الدقة ودع Next.js يحسّن عملية التسليم.