على خلاف مواقع التواصل، ذات المواصفات الثابتة والموثّقة جيدًا، تأتي المواقع بتخطيطات متغيّرة ومتجاوبة وسياقات استخدام شديدة الاختلاف. فلافتة الصفحة الرئيسية تشغل عرض الشاشة كاملًا، وصورة المنتج قد تظهر بعرض 400 أو 800 بكسل بحسب الجهاز، وصورة المدونة تُعرض داخل عمود نصي.
لا يوجد مقاس واحد صحيح لـ«صورة الموقع»، لكن توجد نطاقات موصى بها لكل سياق، وفهمها هو ما يفصل بين موقع سريع تُعرض صوره بوضوح وموقع بطيء بصور ضبابية أو مفرطة الوزن.
لماذا يؤثر مقاس الصورة في موقعك
تنشأ مشكلتان منفصلتان حين لا تكون الصور مهيّأة:
- صور أكبر مما يلزم بالبكسل: ينزّل المتصفح صورة بعرض 4000 بكسل ليعرضها بعرض 800 بكسل، فيُهدر 80% من البيانات المنقولة فورًا. يبطؤ الموقع دون أي مكسب بصري.
- صور أثقل مما يلزم بالكيلوبايت والميغابايت: حتى بالأبعاد الصحيحة، قد تزن صورة غير مضغوطة 3 ميغابايت بينما يمكن أن تزن 150 كيلوبايت بالجودة المرئية نفسها على الشاشة.
لكل مشكلة حلّها: الأولى تحتاج إلى تغيير الحجم (ضبط البكسلات)، والثانية تحتاج إلى الضغط (تخفيف الوزن دون تغيير البكسلات). وعمليًا، تطبيق الاثنين بالتتابع هو ما يعطي أفضل نتيجة.
💡 قاعدة عامة: نادرًا ما يحتاج العرض الأقصى لأي صورة ويب أن يتجاوز 1920 بكسل وهو عرض شاشة Full HD. أما الصور التي لا تشغل الشاشة كاملة (الأعمدة وشبكات المنتجات والصور المصغّرة) فحدّها أقل من ذلك. وما زاد عليه إهدار لعرض النطاق وإبطاء للتحميل.
جدول مرجعي — المقاسات حسب نوع الصورة
| نوع الصورة | الأبعاد الموصى بها | الحجم المثالي | الصيغة |
|---|---|---|---|
| لافتة الواجهة (بالعرض الكامل) | 1920 × 600–900 بكسل | 100–200 كيلوبايت | WebP / JPG |
| لافتة سطح المكتب (تخطيط محدود العرض) | 1200–1440 × 400–600 بكسل | 80–150 كيلوبايت | WebP / JPG |
| لافتة الهاتف | 768 × 400–600 بكسل | 50–100 كيلوبايت | WebP / JPG |
| صورة منتج (متجر إلكتروني) | 800–1200 × 800–1200 بكسل | 60–150 كيلوبايت | WebP / JPG |
| صورة منتج مصغّرة | 300–600 × 300–600 بكسل | 20–50 كيلوبايت | WebP / JPG |
| صورة مقال أو مدونة | 1200 × 600–800 بكسل | 60–120 كيلوبايت | WebP / JPG |
| صورة مصغّرة لمنشور (في القائمة) | 400–600 × 250–400 بكسل | 20–50 كيلوبايت | WebP / JPG |
| الشعار في الترويسة | عرض 200–400 بكسل | 5–30 كيلوبايت | SVG / PNG / WebP |
| أيقونات الواجهة | 24–64 بكسل | 1–5 كيلوبايت | SVG |
| أيقونة الموقع (Favicon) | 16 و32 و180 و192 و512 بكسل | 1–10 كيلوبايت لكل واحدة | .ico + PNG |
| Open Graph (معاينة المشاركة) | 1200 × 630 بكسل | 80–150 كيلوبايت | JPG / WebP |
| خلفية قسم | 1920 × ارتفاع متغيّر | 100–300 كيلوبايت | WebP / JPG |
| صورة ملف شخصي أو أفاتار (في الموقع) | 200–400 × 200–400 بكسل | 20–50 كيلوبايت | WebP / JPG / PNG |
| صورة شهادة عميل | 80–150 × 80–150 بكسل | 5–20 كيلوبايت | WebP / JPG |
الأبعاد حسب نوع الموقع
المواقع التعريفية ومعارض الأعمال
يتراوح العرض الأقصى للمحتوى في المواقع التعريفية عادةً بين 960 و1440 بكسل. ولافتات الواجهة تشغل غالبًا عرض التخطيط كاملًا، فيكفي عرض 1440–1920 بكسل للشاشات الحديثة. أما صور الأقسام (فريق العمل، المكتب، الخدمات) فنادرًا ما تحتاج إلى تجاوز 800 بكسل عرضًا.
- اللافتة الرئيسية: 1920 × 700–900 بكسل، دون 200 كيلوبايت
- صورة فريق العمل: 400–600 × 400–600 بكسل، دون 60 كيلوبايت
- صورة خدمة أو قسم: 800–1200 × 500–700 بكسل، دون 100 كيلوبايت
المدونات والمواقع الإخبارية
في المدونات نادرًا ما يتجاوز عمود المحتوى 760–800 بكسل عرضًا. وصورة بارزة بعرض 1200 بكسل أكثر من كافية لتغطية أي تخطيط متجاوب دون إهدار. أما الصور المصغّرة في قائمة المنشورات فأصغر من ذلك، وغالبًا 300–500 بكسل.
- الصورة البارزة: 1200 × 630 بكسل، دون 100 كيلوبايت
- الصور داخل المقال: عرض 800–1200 بكسل، دون 80 كيلوبايت لكل صورة
- الصورة المصغّرة في القائمة: 400 × 250 بكسل، دون 30 كيلوبايت
المتاجر الإلكترونية
في المتاجر الإلكترونية تُعدّ صور المنتجات العنصر الأكثر حساسية، فهي أداة الإقناع الأولى للعميل. يجب أن تكفي الدقة للتكبير (إن كان الموقع يتيحه)، مع ضبط الوزن حتى لا تتضرر سرعة صفحات القوائم التي تحمّل عشرات الصور دفعة واحدة.
- الصورة الرئيسية للمنتج (مربّعة): 800–1200 × 800–1200 بكسل، 80–150 كيلوبايت بصيغة WebP
- الصور الإضافية للمنتج: المقاس نفسه المعتمد في الصورة الرئيسية
- الصورة المصغّرة في شبكة المنتجات: 300–500 × 300–500 بكسل، 20–50 كيلوبايت
- لافتة قسم أو عرض ترويجي: 1440 × 400–600 بكسل، 80–150 كيلوبايت
🛍️ للمتاجر الإلكترونية: استخدم دائمًا خلفية بيضاء أو محايدة في صور المنتجات؛ فذلك يسهّل الضغط (المساحات الواسعة أحادية اللون تُضغط بكفاءة عالية)، ويضمن اتساقًا بصريًا بين منتجات موردين مختلفين، ويحسّن تجربة المقارنة في السلة.
صفحات الهبوط
تُصمَّم صفحات الهبوط لإجراء تحويل واحد، والسرعة فيها حاسمة: تُظهر الدراسات أن كل ثانية إضافية في التحميل تخفض معدل التحويل بنسبة 7–12%. لذا تحتاج صور صفحات الهبوط إلى تهيئة صارمة.
- صورة الواجهة أو الخلفية: عرض 1440–1920 بكسل، دون 150 كيلوبايت — أولوية قصوى
- صورة منتج أو خدمة: 600–800 بكسل، دون 80 كيلوبايت
- أيقونات المزايا: استخدم SVG كلما أمكن
- صورة شهادة عميل: 80–120 بكسل دائرية، دون 15 كيلوبايت
أثر معامل 2× (شاشات Retina وHiDPI)
شاشات Retina من Apple وشاشات HiDPI من غيرها تضاعف كثافة البكسل، أي تعرض بكسلات أكثر في البوصة الواحدة مقارنة بالشاشات العادية. ولكي تظهر الصور حادة عليها، يجب أن تحمل ضعف بكسلات المساحة المخصصة لعرضها.
مثال: صورة تُعرض بعرض 400 بكسل على شاشة Retina تحتاج إلى عرض 800 بكسل لتبدو حادة. ورفعها بعرض 400 بكسل فقط ينتج صورة ضبابية قليلًا على أجهزة iPhone وMacBook.
والحل الأعملي هو استخدام صور بضِعف أقصى عرض للعرض، مع ضغطها جيدًا حتى لا يتضاعف الوزن بالنسبة نفسها. فصورة بعرض 800 بكسل مضغوطة جيدًا بصيغة WebP تزن عادةً أقل من صورة بعرض 400 بكسل بصيغة PNG غير مهيّأة.
الصيغة المناسبة لكل حالة
| الحالة | الصيغة المثالية | السبب |
|---|---|---|
| الصور الفوتوغرافية (منتج، لافتة، فريق) | WebP مع فقدان | أصغر من JPG بنسبة 25–35% عند جودة مكافئة |
| الشعار في الترويسة | SVG | متجهية، تتحمّل أي مقاس دون فقدان، وأصغر ملفًا |
| الشعار حين لا تُدعم صيغة SVG | PNG بخلفية شفافة | تحافظ على الشفافية المطلوبة |
| أيقونات الواجهة | SVG | قابلة للتكبير، وللتحريك عبر CSS، وحجمها ضئيل |
| لقطة شاشة تحتوي نصًا | WebP بلا فقدان أو PNG | نص حاد؛ أما JPG فيخلّف تشوّهات حول الحروف |
| Open Graph أو معاينة المشاركة | JPG أو WebP | أقصى توافق مع منصات المعاينة |
| خلفية بشفافية | WebP بقناة ألفا أو PNG | الصيغة الوحيدة التي تدعم الشفافية إلى جانب PNG |
كيف تجهّز الصور قبل رفعها
المسار الموصى به لأي صورة موجّهة إلى موقع هو:
- حدّد أبعاد الاستخدام. ما أقصى مساحة ستشغلها هذه الصورة في التخطيط؟ استعن بالجدول المرجعي أعلاه، أو افحص العنصر في المتصفح بالضغط على F12 ثم تحديد مساحة الصورة.
- غيّر الحجم إلى ضِعف مساحة العرض. لتغطية شاشات Retina دون إهدار مفرط. استخدم أداة تغيير حجم الصورة لتحديد العرض بالبكسل بدقة.
- حوّل الصورة إلى WebP. إذا كان موقعك أو نظام إدارة المحتوى لديك يدعم WebP (ومعظم الأنظمة الحديثة تدعمه)، فحوّل الصورة قبل رفعها. استخدم أداة تحويل الصور لتحويل سريع.
- اضغط الصورة. طبّق الضغط لخفض الوزن ضمن النطاقات الموصى بها. استخدم أداة ضغط الصور لتحسين ملفات JPG وPNG وWebP دون فقدان مرئي ملحوظ.
- تحقّق من النتيجة. افتح الصورة المضغوطة وقارنها بالأصل. فإن لم يكن الفارق ظاهرًا للعين، فالنتيجة جيدة.
جهّز صور موقعك الآن
غيّر حجم صور موقعك واضغطها في ثوانٍ، دون تثبيت أي برنامج ودون إنشاء حساب.
كيف تفحص حجم صور موقعك الحالية
لمعرفة ما إذا كانت صور موقعك مهيّأة، استعن بهذه الأدوات:
- Google PageSpeed Insights (pagespeed.web.dev): يحلّل الرابط ويسرد الصور القابلة للتخفيض، مع تقدير المكسب بالكيلوبايت لكل صورة.
- Chrome DevTools → Network → Img: رشّح الطلبات حسب نوع الصورة وانظر إلى حجم كل ملف محمَّل. ورتّبها حسب الحجم لتحديد الأثقل بينها.
- WebPageTest.org: تحليل تفصيلي بمخطط الشلال، يبيّن أي الصور تُحمَّل أولًا وكم تستغرق.
أشيع الأخطاء في مقاسات صور المواقع
- رفع الصور مباشرة من الكاميرا: صور الكاميرا تزن 3–12 ميغابايت وعرضها 4000–8000 بكسل. ولا يحتاج أي موقع إلى صور بهذه المواصفات دون تغيير حجمها وضغطها أولًا.
- استخدام PNG للصور الفوتوغرافية: الصور بصيغة PNG أكبر بـ 5–10 أضعاف من JPG أو WebP دون أي مكسب بصري. اقصر استخدام PNG على الصور ذات الشفافية أو الرسومات ذات الحواف الحادة.
- غياب نسخة للهاتف من الصور: تقديم صورة بعرض 1920 بكسل لهاتف عرضه 390 بكسل إهدار خالص. وخاصية
srcsetفي HTML تعالج ذلك تلقائيًا. - إهمال صور Open Graph: حين يشارك أحدهم صفحة على WhatsApp أو LinkedIn دون ضبط صورة معاينة، تعرض المنصة صورة مصغّرة عامة أو فارغة. لذا اضبط دائمًا وسم
og:imageبصورة مقاسها 1200×630 بكسل. - الشعار بصيغة JPG: الخلفية البيضاء التي تفرضها صيغة JPG تظهر فوق أي خلفية ملوّنة أو شفافة. فاحفظ الشعار دائمًا بصيغة SVG أو PNG.